{{-- Floating action cluster: feedback, consultation, WhatsApp, back-to-top --}}
<div x-data="{ showTop: false, expanded: false }"
     x-init="window.addEventListener('scroll', () => showTop = window.scrollY > 600, { passive: true })"
     class="fixed bottom-5 right-5 z-[65] flex flex-col items-end gap-3">

    {{-- Back to top --}}
    <button x-cloak x-show="showTop"
            x-transition:enter="transition duration-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition duration-150" x-transition:leave-end="opacity-0 translate-y-2"
            @click="window.scrollTo({ top: 0, behavior: 'smooth' })"
            class="grid h-11 w-11 place-items-center rounded-full bg-white text-navy-700 shadow-brand-lg ring-1 ring-navy-100 transition hover:-translate-y-0.5 hover:bg-navy-50"
            aria-label="Back to top">
        <x-icon name="arrow-left" class="h-4 w-4 rotate-90" />
    </button>

    {{-- WhatsApp --}}
    <a href="https://wa.me/254112440122?text={{ urlencode('Habari Money-Wise! I have a question about my money.') }}"
       target="_blank" rel="noopener"
       class="group flex items-center gap-2 rounded-full bg-emerald-500 py-3 pl-3 pr-3 text-white shadow-brand-lg transition-all hover:-translate-y-0.5 hover:bg-emerald-400 sm:hover:pr-4"
       aria-label="Chat on WhatsApp">
        <x-icon name="whatsapp" class="h-5 w-5" />
        <span class="hidden max-w-0 overflow-hidden whitespace-nowrap text-sm font-bold opacity-0 transition-all duration-300 group-hover:max-w-[9rem] group-hover:opacity-100 sm:block">Chat with us</span>
    </a>

    {{-- Feedback --}}
    <a href="{{ route('feedback.show') }}"
       class="group flex items-center gap-2 rounded-full bg-white py-3 pl-3 pr-3 text-navy-800 shadow-brand-lg ring-1 ring-navy-100 transition-all hover:-translate-y-0.5 hover:bg-wise-50 sm:hover:pr-4"
       aria-label="Share feedback">
        <x-icon name="message-circle" class="h-5 w-5 text-wise-600" />
        <span class="hidden max-w-0 overflow-hidden whitespace-nowrap text-sm font-bold opacity-0 transition-all duration-300 group-hover:max-w-[9rem] group-hover:opacity-100 sm:block">Share feedback</span>
    </a>

    {{-- Book consultation --}}
    <a href="{{ route('consultation') }}"
       class="group relative flex items-center gap-2 rounded-full bg-navy-900 py-3 pl-3 pr-3 text-white shadow-brand-lg ring-1 ring-white/10 transition-all hover:-translate-y-0.5 hover:bg-navy-800 sm:hover:pr-4"
       aria-label="Book a consultation">
        <span class="absolute -right-0.5 -top-0.5 flex h-3 w-3">
            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-wise-400 opacity-75"></span>
            <span class="relative inline-flex h-3 w-3 rounded-full bg-wise-400"></span>
        </span>
        <x-icon name="calendar" class="h-5 w-5 text-wise-300" />
        <span class="hidden max-w-0 overflow-hidden whitespace-nowrap text-sm font-bold opacity-0 transition-all duration-300 group-hover:max-w-[11rem] group-hover:opacity-100 sm:block">Book a consultation</span>
    </a>
</div>
