@props([
    'settings',
])

<section aria-labelledby="final-cta-heading" class="border-t border-amare-border bg-amare-bg-deep py-20">
    <div class="container-amare space-y-6 text-center">
        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Próximo passo</p>
        <h2 id="final-cta-heading" class="text-3xl font-medium text-amare-text md:text-4xl">Todo grande encontro começa com uma boa conversa.</h2>
        <p class="mx-auto max-w-2xl text-amare-muted">
            Compartilhe as primeiras informações do seu evento. A Amare retorna para entender o contexto e orientar os próximos passos.
        </p>
        <div>
            <a
                href="{{ route('contact') }}"
                class="inline-flex items-center bg-amare-accent px-5 py-3 text-sm font-semibold uppercase tracking-[0.12em] text-amare-accent-text transition-colors duration-(--amare-duration-normal) ease-(--amare-ease-standard) hover:bg-amare-accent-deep"
            >
                {{ $settings->hero_cta_label }}
            </a>
        </div>
    </div>
</section>