<div class="md:hidden mt-5 -mx-1">
    <nav class="flex gap-1 overflow-x-auto pb-2 scrollbar-hide">
        <a href="{{ route('profile.show') }}"
            class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
            @if(request()->routeIs('profile.show'))
                bg-rose-600 text-white shadow-md shadow-rose-600/25
            @else
                bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
            @endif">
            <i class="fa-solid fa-user text-[10px]"></i>
            {{ __('nav.profile') }}
        </a>

        <a href="{{ route('profile.notifications') }}"
            class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
            @if(request()->routeIs('profile.notifications'))
                bg-rose-600 text-white shadow-md shadow-rose-600/25
            @else
                bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
            @endif">
            <i class="fa-solid fa-bell text-[10px]"></i>
            Notifications
            @php $unreadCount = auth()->user()->unreadNotifications()->count(); @endphp
            @if($unreadCount > 0)
                <span class="inline-flex items-center justify-center h-4 min-w-[16px] rounded-full bg-rose-500 px-1 text-[9px] font-bold text-white">
                    {{ $unreadCount > 99 ? '99+' : $unreadCount }}
                </span>
            @endif
        </a>

        <a href="{{ route('profile.likes') }}"
            class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
            @if(request()->routeIs('profile.likes'))
                bg-rose-600 text-white shadow-md shadow-rose-600/25
            @else
                bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
            @endif">
            <i class="fa-solid fa-heart text-[10px]"></i>
            {{ __('nav.likes') }}
        </a>

        <a href="{{ route('user.watched') }}"
            class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
            @if(request()->routeIs('user.watched'))
                bg-rose-600 text-white shadow-md shadow-rose-600/25
            @else
                bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
            @endif">
            <i class="fa-solid fa-eye text-[10px]"></i>
            {{ __('nav.watched') }}
        </a>

        <a href="{{ route('profile.comments') }}"
            class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
            @if(request()->routeIs('profile.comments'))
                bg-rose-600 text-white shadow-md shadow-rose-600/25
            @else
                bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
            @endif">
            <i class="fa-solid fa-comment text-[10px]"></i>
            {{ __('nav.comments') }}
        </a>

        <a href="{{ route('profile.playlists') }}"
            class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
            @if(request()->routeIs('profile.playlists'))
                bg-rose-600 text-white shadow-md shadow-rose-600/25
            @else
                bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
            @endif">
            <i class="fa-solid fa-rectangle-list text-[10px]"></i>
            {{ __('nav.playlists') }}
        </a>

        <a href="{{ route('profile.settings') }}"
            class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
            @if(request()->routeIs('profile.settings'))
                bg-rose-600 text-white shadow-md shadow-rose-600/25
            @else
                bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
            @endif">
            <i class="fa-solid fa-gear text-[10px]"></i>
            Settings
        </a>
    </nav>
</div>