---
const categories = [
  { name: 'ท่อ | Pipe', slug: '/pipe' },
  { name: 'ท่อ PPR', slug: '/ท่อ-ppr-thai-ppr' },
  { name: 'ท่อ HDPE', slug: '/ท่อhdpe' },
  { name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc' },
  { name: 'ท่อ UPVC', slug: '/ท่อ-upvc' },
  { name: 'วาล์ว | Valve', slug: '/วาล์ว-valve' },
  { name: 'ปั๊มน้ำ', slug: '/water-pump' },
  { name: 'ระบบกรองน้ำ', slug: '/water-treatment' },
  { name: 'ระบบรั้ว', slug: '/ระบบรั้ว' },
  { name: 'กริลแอร์', slug: '/grilles' },
  { name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation' },
  { name: 'แฮงเกอร์ แคล้ม โบลท์', slug: '/แฮงเกอร์-แคล้ม-โบลท์-แหวน-น็อต-สกรู-พุก-สตัดเกลียว' },
];
---

<header class="navbar">
  <div class="container-custom">
    <div class="flex items-center justify-between h-20">
      <!-- Logo -->
      <a href="/" class="flex items-center space-x-3 group">
        <img src="/images/logo/13523630950840.png" alt="Deal Plus Tech" class="h-12 w-auto transition-transform group-hover:scale-105" />
        <span class="text-2xl font-bold gradient-text hidden md:block">Deal Plus Tech</span>
      </a>
      
      <!-- Desktop Navigation -->
      <nav class="hidden lg:flex items-center space-x-1">
        <a href="/" class="px-4 py-2 text-base font-medium text-secondary-700 hover:text-primary-600 transition-colors">หน้าแรก</a>
        <a href="/about-us" class="px-4 py-2 text-base font-medium text-secondary-700 hover:text-primary-600 transition-colors">เกี่ยวกับเรา</a>
        
        <!-- Products Dropdown -->
        <div class="relative group">
          <button class="px-4 py-2 text-base font-medium text-secondary-700 group-hover:text-primary-600 transition-colors flex items-center space-x-1">
            <span>สินค้า</span>
            <svg class="w-4 h-4 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </button>
          <div class="absolute top-full left-0 mt-2 w-64 bg-white rounded-xl shadow-2xl border border-secondary-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2">
            <div class="py-2">
              {categories.map(cat => (
                <a href={cat.slug} class="block px-4 py-2.5 text-base text-secondary-700 hover:bg-primary-50 hover:text-primary-600 transition-colors">
                  {cat.name}
                </a>
              ))}
            </div>
          </div>
        </div>
        
        <a href="/portfolio" class="px-4 py-2 text-base font-medium text-secondary-700 hover:text-primary-600 transition-colors">ผลงาน</a>
        <a href="/contact-us" class="px-4 py-2 text-base font-medium text-secondary-700 hover:text-primary-600 transition-colors">ติดต่อเรา</a>
      </nav>
      
      <!-- Contact Button -->
      <div class="hidden lg:flex items-center space-x-4">
        <a href="tel:090-555-1415" class="flex items-center space-x-2 text-primary-600 hover:text-primary-700 transition-colors">
          <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
          </svg>
          <span class="font-semibold">090-555-1415</span>
        </a>
      </div>
      
      <!-- Mobile Menu Button -->
      <button id="mobile-menu-btn" class="lg:hidden p-2 rounded-lg hover:bg-secondary-100 transition-colors">
        <svg class="w-6 h-6 text-secondary-700" 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 id="mobile-menu" class="lg:hidden hidden pb-4">
      <nav class="flex flex-col space-y-2">
        <a href="/" class="px-4 py-3 text-base font-medium text-secondary-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg transition-colors">หน้าแรก</a>
        <a href="/about-us" class="px-4 py-3 text-base font-medium text-secondary-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg transition-colors">เกี่ยวกับเรา</a>
        <a href="/product" class="px-4 py-3 text-base font-medium text-secondary-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg transition-colors">สินค้า</a>
        <a href="/portfolio" class="px-4 py-3 text-base font-medium text-secondary-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg transition-colors">ผลงาน</a>
        <a href="/contact-us" class="px-4 py-3 text-base font-medium text-secondary-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg transition-colors">ติดต่อเรา</a>
      </nav>
    </div>
  </div>
</header>

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