@props(['text' => 'Book Consultation', 'url' => '/contact', 'scrollAfter' => 400])

<div x-data="stickyCta({{ (int) $scrollAfter }})" x-show="visible && !dismissed" x-cloak
     class="fixed bottom-0 left-0 right-0 z-40 border-t border-border bg-white p-4 shadow-lg md:bottom-6 md:left-auto md:right-6 md:w-auto md:rounded-full md:border md:px-6 md:py-3"
     role="region" aria-label="Sticky call to action">
    <div class="container-page flex items-center justify-between gap-4 md:container-none md:p-0">
        <a href="{{ $url }}" class="btn-primary flex-1 text-center md:flex-none" data-track-cta="sticky-cta" data-position="sticky">
            {{ $text }}
        </a>
        <button type="button" @click="dismiss()" class="flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-lg text-muted hover:bg-slate-100 hover:text-text" aria-label="Dismiss">✕</button>
    </div>
</div>