{{-- Floating Side Panel --}}
{{-- Fixed left-center, visible on md+ screens only, dismissible via Alpine.js --}}
<div class="hidden md:block fixed left-0 top-1/2 -translate-y-1/2 z-50"
     x-data="{ open: true }">

    <div x-show="open"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 -translate-x-full"
         x-transition:enter-end="opacity-100 translate-x-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 translate-x-0"
         x-transition:leave-end="opacity-0 -translate-x-full"
         class="glass-dark rounded-r-xl shadow-2xl py-3 px-2 flex flex-col gap-1">

        {{-- Close button --}}
        <button @click="open = false"
                class="self-end mr-1 mb-1 w-6 h-6 flex items-center justify-center text-gray-400 hover:text-white transition-colors text-xs focus:outline-none focus:ring-2 focus:ring-blue-400 rounded"
                aria-label="Close quick links panel">
            <i class="fa-solid fa-xmark"></i>
        </button>

        {{-- Quick links --}}
        <a href="{{ route('public.discussions.index') }}"
           class="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400"
           title="Discussion Board">
            <i class="fa-solid fa-comments w-4 text-blue-400 shrink-0"></i>
            <span class="whitespace-nowrap">Discussion Board</span>
        </a>

        <a href="{{ route('mentorship.public.apply') }}"
           class="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400"
           title="Become a Mentor">
            <i class="fa-solid fa-chalkboard-user w-4 text-blue-400 shrink-0"></i>
            <span class="whitespace-nowrap">Become a Mentor</span>
        </a>

        <a href="{{ route('mentorship.public.apply') }}"
           class="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400"
           title="Become a Mentee">
            <i class="fa-solid fa-user-graduate w-4 text-blue-400 shrink-0"></i>
            <span class="whitespace-nowrap">Become a Mentee</span>
        </a>

        <a href="{{ route('public.knowledge-base.index') }}"
           class="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400"
           title="Knowledge Base">
            <i class="fa-solid fa-database w-4 text-blue-400 shrink-0"></i>
            <span class="whitespace-nowrap">Knowledge Base</span>
        </a>
    </div>

    {{-- Re-open tab (shown when panel is dismissed) --}}
    <button x-show="!open"
            @click="open = true"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 -translate-x-full"
            x-transition:enter-end="opacity-100 translate-x-0"
            class="glass-dark rounded-r-xl shadow-2xl p-2 flex items-center justify-center text-blue-400 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400"
            aria-label="Open quick links panel"
            title="Quick Links">
        <i class="fa-solid fa-chevron-right text-sm"></i>
    </button>
</div>
