<nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
    <div class="grid grid-cols-5 gap-1">
        <a href="{{ route('dashboard') }}" 
           class="flex flex-col items-center p-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white {{ request()->routeIs('dashboard') ? 'text-gray-900 dark:text-white' : '' }}">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-1">Home</span>
        </a>

        <a href="{{ route('card.index') }}" 
           class="flex flex-col items-center p-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white {{ request()->routeIs('card.index') ? 'text-gray-900 dark:text-white' : '' }}">
            <i class="fas fa-credit-card text-xl"></i>
            <span class="text-xs mt-1">Cards</span>
        </a>

        <a href="{{ route('swap') }}" 
           class="flex flex-col items-center p-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white {{ request()->routeIs('swap') ? 'text-gray-900 dark:text-white' : '' }}">
            <i class="fas fa-exchange-alt text-xl"></i>
            <span class="text-xs mt-1">Swap</span>
        </a>

        <a href="{{ route('bots') }}" 
   class="flex flex-col items-center p-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white {{ request()->routeIs('bots') ? 'text-gray-900 dark:text-white' : '' }}">
    <i class="fas fa-robot text-xl"></i>
    <span class="text-xs mt-1">Bots</span>
</a>


        <a href="{{ route('settings') }}" 
   class="relative flex flex-col items-center p-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white {{ request()->routeIs('settings') ? 'text-gray-900 dark:text-white' : '' }}">
    <i class="fas fa-user text-xl"></i>
    <span class="text-xs mt-1">Me</span>
    <span id="mobile-profile-notification-badge" class="absolute top-2 right-2 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center hidden">
        0
    </span>
</a>
    </div>
</nav>