{{-- Navigation Bar --}}
<nav class="bg-brand-dark text-white relative">
    <div class="container mx-auto px-4">
        <div class="hidden md:flex items-center space-x-8 py-0">
            <a href="{{ url('/') }}" class="py-3 text-sm font-bold uppercase tracking-widest hover:text-brand-red transition-colors {{ request()->is('/') ? 'text-brand-red' : '' }}">Home</a>
            <a href="{{ url('/shop') }}" class="py-3 text-sm font-bold uppercase tracking-widest hover:text-brand-red transition-colors {{ request()->is('shop*') ? 'text-brand-red' : '' }}">Shop</a>
            <a href="{{ url('/specials') }}" class="py-3 text-sm font-bold uppercase tracking-widest hover:text-brand-red transition-colors {{ request()->is('specials') ? 'text-brand-red' : '' }}">Specials</a>
            <a href="{{ url('/brands') }}" class="py-3 text-sm font-bold uppercase tracking-widest hover:text-brand-red transition-colors {{ request()->is('brands') ? 'text-brand-red' : '' }}">Brands</a>
            <a href="{{ url('/about') }}" class="py-3 text-sm font-bold uppercase tracking-widest hover:text-brand-red transition-colors {{ request()->is('about') ? 'text-brand-red' : '' }}">About</a>
            <a href="{{ url('/contact') }}" class="py-3 text-sm font-bold uppercase tracking-widest hover:text-brand-red transition-colors {{ request()->is('contact') ? 'text-brand-red' : '' }}">Contact</a>
            <a href="{{ url('/blog') }}" class="py-3 text-sm font-bold uppercase tracking-widest hover:text-brand-red transition-colors {{ request()->is('blog') ? 'text-brand-red' : '' }}">Blog</a>
        </div>
    </div>

    {{-- Mobile Menu --}}
    <div id="mobile-menu" class="hidden md:hidden bg-brand-dark border-t border-gray-700 pb-4">
        <div class="container mx-auto px-4 flex flex-col space-y-1 pt-2">
            <a href="{{ url('/') }}" class="py-3 px-4 text-sm font-bold uppercase tracking-widest hover:bg-brand-red/20 hover:text-brand-red rounded transition-colors {{ request()->is('/') ? 'text-brand-red' : '' }}">Home</a>
            <a href="{{ url('/shop') }}" class="py-3 px-4 text-sm font-bold uppercase tracking-widest hover:bg-brand-red/20 hover:text-brand-red rounded transition-colors">Shop</a>
            <a href="{{ url('/specials') }}" class="py-3 px-4 text-sm font-bold uppercase tracking-widest hover:bg-brand-red/20 hover:text-brand-red rounded transition-colors">Specials</a>
            <a href="{{ url('/brands') }}" class="py-3 px-4 text-sm font-bold uppercase tracking-widest hover:bg-brand-red/20 hover:text-brand-red rounded transition-colors">Brands</a>
            <a href="{{ url('/about') }}" class="py-3 px-4 text-sm font-bold uppercase tracking-widest hover:bg-brand-red/20 hover:text-brand-red rounded transition-colors">About</a>
            <a href="{{ url('/contact') }}" class="py-3 px-4 text-sm font-bold uppercase tracking-widest hover:bg-brand-red/20 hover:text-brand-red rounded transition-colors">Contact</a>
            <a href="{{ url('/blog') }}" class="py-3 px-4 text-sm font-bold uppercase tracking-widest hover:bg-brand-red/20 hover:text-brand-red rounded transition-colors">Blog</a>
        </div>
    </div>
</nav>
