@props([
    'settings',
])

@php
    $lead = $settings->about_summary ?: 'Eventos que refletem propósito, conectam pessoas e criam memórias.';
    $hasImage = filled($settings->about_image_path);
@endphp

<section aria-labelledby="about-hero-heading" class="border-b border-amare-border bg-amare-bg" data-about-hero data-motion="page-open">
    @if ($hasImage)
        <div class="grid min-h-[440px] lg:grid-cols-12">
            <div class="flex min-w-0 items-center bg-amare-bg px-6 py-16 lg:col-span-5 lg:px-[clamp(3rem,6vw,7rem)]" data-reveal-group>
                <div class="w-full max-w-[470px] space-y-6">
                    <p class="text-sm font-medium uppercase tracking-[0.18em] text-amare-accent" data-motion-beat="seal">Sobre nós</p>
                    <h1 id="about-hero-heading" class="max-w-[470px] whitespace-normal break-normal text-hero-spread font-medium text-amare-text" data-motion-beat="title">Sobre a Amare</h1>
                    <p class="max-w-[450px] text-[clamp(1.25rem,2vw,1.55rem)] italic leading-snug text-amare-text-muted" data-motion-beat="lede">{{ $lead }}</p>
                    <span class="block h-9 w-px bg-amare-accent" aria-hidden="true"></span>
                    <p class="max-w-[430px] text-lg leading-relaxed text-amare-text">A Amare une sensibilidade, organização e atenção aos detalhes para criar experiências bem planejadas, do primeiro encontro à execução do evento.</p>
                    <div data-motion-beat="cta">
                        <a href="#michele" class="btn btn-outline text-xs font-bold uppercase tracking-[0.11em]">Conhecer mais</a>
                    </div>
                </div>
            </div>
            <div class="min-h-[360px] overflow-hidden bg-amare-bg-deep max-lg:aspect-[4/5] lg:col-span-7 lg:min-h-0" data-motion-beat="media" data-reveal-media>
                <x-media.image
                    :path="$settings->about_image_path"
                    :alt="$settings->about_image_alt ?: 'Sobre a Amare'"
                    loading="eager"
                    fetchpriority="high"
                    sizes="(max-width: 1023px) 100vw, 58vw"
                    class="img-editorial h-full min-h-[360px] w-full object-cover lg:min-h-[440px]"
                />
            </div>
        </div>
    @else
        <div class="container-amare py-16 md:py-24" data-tonal-hero>
            <div class="max-w-[470px] space-y-5" data-motion-beat="heading">
                <p class="text-sm font-medium uppercase tracking-[0.18em] text-amare-accent" data-motion-beat="seal">Sobre nós</p>
                <h1 id="about-hero-heading" class="text-headline font-medium tracking-tight text-amare-text" data-motion-beat="title">Sobre a Amare</h1>
                <p class="text-lg italic leading-snug text-amare-text-muted" data-motion-beat="lede">{{ $lead }}</p>
                <span class="block h-9 w-px bg-amare-accent" aria-hidden="true"></span>
                <p class="text-lg leading-relaxed text-amare-text">A Amare une sensibilidade, organização e atenção aos detalhes para criar experiências bem planejadas, do primeiro encontro à execução do evento.</p>
                <div data-motion-beat="cta">
                    <a href="#michele" class="btn btn-outline text-xs font-bold uppercase tracking-[0.11em]">Conhecer mais</a>
                </div>
            </div>
        </div>
    @endif
</section>