@props([
    'services',
])

@if ($services->isNotEmpty())
    <section id="vertentes" aria-labelledby="services-heading" class="home-chapter border-b border-amare-border py-24" data-chapter="services">
        <div class="container-amare space-y-10" data-reveal-group>
            <div class="grid gap-6 md:grid-cols-12 md:items-end" data-reveal data-reveal-from="up">
                <div class="space-y-3 md:col-span-4">
                    <h2 id="services-heading" class="text-3xl font-medium text-amare-text">Serviços</h2>
                </div>
                <div class="space-y-4 md:col-span-6 md:col-start-7">
                    <p class="max-w-xl text-amare-text-muted">Assessoria sob medida para decisões importantes e celebrações bem conduzidas.</p>
                    <p class="border-l border-amare-border pl-4 text-sm uppercase tracking-[0.12em] text-amare-accent">Do íntimo ao corporativo</p>
            </div>
            </div>

            <ol class="border-t border-amare-border">
                @foreach ($services as $index => $service)
                    <li class="grid gap-3 border-b border-amare-border py-5 md:grid-cols-[4rem_minmax(0,0.8fr)_minmax(0,1.2fr)] md:gap-6" data-reveal data-reveal-from="up">
                        <span class="text-sm text-amare-accent">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                        <h3 class="text-2xl font-medium text-amare-text">{{ $service->title }}</h3>
                        <p class="text-amare-text-muted">{{ $service->summary }}</p>
                    </li>
                @endforeach
            </ol>

            <p>
                <a href="{{ route('services.index') }}" class="inline-flex min-h-11 items-center text-sm font-semibold text-amare-accent transition-colors hover:text-amare-accent-deep">
                    <span class="border-b border-amare-accent pb-1">Ver todos os serviços</span>
                </a>
            </p>
        </div>
    </section>
@endif