amare/resources/views/components/home/packages.blade.php

@props([
    'packages',
    'settings',
    'eyebrow' => '03 — Amare Casamentos',
    'heading' => 'Um acompanhamento para cada momento.',
    'intro' => 'As modalidades são pontos de partida. O site apresenta o conceito e ajuda o casal a reconhecer seu momento; detalhes operacionais e comerciais ficam para a conversa e proposta.',
    'kicker' => 'level',
    'showSubtitle' => false,
    'showIntro' => true,
    'showNote' => true,
    'ctaRoute' => null,
    'bandCtaHref' => null,
    'bandBody' => 'Conte um pouco sobre o seu casamento. A Amare entende o momento de vocês e orienta o melhor formato de acompanhamento sem depender de um quiz automático.',
    'note' => 'Nomenclaturas exibidas conforme materiais/reunião; confirmar versão final antes da publicação.',
])

@php
    $bandHref = $bandCtaHref ?? route('briefing');
@endphp
<section
    aria-labelledby="packages-heading"
    class="home-chapter border-b border-amare-border bg-amare-bg"
    data-chapter="casamentos"
    id="casamentos"
>
    <div class="container-amare py-16 md:py-24" data-reveal-group>
        <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal data-reveal-from="up">
            <div class="max-w-2xl space-y-4">
                <p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">{{ $eyebrow }}</p>
                <h2 id="packages-heading" class="text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">{{ $heading }}</h2>
            </div>
            @if ($showIntro && filled($intro))
                <p class="max-w-[600px] text-amare-text-muted">{{ $intro }}</p>
            @endif
        </div>

        @if ($packages->isNotEmpty())
            <div class="mt-12 grid border-l border-t border-amare-border md:mt-16 md:grid-cols-3">
                @foreach ($packages as $package)
                    <article class="flex min-h-[480px] flex-col justify-between gap-8 border-b border-r border-amare-border p-8 md:p-10" data-reveal data-reveal-from="up">
                        <div class="space-y-5">
                            <p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent">{{ $kicker === 'tag' ? $package->tag : $package->level }}</p>
                            <h3 class="text-[clamp(1.5625rem,2.7vw,2.125rem)] font-medium leading-tight text-amare-text">{{ $package->name }}</h3>
                            @if ($showSubtitle && filled($package->subtitle))
                                <p class="text-[clamp(1.0625rem,1.7vw,1.25rem)] font-medium leading-snug text-amare-text">{{ $package->subtitle }}</p>
                            @endif
                            <p class="text-amare-text-muted">{{ $package->summary }}</p>
                            <ul class="space-y-3 text-amare-text-muted">
                                @foreach ($package->scope_items as $item)
                                    <li class="flex gap-3"><span aria-hidden="true" class="text-amare-accent">&bull;</span><span>{{ $item }}</span></li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="space-y-5">
                            @php($contactLink = $ctaRoute ? null : \App\Support\PackageContactLink::for($settings, $package->name))
                            <a
                                href="{{ $ctaRoute ? route($ctaRoute) : $contactLink['href'] }}"
                                @if ($ctaRoute === null && $contactLink['isWhatsapp']) target="_blank" rel="noopener noreferrer" @endif
                                class="btn btn-primary text-xs font-bold uppercase tracking-[0.09em]"
                            >
                                {{ $package->cta_label }}
                            </a>
                            <a
                                href="{{ route('packages.show', $package->slug) }}"
                                class="btn btn-ghost min-h-0 px-0 text-xs font-semibold uppercase tracking-[0.09em] text-amare-accent hover:bg-transparent hover:text-amare-accent-deep"
                            >
                                <span class="link-editorial">Conhecer esta modalidade</span>
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>
        @endif

        <div class="mt-6 flex flex-col justify-between gap-8 bg-amare-accent-deep p-8 text-amare-accent-text md:flex-row md:items-center md:p-12" data-reveal data-reveal-from="up">
            <div class="max-w-xl space-y-3">
                <h3 class="text-[clamp(1.5625rem,2.7vw,2.125rem)] font-medium leading-tight">Ainda não sabe qual modalidade é ideal?</h3>
                <p class="text-amare-accent-text/80">{{ $bandBody }}</p>
            </div>
            <a href="{{ $bandHref }}" class="inline-flex min-h-[48px] items-center justify-center self-start border border-amare-accent-text px-6 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent-text transition-colors hover:bg-amare-accent-text hover:text-amare-accent-deep md:self-auto">
                Conversar com a Amare
            </a>
        </div>

        @if ($showNote && filled($note))
            <p class="mt-6 text-sm text-amare-muted">{{ $note }}</p>
        @endif
    </div>
</section>