@props([
    'settings',
])

<section
    aria-labelledby="hero-heading"
    class="home-chapter border-b border-amare-border bg-amare-bg"
    data-chapter="hero"
    data-motion="page-open"
>
    <div class="container-amare grid items-end gap-12 pb-12 pt-16 md:grid-cols-[1.1fr_0.9fr] md:gap-[clamp(3rem,6vw,7rem)] md:pb-[72px] md:pt-24">
        <div data-hero-content data-reveal-group class="flex flex-col gap-8">
            <div data-motion-beat="eyebrow">
                <p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">Assessoria &amp; produção de eventos &bull; São Paulo</p>
            </div>

            <h1 id="hero-heading" data-motion-beat="title" class="text-[clamp(3rem,8vw,5.75rem)] font-medium leading-[0.95] tracking-[-0.04em] text-amare-text">
                Eventos com intenção, cuidado e presença.
            </h1>

            <p class="max-w-[760px] text-[clamp(1.1875rem,2vw,1.5rem)] leading-[1.55] text-amare-text-muted">
                Uma boutique de assessoria que une sensibilidade, organização e condução profissional para transformar cada projeto em uma experiência bem cuidada.
            </p>

            <div data-motion-beat="cta" class="flex flex-wrap items-center gap-4">
                <a href="#sobre" data-testid="home-primary-cta" 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">
                    Conhecer a Amare
                </a>
                <a href="#contato" class="inline-flex min-h-[48px] items-center justify-center border border-amare-accent px-6 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent-deep transition-colors hover:bg-amare-accent hover:text-amare-accent-text">
                    Enviar briefing
                </a>
            </div>
        </div>

        <div
            data-split-hero
            data-motion-beat="media"
            class="min-h-[320px] overflow-hidden bg-amare-bg-deep md:min-h-[520px]"
        >
            @if (filled($settings->hero_image_path))
                <x-media.image :path="$settings->hero_image_path" :alt="$settings->hero_image_alt ?: $settings->brand_name" loading="eager" fetchpriority="high" sizes="(max-width: 1023px) 100vw, 45vw" class="img-editorial h-full w-full object-cover" />
            @else
                <div data-tonal-hero class="flex h-full min-h-[320px] items-center justify-center bg-gradient-to-br from-amare-bg-deep to-amare-bg-archive md:min-h-[520px]">
                    <p class="text-xs font-semibold uppercase tracking-[0.16em] text-amare-muted">Fotografia hero</p>
                </div>
            @endif
        </div>
    </div>
</section>