{{-- * BOTTOM NAVIGATION --}}
<nav class="bg-white border-t border-gray-200 fixed bottom-0 w-full z-30 pb-safe">
    <div class="max-w-md mx-auto flex justify-around items-center h-16">
        {{-- Fil d'actualité --}}
        <a href="{{ route('home') }}"
           class="flex flex-col items-center justify-center w-full h-full space-y-0.5 relative transition-all {{ request()->routeIs('home') ? 'text-boulanger-orange' : 'text-gray-400' }}">
            {{-- Indicator au-dessus --}}
            <span class="absolute top-0 left-1/2 -translate-x-1/2 h-1 rounded-b-full transition-all {{ request()->routeIs('home') ? 'w-12 bg-boulanger-orange' : 'w-0' }}"></span>
            {{-- Background actif --}}
            <div class="absolute inset-0 transition-colors {{ request()->routeIs('home') ? 'bg-orange-50/50' : '' }}"></div>
            <i data-lucide="home" class="w-6 h-6 transition-transform relative z-10 {{ request()->routeIs('home') ? 'scale-110' : '' }}"></i>
            <span class="text-[10px] font-medium relative z-10">Fil</span>
        </a>

        {{-- Boîte à outils --}}
        <a href="{{ route('tools.index') }}"
           class="flex flex-col items-center justify-center w-full h-full space-y-0.5 relative transition-all {{ request()->routeIs('tools.index') ? 'text-boulanger-orange' : 'text-gray-400' }}">
            <span class="absolute top-0 left-1/2 -translate-x-1/2 h-1 rounded-b-full transition-all {{ request()->routeIs('tools.index') ? 'w-12 bg-boulanger-orange' : 'w-0' }}"></span>
            <div class="absolute inset-0 transition-colors {{ request()->routeIs('tools.index') ? 'bg-orange-50/50' : '' }}"></div>
            <i data-lucide="briefcase" class="w-6 h-6 transition-transform relative z-10 {{ request()->routeIs('tools.index') ? 'scale-110' : '' }}"></i>
            <span class="text-[10px] font-medium relative z-10">Outils</span>
        </a>

        {{-- * FAB Button Center (Publier un post) - Uniquement sur la home --}}
        @if(request()->routeIs('home'))
            <div class="relative -top-5">
                <button @click="$dispatch('open-create-post')" class="bg-boulanger-orange text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center transform hover:scale-105 transition active:scale-95 border-4 border-gray-50 ring-2 ring-orange-200">
                    <i data-lucide="plus" class="w-7 h-7"></i>
                </button>
            </div>
        @else
            {{-- * Spacer pour garder l'alignement sur les autres pages --}}
            <div class="w-14"></div>
        @endif

        {{-- Mon Magasin & Équipe --}}
        <a href="{{ route('store.show') }}"
           class="flex flex-col items-center justify-center w-full h-full space-y-0.5 relative transition-all {{ request()->routeIs('store.show') ? 'text-boulanger-orange' : 'text-gray-400' }}">
            <span class="absolute top-0 left-1/2 -translate-x-1/2 h-1 rounded-b-full transition-all {{ request()->routeIs('store.show') ? 'w-12 bg-boulanger-orange' : 'w-0' }}"></span>
            <div class="absolute inset-0 transition-colors {{ request()->routeIs('store.show') ? 'bg-orange-50/50' : '' }}"></div>
            <i data-lucide="users" class="w-6 h-6 transition-transform relative z-10 {{ request()->routeIs('store.show') ? 'scale-110' : '' }}"></i>
            <span class="text-[10px] font-medium relative z-10">Équipe</span>
        </a>

        {{-- Profil --}}
        <a href="{{ route('checklists.index') }}"
           class="flex flex-col items-center justify-center w-full h-full space-y-0.5 relative transition-all {{ request()->routeIs('checklists.index') ? 'text-boulanger-orange' : 'text-gray-400' }}">
            <span class="absolute top-0 left-1/2 -translate-x-1/2 h-1 rounded-b-full transition-all {{ request()->routeIs('checklists.index') ? 'w-12 bg-boulanger-orange' : 'w-0' }}"></span>
            <div class="absolute inset-0 transition-colors {{ request()->routeIs('checklists.index') ? 'bg-orange-50/50' : '' }}"></div>
            <i data-lucide="clipboard-check" class="w-6 h-6 transition-transform relative z-10 {{ request()->routeIs('checklists.index') ? 'scale-110' : '' }}"></i>
            <span class="text-[10px] font-medium relative z-10">Suivi</span>
        </a>
    </div>
</nav>