@props([
    'eyebrow' => '02 — Duas vertentes, uma mesma forma de cuidar',
    'heading' => 'Como podemos acompanhar você?',
    'cards' => [
        [
            'label' => 'Amare Casamentos',
            'title' => 'Planejamento e condução para viver o processo com mais leveza.',
            'body' => 'Do início da organização à reta final, modalidades pensadas para diferentes momentos do casal.',
            'href' => '#casamentos',
            'cta' => 'Conhecer casamentos',
        ],
        [
            'label' => 'Amare Corporate',
            'title' => 'Eventos empresariais com organização, intenção e execução segura.',
            'body' => 'Uma frente própria para projetos corporativos, com linguagem e necessidades diferentes das celebrações sociais.',
            'href' => '#corporate',
            'cta' => 'Conhecer Corporate',
        ],
    ],
])

<section
    aria-labelledby="vertentes-heading"
    class="home-chapter border-b border-amare-border bg-amare-bg"
    data-chapter="vertentes"
    id="vertentes"
>
    <div class="container-amare py-16 md:py-24" data-reveal-group>
        <div class="max-w-3xl space-y-4" data-reveal data-reveal-from="up">
            <p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">{{ $eyebrow }}</p>
            <h2 id="vertentes-heading" class="text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">{{ $heading }}</h2>
        </div>

        <div class="mt-12 grid gap-6 md:mt-16 md:grid-cols-2 md:gap-[24px]">
            @foreach ($cards as $card)
                <article class="relative flex min-h-[420px] flex-col justify-end bg-amare-bg-deep p-8 md:p-10" data-reveal data-reveal-from="up">
                    <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 h-[43%] bg-gradient-to-b from-amare-bg to-transparent"></div>
                    <div class="relative flex flex-col gap-5">
                        <p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">{{ $card['label'] }}</p>
                        <h3 class="text-[clamp(1.5625rem,2.7vw,2.125rem)] font-medium leading-tight text-amare-text">{{ $card['title'] }}</h3>
                        <p class="text-amare-text-muted">{{ $card['body'] }}</p>
                        <a href="{{ $card['href'] }}" class="btn btn-outline mt-2 self-start text-xs font-bold uppercase tracking-[0.09em]">
                            {{ $card['cta'] }}
                        </a>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>