<header class="bg-white shadow-sm sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <!-- Logo -->
      <a href="/" class="text-2xl font-bold text-indigo-600"><%= appName %></a>

      <!-- Search -->
      <form action="/products" method="GET" class="hidden md:flex flex-1 max-w-md mx-8">
        <div class="relative w-full">
          <input type="text" name="search" placeholder="Search products..." value="<%= typeof search !== 'undefined' ? search : '' %>"
            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
          <i class="fas fa-search absolute left-3 top-3 text-gray-400 text-sm"></i>
        </div>
      </form>

      <!-- Nav Links -->
      <nav class="flex items-center gap-4">
        <a href="/products" class="text-gray-600 hover:text-indigo-600 text-sm font-medium">Shop</a>
        
        <!-- Cart -->
        <a href="/cart" class="relative text-gray-600 hover:text-indigo-600">
          <i class="fas fa-shopping-cart text-lg"></i>
          <span class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"><%= typeof cartCount !== 'undefined' ? cartCount : 0 %></span>
        </a>

        <!-- User Menu -->
        <% if (typeof currentUser !== 'undefined' && currentUser) { %>
          <div x-data="{ open: false }" class="relative">
            <button @click="open = !open" class="flex items-center gap-2 text-gray-600 hover:text-indigo-600 text-sm font-medium">
              <i class="fas fa-user-circle text-xl"></i>
              <span class="hidden sm:inline"><%= currentUser.name %></span>
              <i class="fas fa-chevron-down text-xs"></i>
            </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 py-1 z-50">
              <a href="/account" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-tachometer-alt mr-2"></i> Dashboard</a>
              <a href="/account/orders" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-box mr-2"></i> Orders</a>
              <a href="/account/wishlist" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-heart mr-2"></i> Wishlist</a>
              <a href="/account/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-user mr-2"></i> Profile</a>
              <% if (currentUser.isAdmin) { %>
                <hr class="my-1">
                <a href="/admin" class="block px-4 py-2 text-sm text-indigo-600 hover:bg-gray-100 font-medium"><i class="fas fa-shield-alt mr-2"></i> Admin Panel</a>
              <% } %>
              <hr class="my-1">
              <a href="/logout" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100"><i class="fas fa-sign-out-alt mr-2"></i> Logout</a>
            </div>
          </div>
        <% } else { %>
          <a href="/login" class="text-gray-600 hover:text-indigo-600 text-sm font-medium">Login</a>
          <a href="/register" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700">Register</a>
        <% } %>
      </nav>
    </div>
  </div>
</header>
