{{-- Floating action cluster: 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>

</div>