---
const navItems = [
  { label: "หน้าแรก", href: "/" },
  { label: "เกี่ยวกับเรา", href: "/about-us" },
];

const productCategories = [
  {
    title: "ระบบท่อ",
    items: [
      { label: "ไทยพีพีอาร์", href: "/ท่อ-ppr-thai-ppr" },
      { label: "ท่อ PPR ตราช้าง", href: "/ท่อ-ppr-scg" },
      { label: "ท่อ PP-R Poloplast", href: "/pp-r-poloplast" },
      { label: "ท่อ HDPE", href: "/ท่อ-hdpe" },
    ]
  },
  {
    title: "ท่อ UPVC/Specialty",
    items: [
      { label: "ท่อ UPVC", href: "/ท่อ-upvc" },
      { label: "ท่อ Syler", href: "/ท่อ-syler" },
      { label: "ท่อ PVC และข้อต่อ", href: "/ท่อ-และข้อต่อ-pvc" },
      { label: "ท่อ XYLENT", href: "/ท่อ-xy-lent" },
    ]
  },
  {
    title: "เครื่องเชื่อมท่อ",
    items: [
      { label: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe" },
      { label: "เครื่องเชื่อม PPR", href: "/เครื่องเชื่อม-ppr" },
      { label: "Pipe Coupling", href: "/pipe-coupling" },
      { label: "เม็กกรู๊ฟ คับปลิ้ง", href: "/เม็กกรู๊ฟ-คับปลิ้ง" },
    ]
  },
  {
    title: "วาล์ว",
    items: [
      { label: "วาล์ว Valve", href: "/วาล์ว-valve" },
      { label: "DURGO วาล์วเติมอากาศ", href: "/durgo-avvs" },
    ]
  },
  {
    title: "ปั๊มและระบบน้ำ",
    items: [
      { label: "ปั๊มน้ำ Water Pump", href: "/water-pump" },
      { label: "ระบบกรองน้ำ", href: "/water-treatment" },
    ]
  },
  {
    title: "อุปกรณ์ปรับอากาศ",
    items: [
      { label: "กริลแอร์", href: "/grilles" },
    ]
  },
  {
    title: "ฉนวนและรั้ว",
    items: [
      { label: "Armaflex", href: "/armflex" },
      { label: "Aeroflex", href: "/aeroflex" },
      { label: "Maxflex", href: "/maxflex" },
      { label: "Thermobreak", href: "/เทอร์โมเบรค-thermobreak" },
      { label: "Realflex", href: "/realflex" },
      { label: "ตู้ดับเพลิง", href: "/ตู้ดับเพลิง" },
      { label: "รั้วเทวดา", href: "/รั้วเทวดา" },
      { label: "ระบบรั้วไวน์แมน", href: "/ระบบรั้วไวน์แมน" },
    ]
  },
];

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

<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-neutral-200">
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16 lg:h-20">
      <!-- Logo -->
      <a href="/" class="flex items-center gap-2">
        <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
          <span class="text-white font-bold text-lg">ดีล</span>
        </div>
        <span class="font-semibold text-xl text-primary-700 hidden sm:block">ดีล พลัส เทค</span>
      </a>

      <!-- Desktop Nav -->
      <div class="hidden lg:flex items-center gap-8">
        <a href="/" class={`text-sm font-medium transition-colors ${currentPath === '/' ? 'text-primary-600' : 'text-neutral-600 hover:text-primary-600'}`}>
          หน้าแรก
        </a>
        <a href="/about-us" class={`text-sm font-medium transition-colors ${currentPath === '/about-us' ? 'text-primary-600' : 'text-neutral-600 hover:text-primary-600'}`}>
          เกี่ยวกับเรา
        </a>
        <a href="/all-products" class={`text-sm font-medium transition-colors ${currentPath === '/all-products' ? 'text-primary-600' : 'text-neutral-600 hover:text-primary-600'}`}>
          สินค้าทั้งหมด
        </a>
        <a href="/contact-us" class={`text-sm font-medium transition-colors ${currentPath === '/contact-us' ? 'text-primary-600' : 'text-neutral-600 hover:text-primary-600'}`}>
          ติดต่อเรา
        </a>
      </div>

      <!-- Mobile menu button -->
      <button
        type="button"
        class="lg:hidden p-2 rounded-lg text-neutral-600 hover:bg-neutral-100"
        aria-label="เปิดเมนู"
        data-mobile-menu-toggle
      >
        <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>
    </div>

    <!-- Mobile menu -->
    <div class="lg:hidden hidden" data-mobile-menu>
      <div class="py-4 space-y-2 border-t border-neutral-200">
        <a href="/" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-100 rounded-lg">หน้าแรก</a>
        <a href="/about-us" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-100 rounded-lg">เกี่ยวกับเรา</a>
        <a href="/all-products" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-100 rounded-lg">สินค้าทั้งหมด</a>
        <a href="/portfolio" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-100 rounded-lg">ผลงาน</a>
        <a href="/contact-us" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-100 rounded-lg">ติดต่อเรา</a>
      </div>
    </div>
  </nav>
</header>

<script>
  const menuToggle = document.querySelector('[data-mobile-menu-toggle]');
  const mobileMenu = document.querySelector('[data-mobile-menu]');

  menuToggle?.addEventListener('click', () => {
    mobileMenu?.classList.toggle('hidden');
  });
</script>