@props([
    'settings',
])

<section aria-labelledby="final-cta-heading" class="py-16">
    <div class="container-amare rounded-xl border border-amare-border bg-amare-bg-muted px-8 py-12 text-center">
        <h2 id="final-cta-heading" class="text-3xl font-semibold text-amare-text">Vamos planejar o seu evento?</h2>
        <p class="mx-auto mt-3 max-w-2xl text-amare-text-muted">
            Conte um pouco do que você imagina. A próxima conversa começa no briefing.
        </p>
        <div class="mt-8">
            <a
                href="{{ route('contact') }}"
                class="inline-flex items-center rounded-md bg-amare-accent px-5 py-3 text-sm font-semibold text-amare-accent-text transition-colors duration-(--amare-duration-normal) ease-(--amare-ease-standard) hover:bg-amare-accent-hover"
            >
                {{ $settings->hero_cta_label }}
            </a>
        </div>
    </div>
</section>