@props([
    'settings',
])

<section aria-labelledby="about-cta-heading" class="border-b border-amare-border bg-amare-bg py-6 md:py-7" data-about-cta>
    <div class="container-amare grid items-center gap-7 md:grid-cols-[auto_minmax(0,1fr)_auto]" data-reveal-group>
        <svg class="mx-auto h-11 w-11 text-amare-accent md:mx-0" viewBox="0 0 48 48" fill="none" stroke="currentColor" aria-hidden="true" data-reveal data-reveal-from="up">
            <rect x="7" y="12" width="34" height="26" rx="2"/>
            <path d="m8 15 16 13 16-13"/>
            <path d="M18 12v-2a6 6 0 0 1 12 0v2"/>
        </svg>
        <div class="text-center md:text-left" data-reveal data-reveal-from="up">
            <h2 id="about-cta-heading" class="text-[clamp(1.75rem,3vw,2rem)] font-medium text-amare-accent-deep">Vamos criar algo inesquecível juntos?</h2>
            <p class="mt-1 text-base leading-relaxed text-amare-text">Conte com a Amare para transformar seu evento em uma experiência organizada, cuidadosa e memorável.</p>
        </div>
        <div class="justify-self-center md:justify-self-end" data-reveal data-reveal-from="up">
            <a href="{{ route('briefing') }}" class="btn btn-primary text-xs font-bold uppercase tracking-[0.11em]">
                {{ $settings->hero_cta_label ?: 'Solicitar proposta' }}
            </a>
        </div>
    </div>
</section>