@extends('layouts.public')

@section('content')
    <x-public.photo-hero
        :image-path="$siteSettings->services_hero_image_path"
        :image-alt="$siteSettings->services_hero_image_alt"
        eyebrow="Serviços"
        title="O cuidado certo para cada tipo de evento."
        summary="A Amare acompanha projetos sociais e corporativos com planejamento, organização e condução profissional. O formato muda conforme o momento, o evento e a necessidade de cada cliente."
    >
        <div class="flex flex-wrap items-center gap-4">
            <a href="#vertentes" class="btn btn-primary text-xs font-bold uppercase tracking-[0.09em]">
                Conhecer os serviços
            </a>
            <a href="{{ route('contact') }}" class="btn btn-ghost min-h-0 px-0 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent hover:bg-transparent hover:text-amare-accent-deep">
                <span class="border-b border-amare-accent pb-1">Tenho um evento em mente</span>
            </a>
        </div>
    </x-public.photo-hero>

    <x-home.vertentes
        eyebrow="Duas vertentes"
        heading="Escolha por contexto, não por uma lista de pacotes."
        :cards="[
            [
                'label' => 'Amare Casamentos',
                'title' => 'Acompanhamento para diferentes momentos do planejamento.',
                'body' => 'Três modalidades para casais que estão começando, já avançaram ou precisam de apoio na reta final.',
                'href' => '#casamentos',
                'cta' => 'Ver modalidades',
            ],
            [
                'label' => 'Amare Corporate',
                'title' => 'Planejamento e execução para eventos empresariais.',
                'body' => 'Uma frente própria, com linguagem profissional e estrutura adequada a projetos corporativos.',
                'href' => '#corporate',
                'cta' => 'Ver Corporate',
            ],
        ]"
    />

    <x-home.packages
        :packages="$weddingPackages"
        :settings="$siteSettings"
        eyebrow="Amare Casamentos"
        heading="Três formas de ter a Amare ao lado."
        :show-intro="false"
        kicker="tag"
        :show-subtitle="true"
        cta-route="contact"
        :band-cta-href="route('contact')"
        band-body="Conte um pouco sobre o casamento. A Amare entende o momento de vocês e orienta o melhor formato de acompanhamento sem depender de um quiz automático."
        :show-note="false"
    />

    @if ($weddingPackages->isNotEmpty())
        <section aria-label="Comparação rápida entre as modalidades" class="border-b border-amare-border bg-amare-bg">
            <div class="container-amare py-16 md:py-24" data-reveal-group>
                <div class="grid border-l border-t border-amare-border md:grid-cols-3">
                    @foreach ($weddingPackages as $package)
                        @if (filled($package->compare_heading))
                            <article class="flex min-h-[300px] flex-col justify-between gap-6 border-b border-r border-amare-border p-8 md:p-10" data-reveal data-reveal-from="up">
                                <div class="space-y-4">
                                    <p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent">{{ $package->name }}</p>
                                    <h3 class="text-[clamp(1.25rem,2vw,1.5rem)] font-medium leading-tight text-amare-text">{{ $package->compare_heading }}</h3>
                                    <p class="text-amare-text-muted">{{ $package->compare_summary }}</p>
                                </div>
                                <a href="{{ route('packages.show', $package->slug) }}" class="btn btn-ghost min-h-0 self-start px-0 text-xs font-semibold uppercase tracking-[0.09em] text-amare-accent hover:bg-transparent hover:text-amare-accent-deep">
                                    <span class="border-b border-amare-accent pb-1">Conhecer esta modalidade</span>
                                </a>
                            </article>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <x-home.corporate
        :settings="$siteSettings"
        eyebrow="Amare Corporate"
        heading="Organização, produção e condução com linguagem empresarial."
        :show-meta="false"
        :steps="[
            ['title' => 'Planejamento', 'body' => 'Estruturação do evento, escopo, prioridades e cronograma.'],
            ['title' => 'Produção', 'body' => 'Coordenação dos elementos e fornecedores necessários ao projeto.'],
            ['title' => 'Execução', 'body' => 'Acompanhamento e condução do evento conforme o planejamento aprovado.'],
        ]"
        cta-label="Falar sobre um evento Corporate"
        :cta-href="route('contact')"
        :show-aside="false"
    />

    <x-home.final-cta :settings="$siteSettings" :cta-href="route('contact')" />
@endsection