@props([
    'packages',
    'settings',
])

@php
    $whatsappDigits = preg_replace('/\D/', '', (string) $settings->whatsapp_number);
    $hasWhatsapp = strlen($whatsappDigits) >= 10;
@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">03 — Amare Casamentos</p>
                <h2 id="packages-heading" class="text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">Um acompanhamento para cada momento.</h2>
            </div>
            <p class="max-w-[600px] text-amare-text-muted">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.</p>
        </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">{{ $package->level }}</p>
                            <h3 class="text-[clamp(1.5625rem,2.7vw,2.125rem)] font-medium leading-tight text-amare-text">{{ $package->name }}</h3>
                            <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>
                        @php
                            $waLink = $hasWhatsapp
                                ? 'https://wa.me/'.$whatsappDigits.'?text='.rawurlencode('Olá, gostaria de conversar sobre a modalidade '.$package->name.' para meu casamento.')
                                : route('briefing', ['servico_interesse' => $package->name]);
                        @endphp
                        <a
                            href="{{ $waLink }}"
                            @if ($hasWhatsapp) target="_blank" rel="noopener noreferrer" @endif
                            class="inline-flex min-h-[48px] items-center justify-center border border-transparent bg-amare-accent px-6 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent-text transition-colors hover:bg-amare-accent-deep"
                        >
                            {{ $package->cta_label }}
                        </a>
                    </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">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.</p>
            </div>
            <a href="{{ route('briefing') }}" 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>

        <p class="mt-6 text-sm text-amare-muted">Nomenclaturas exibidas conforme materiais/reunião; confirmar versão final antes da publicação.</p>
    </div>
</section>