{{-- Dark call-to-action banner, optionally over a photograph ('image', a file in /public). Defaults to the Book a Demo call to action. --}}
@props([
    'title' => 'Book a demo',
    'text' => null,
    'image' => null,
    'buttonLabel' => 'Book a Demo',
    'buttonUrl' => null,
    'secondaryLabel' => null,
    'secondaryUrl' => null,
])

<section class="section">
    <div class="container-page">
        <div class="relative isolate overflow-hidden rounded-3xl bg-navy-900 px-6 py-14 text-center shadow-xl shadow-brand-900/20 sm:px-12 sm:py-20">
            @if ($image)
                <img src="{{ \App\Support\Assets::url($image) }}" alt="" loading="lazy" decoding="async" class="absolute inset-0 -z-20 h-full w-full object-cover">
            @endif
            <div class="absolute inset-0 -z-10 bg-gradient-to-br from-navy-900/95 via-navy-800/90 to-brand-800/85" aria-hidden="true"></div>
            <div class="pointer-events-none absolute -right-12 -top-16 -z-10 h-56 w-56 rounded-full bg-sky-400/25 blur-3xl" aria-hidden="true"></div>
            <div class="pointer-events-none absolute -bottom-16 -left-12 -z-10 h-56 w-56 rounded-full bg-indigo-400/25 blur-3xl" aria-hidden="true"></div>

            <h2 class="relative text-2xl font-bold !text-white sm:text-4xl">{{ $title }}</h2>

            @if ($text)
                <p class="relative mx-auto mt-3 max-w-2xl text-lg text-slate-200">{{ $text }}</p>
            @endif

            <div class="relative mt-8 flex flex-wrap justify-center gap-3">
                <a href="{{ $buttonUrl ?? route('book-demo') }}" class="btn-light px-7 py-3.5 text-base shadow-lg shadow-navy-900/30">{{ $buttonLabel }} <x-icon name="arrow" class="h-4 w-4" /></a>

                @if ($secondaryLabel)
                    <a href="{{ $secondaryUrl }}" class="btn-ghost-light px-7 py-3.5 text-base">{{ $secondaryLabel }}</a>
                @endif
            </div>
        </div>
    </div>
</section>