<header class="absolute top-0 inset-x-0 z-50 bg-transparent">
    <div class="buyer-container">
    <div class="flex items-center justify-between w-full buyer-header">

        <!-- Logo - Far Left -->
        <div class="flex items-center flex-shrink-0 buyer-header-logo-container">
            <a href="{{ route('buyer.index') }}" class="flex items-center">
                <span class="buyer-header-logo text-white font-bold text-lg">Vehicle Listing</span>
            </a>
        </div>

        <!-- Navigation Menu - Center -->
        <nav class="hidden md:flex items-center justify-center flex-1 space-x-6 buyer-header-menu-container">
            <a href="{{ route('buyer.index') }}" class="buyer-header-menu uppercase tracking-wide hover:opacity-80 transition-opacity text-white">
                Home
            </a>
            <a href="#" class="buyer-header-menu uppercase tracking-wide hover:opacity-80 transition-opacity text-white">
                Pages
            </a>
            <a href="#" class="buyer-header-menu uppercase tracking-wide hover:opacity-80 transition-opacity text-white">
                Car
            </a>
            <a href="#" class="buyer-header-menu uppercase tracking-wide hover:opacity-80 transition-opacity text-white">
                Contact Us
            </a>
            <a href="{{ route('shop.index') }}" class="buyer-header-menu uppercase tracking-wide hover:opacity-80 transition-opacity text-white">
                Shop
            </a>
        </nav>

        <!-- Icons - Far Right -->
        <div class="flex items-center space-x-4 md:space-x-6 flex-shrink-0 buyer-header-icons">
            <button class="p-2 hover:opacity-80 transition-opacity" aria-label="Shopping Cart">
                <img src="{{ asset('assets/buyer/header/shop.svg') }}" alt="Shopping Cart" class="buyer-header-icon">
            </button>

            <button class="p-2 hover:opacity-80 transition-opacity" aria-label="Search">
                <img src="{{ asset('assets/buyer/header/search.svg') }}" alt="Search" class="buyer-header-icon">
            </button>

            <button class="p-2 hover:opacity-80 transition-opacity" aria-label="Tiles">
                <img src="{{ asset('assets/buyer/header/tiles.svg') }}" alt="Tiles" class="buyer-header-icon">
            </button>
        </div>

    </div>
</div>

</header>

