{{-- Main Header --}}
<header class="bg-white border-b border-gray-100 py-4 sticky top-0 z-40 shadow-sm">
    <div class="container mx-auto px-4 flex items-center justify-between">
        {{-- Logo --}}
        <a href="{{ url('/') }}" class="flex items-center space-x-2 shrink-0">
            <div class="w-10 h-10 bg-brand-red rounded-lg flex items-center justify-center">
                <i data-lucide="settings" class="w-6 h-6 text-white"></i>
            </div>
            <div>
                <span class="text-xl font-extrabold text-brand-dark tracking-tight">DIKE <span class="text-brand-red">AUTO PARTS</span></span>
                <span class="text-[9px] text-gray-400 uppercase tracking-[0.2em] block -mt-1 font-bold">Online Store</span>
            </div>
        </a>

        {{-- Search Bar --}}
        <form action="{{ url('/shop') }}" method="GET" class="hidden md:flex flex-1 max-w-xl mx-8">
            <div class="flex w-full">
                <input
                    type="text"
                    name="search"
                    value="{{ request('search') }}"
                    placeholder="Search for auto parts..."
                    class="flex-1 border-2 border-gray-200 border-r-0 rounded-l-lg px-4 py-3 text-sm outline-none focus:border-brand-red transition-colors"
                >
                <button type="submit" class="bg-brand-red text-white px-6 rounded-r-lg hover:bg-red-700 transition-colors flex items-center">
                    <i data-lucide="search" class="w-5 h-5"></i>
                </button>
            </div>
        </form>

        {{-- Icons --}}
        <div class="flex items-center space-x-4">
            @auth
                <a href="{{ url('/dashboard') }}" class="flex flex-col items-center text-gray-600 hover:text-brand-red transition-colors group">
                    <i data-lucide="user" class="w-6 h-6 group-hover:scale-110 transition-transform"></i>
                    <span class="text-[10px] font-bold uppercase tracking-wider mt-1 hidden lg:block">Account</span>
                </a>
            @else
                <a href="{{ url('/auth') }}" class="flex flex-col items-center text-gray-600 hover:text-brand-red transition-colors group">
                    <i data-lucide="user" class="w-6 h-6 group-hover:scale-110 transition-transform"></i>
                    <span class="text-[10px] font-bold uppercase tracking-wider mt-1 hidden lg:block">Sign In</span>
                </a>
            @endauth

            <a href="{{ url('/cart') }}" class="flex flex-col items-center text-gray-600 hover:text-brand-red transition-colors group relative">
                <i data-lucide="shopping-cart" class="w-6 h-6 group-hover:scale-110 transition-transform"></i>
                <span id="cart-badge" class="absolute -top-2 -right-2 bg-brand-red text-white text-[10px] font-bold w-5 h-5 rounded-full items-center justify-center hidden">0</span>
                <span class="text-[10px] font-bold uppercase tracking-wider mt-1 hidden lg:block">Cart</span>
            </a>

            {{-- Mobile Menu Toggle --}}
            <button onclick="document.getElementById('mobile-menu').classList.toggle('hidden')" class="md:hidden text-gray-600">
                <i data-lucide="menu" class="w-6 h-6"></i>
            </button>
        </div>
    </div>

    {{-- Mobile Search --}}
    <div class="md:hidden px-4 mt-3">
        <form action="{{ url('/shop') }}" method="GET" class="flex">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search parts..." class="flex-1 border-2 border-gray-200 border-r-0 rounded-l-lg px-3 py-2 text-sm outline-none focus:border-brand-red">
            <button type="submit" class="bg-brand-red text-white px-4 rounded-r-lg"><i data-lucide="search" class="w-4 h-4"></i></button>
        </form>
    </div>
</header>