{{-- Left-edge interactive tools dock, quick-launch every calculator.
     Collapsed to an icon rail; expands labels on hover. Desktop only
     (mobile reaches the tools through the nav + right-hand actions). --}}
@php
    $dockTools = [
        ['href' => route('assessments.show', 'financial-health'), 'icon' => 'heart-pulse', 'label' => 'Financial Health Check', 'path' => 'assessments/financial-health'],
        ['href' => route('tools.show', 'budget'), 'icon' => 'calculator', 'label' => 'Budget Builder', 'path' => 'tools/budget'],
        ['href' => route('tools.show', 'debt-payoff'), 'icon' => 'unlink', 'label' => 'Debt Payoff', 'path' => 'tools/debt-payoff'],
        ['href' => route('tools.show', 'compound-growth'), 'icon' => 'trending-up', 'label' => 'Compound Growth', 'path' => 'tools/compound-growth'],
        ['href' => route('tools.show', 'emergency-fund'), 'icon' => 'life-buoy', 'label' => 'Emergency Fund', 'path' => 'tools/emergency-fund'],
        ['href' => route('tools.show', 'wealth-goals'), 'icon' => 'target', 'label' => 'Wealth & Goals', 'path' => 'tools/wealth-goals'],
        ['href' => route('tools.show', 'loan-cost'), 'icon' => 'receipt', 'label' => 'True Cost of Loans', 'path' => 'tools/loan-cost'],
        ['href' => route('tools.show', 'retirement'), 'icon' => 'landmark', 'label' => 'Retirement', 'path' => 'tools/retirement'],
        ['href' => route('tools.show', 'values-clarification'), 'icon' => 'compass', 'label' => 'Values Clarification', 'path' => 'tools/values-clarification'],
    ];
    $dockCurrent = request()->path();
@endphp

<div x-data="{ open: false }"
     @mouseenter="open = true" @mouseleave="open = false"
     class="pointer-events-none fixed left-0 top-1/2 z-[60] hidden -translate-y-1/2 lg:block">
    <div class="pointer-events-auto flex flex-col gap-1 rounded-r-2xl border border-l-0 border-navy-100 bg-white/95 p-2 shadow-brand-lg backdrop-blur transition-all duration-300">

        {{-- Handle / header --}}
        <div class="flex items-center gap-2 px-1.5 pb-1 pt-0.5">
            <span class="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-navy-900 text-wise-300">
                <x-icon name="sliders" class="h-4 w-4" />
            </span>
            <span class="overflow-hidden whitespace-nowrap font-display text-[11px] font-extrabold uppercase tracking-[0.15em] text-navy-500 transition-all duration-300"
                  :class="open ? 'max-w-[8rem] opacity-100' : 'max-w-0 opacity-0'">Quick tools</span>
        </div>

        @foreach ($dockTools as $tool)
            @php $active = $dockCurrent === $tool['path']; @endphp
            <a href="{{ $tool['href'] }}"
               class="group/dock relative flex items-center gap-3 rounded-xl px-1.5 py-2 transition-colors {{ $active ? 'bg-wise-50' : 'hover:bg-navy-50' }}"
               aria-label="{{ $tool['label'] }}">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl ring-1 transition-all duration-200 {{ $active ? 'bg-wise-400 text-navy-950 ring-wise-400' : 'bg-navy-50 text-navy-600 ring-navy-100 group-hover/dock:bg-navy-900 group-hover/dock:text-wise-300 group-hover/dock:ring-navy-900' }}">
                    <x-icon :name="$tool['icon']" class="h-[18px] w-[18px]" />
                </span>
                <span class="overflow-hidden whitespace-nowrap text-sm font-bold text-navy-800 transition-all duration-300"
                      :class="open ? 'max-w-[10rem] opacity-100' : 'max-w-0 opacity-0'">{{ $tool['label'] }}</span>
            </a>
        @endforeach

        {{-- All tools --}}
        <a href="{{ route('tools.index') }}"
           class="group/dock mt-0.5 flex items-center gap-3 rounded-xl border-t border-navy-100 px-1.5 pb-1 pt-2.5 transition-colors hover:bg-navy-50">
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl text-navy-500 transition-colors group-hover/dock:text-wise-600">
                <x-icon name="arrow-right" class="h-[18px] w-[18px]" />
            </span>
            <span class="overflow-hidden whitespace-nowrap text-sm font-bold text-wise-600 transition-all duration-300"
                  :class="open ? 'max-w-[10rem] opacity-100' : 'max-w-0 opacity-0'">All tools</span>
        </a>
    </div>
</div>