---
const navLinks = [
  { href: '/products', label: 'สินค้า' },
  { href: '/vendors', label: 'ร้านค้า' },
];

const currentPath = Astro.url.pathname;
---

<header class="bg-white shadow-sm sticky top-0 z-40">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="/" class="flex items-center gap-2">
        <span class="text-2xl font-bold text-blue-600">ร้านของเรา</span>
      </a>
      
      <!-- Desktop Nav -->
      <nav class="hidden md:flex items-center gap-6">
        {navLinks.map(link => (
          <a 
            href={link.href} 
            class={`text-gray-600 hover:text-blue-600 transition-colors ${
              currentPath.startsWith(link.href) ? 'text-blue-600 font-medium' : ''
            }`}
          >
            {link.label}
          </a>
        ))}
      </nav>
      
      <!-- Search -->
      <div class="hidden md:flex flex-1 max-w-md mx-8">
        <form action="/products" method="GET" class="w-full">
          <div class="relative">
            <input 
              type="search" 
              name="q"
              placeholder="ค้นหาสินค้า..." 
              class="w-full border border-gray-200 rounded-lg pl-10 pr-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
            <svg class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" 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>
          </div>
        </form>
      </div>
      
      <!-- Actions -->
      <div class="flex items-center gap-4">
        <!-- Wishlist -->
        <a href="/wishlist" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
          <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </a>
        
        <!-- Account -->
        <a href="/account" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
          <svg class="w-6 h-6 text-gray-600" 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>
        </a>
        
        <!-- Cart (handled by CartBadge) -->
        <div id="cart-button"></div>
      </div>
      
      <!-- Mobile Menu Button -->
      <button class="md:hidden p-2 hover:bg-gray-100 rounded-lg" id="mobile-menu-btn">
        <svg class="w-6 h-6 text-gray-600" 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>
    </div>
    
    <!-- Mobile Menu -->
    <div class="md:hidden hidden" id="mobile-menu">
      <div class="py-4 space-y-2">
        <form action="/products" method="GET" class="px-2 pb-4">
          <input 
            type="search" 
            name="q"
            placeholder="ค้นหาสินค้า..." 
            class="w-full border border-gray-200 rounded-lg px-4 py-2"
          />
        </form>
        {navLinks.map(link => (
          <a 
            href={link.href} 
            class={`block px-4 py-2 ${
              currentPath.startsWith(link.href) ? 'text-blue-600 bg-blue-50' : 'text-gray-600'
            }`}
          >
            {link.label}
          </a>
        ))}
        <hr class="my-2" />
        <a href="/wishlist" class="block px-4 py-2 text-gray-600">สินค้าที่ชอบ</a>
        <a href="/account" class="block px-4 py-2 text-gray-600">บัญชีของฉัน</a>
      </div>
    </div>
  </div>
</header>

<script>
  const menuBtn = document.getElementById('mobile-menu-btn');
  const menu = document.getElementById('mobile-menu');
  
  menuBtn?.addEventListener('click', () => {
    menu?.classList.toggle('hidden');
  });
</script>