<header class="bg-white shadow-sm sticky top-0 z-50">
    <!-- Top bar -->
    <div class="bg-blue-600 text-white text-sm py-2">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <span>Free delivery on orders over R5,000</span>
            <div class="flex items-center gap-4">
                <a href="{{ route('compare') }}" class="hover:underline">Price Compare</a>
                <a href="{{ route('register', ['type' => 'supplier']) }}" class="hover:underline">Become a Supplier</a>
            </div>
        </div>
    </div>
    
    <!-- Main header -->
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16 gap-4">
            <!-- Logo -->
            <a href="{{ route('home') }}" class="flex items-center gap-2 shrink-0">
                <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                </svg>
                <span class="text-xl font-bold text-gray-900">ProcureHub</span>
            </a>
            
            <!-- Search -->
            <form action="{{ route('products.index') }}" method="GET" class="hidden md:flex flex-1 max-w-2xl">
                <div class="relative w-full">
                    <input type="text" name="search" value="{{ request('search') }}" 
                           placeholder="Search products, categories, suppliers..." 
                           class="w-full pl-4 pr-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-blue-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </button>
                </div>
            </form>
            
            <!-- Navigation -->
            <nav class="flex items-center gap-2">
                <a href="{{ route('products.index') }}" class="hidden lg:block px-3 py-2 text-gray-600 hover:text-blue-600 font-medium">Products</a>
                <a href="{{ route('categories') }}" class="hidden lg:block px-3 py-2 text-gray-600 hover:text-blue-600 font-medium">Categories</a>
                <a href="{{ route('deals') }}" class="hidden lg:block px-3 py-2 text-red-600 hover:text-red-700 font-medium">Deals</a>
                
                @auth
                    @if(auth()->user()->user_type === 'company')
                        <!-- Cart Button -->
                        <button @click="cartOpen = true" class="relative p-2 text-gray-600 hover:text-blue-600">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                            </svg>
                            @php $cartCount = \App\Models\CartItem::where('user_id', auth()->id())->sum('quantity'); @endphp
                            @if($cartCount > 0)
                                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">{{ $cartCount }}</span>
                            @endif
                        </button>
                    @endif
                    
                    <!-- User Menu -->
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" class="flex items-center gap-2 p-2 text-gray-600 hover:text-blue-600">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            <span class="hidden md:block text-sm">{{ auth()->user()->name }}</span>
                        </button>
                        
                        <div x-show="open" @click.away="open = false" x-cloak
                             class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border py-2 z-50">
                            @if(auth()->user()->user_type === 'supplier')
                                <a href="{{ route('supplier.dashboard') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Dashboard</a>
                                <a href="{{ route('supplier.products') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">My Products</a>
                                <a href="{{ route('supplier.orders') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Orders</a>
                                <a href="{{ route('supplier.billing') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Billing</a>
                            @else
                                <a href="{{ route('company.dashboard') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Dashboard</a>
                                <a href="{{ route('orders.index') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">My Orders</a>
                                <a href="{{ route('company.profile') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Profile</a>
                            @endif
                            <hr class="my-2">
                            <form action="{{ route('logout') }}" method="POST">
                                @csrf
                                <button type="submit" class="w-full text-left px-4 py-2 text-red-600 hover:bg-gray-100">Logout</button>
                            </form>
                        </div>
                    </div>
                @else
                    <a href="{{ route('login') }}" class="px-4 py-2 text-gray-600 hover:text-blue-600 font-medium">Login</a>
                    <a href="{{ route('register') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium">Register</a>
                @endauth
                
                <!-- Mobile menu button -->
                <button @click="mobileMenu = !mobileMenu" class="lg:hidden p-2 text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>
            </nav>
        </div>
    </div>
    
    <!-- Categories bar -->
    <div class="bg-gray-100 border-t hidden lg:block">
        <div class="container mx-auto px-4">
            <div class="flex items-center gap-6 py-2 text-sm">
                @php $categories = \App\Models\Category::whereNull('parent_id')->take(8)->get(); @endphp
                @foreach($categories as $category)
                    <a href="{{ route('products.index', ['category' => $category->slug]) }}" class="text-gray-600 hover:text-blue-600">{{ $category->name }}</a>
                @endforeach
            </div>
        </div>
    </div>
    
    <!-- Mobile menu -->
    <div x-show="mobileMenu" x-cloak class="lg:hidden bg-white border-t">
        <div class="container mx-auto px-4 py-4 space-y-2">
            <form action="{{ route('products.index') }}" method="GET" class="mb-4">
                <input type="text" name="search" placeholder="Search..." class="w-full px-4 py-2 border rounded-lg">
            </form>
            <a href="{{ route('products.index') }}" class="block py-2 text-gray-600">Products</a>
            <a href="{{ route('categories') }}" class="block py-2 text-gray-600">Categories</a>
            <a href="{{ route('deals') }}" class="block py-2 text-red-600">Deals</a>
            <a href="{{ route('compare') }}" class="block py-2 text-gray-600">Price Compare</a>
        </div>
    </div>
</header>
