@props([
    'services',
])

@if ($services->isNotEmpty())
    <section aria-labelledby="services-heading" class="border-b border-amare-border py-16">
        <div class="container-amare space-y-8">
            <div class="max-w-2xl space-y-3">
                <h2 id="services-heading" class="text-3xl font-semibold text-amare-text">Serviços</h2>
                <p class="text-amare-text-muted">Um resumo do que a assessoria pode conduzir com você.</p>
            </div>

            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                @foreach ($services as $service)
                    <article class="space-y-3 border-t border-amare-border pt-4">
                        <h3 class="text-xl font-semibold text-amare-text">{{ $service->title }}</h3>
                        <p class="text-amare-text-muted">{{ $service->summary }}</p>
                    </article>
                @endforeach
            </div>

            <p>
                <a href="{{ url('/servicos') }}" class="text-sm font-semibold text-amare-accent transition-colors hover:text-amare-accent-hover">
                    Ver todos os serviços
                </a>
            </p>
        </div>
    </section>
@endif