---
const categories = [
  { 
    name: 'ท่อพีพีอาร์', 
    slug: '/ท่อพีพีอาร์',
    subcategories: [
      { name: 'ไทยพีพีอาร์', slug: '/ท่อ-ppr-thai-ppr' },
      { name: 'ท่อ PPR ตราช้าง', slug: '/ท่อพีพีอาร์ตราช้าง' },
      { name: 'ท่อ PP-R Poloplast', slug: '/pp-r-pp-rct-poloplast' },
      { name: 'ท่อ HDPE', slug: '/ท่อhdpe' },
      { name: 'ท่อ UPVC', slug: '/ท่อ-upvc' },
      { name: 'ท่อ Syler', slug: '/ท่อไซเลอร์' },
      { name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc' },
      { name: 'ท่อ XYLENT', slug: '/ท่อระบายน้ำ-3-ชั้น-ไซเลนท' },
    ]
  },
  { 
    name: 'เครื่องเชื่อมท่อ', 
    slug: '/เครื่องเชื่อมท่อ-pipe-coupling-machine',
    subcategories: [
      { name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' },
      { name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา' },
      { name: 'กรู๊ฟท่อ', slug: '/groove-coupling' },
      { name: 'Pipe Coupling', slug: '/pipe-coupling' },
      { name: 'Dukelarrsen', slug: '/dukelarrsen' },
      { name: 'เม็กกรู๊ฟ', slug: '/เม็กกรู๊ฟ-คับปลิ้ง' },
    ]
  },
  { 
    name: 'ระบบน้ำ', 
    slug: '/ระบบน้ำ',
    subcategories: [
      { name: 'วาล์ว', slug: '/วาล์ว-valve' },
      { name: 'ปั๊มน้ำ', slug: '/water-pump' },
      { name: 'ระบบกรองน้ำ', slug: '/water-treatment' },
    ]
  },
  { 
    name: 'อุปกรณ์ปรับอากาศ', 
    slug: '/อุปกรณ์ปรับอากาศ',
    subcategories: [
      { name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet' },
      { name: 'กริลแอร์', slug: '/grilles' },
      { name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs' },
    ]
  },
  { 
    name: 'อุปกรณ์ดับเพลิง', 
    slug: '/อุปกรณ์ดับเพลิง-category',
    subcategories: [
      { name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง' },
      { name: 'Realflex', slug: '/realflex' },
    ]
  },
  { 
    name: 'ฉนวนหุ้มท่อ', 
    slug: '/ฉนวนหุ้มท่อ-category',
    subcategories: [
      { name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation' },
      { name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak' },
    ]
  },
  { 
    name: 'ระบบรั้ว', 
    slug: '/ระบบรั้ว',
    subcategories: [
      { name: 'รั้วเทวดา', slug: '/รั้วเทวดา' },
      { name: 'ระบบรั้วไวน์แมน', slug: '/ระบบรั้วไวน์แมน-vineman-2' },
    ]
  },
];
---

<header id="header" class="navbar">
  <div class="container-custom">
    <div class="flex items-center justify-between h-20">
      <a href="/" class="flex items-center group">
        <img src="/images/logo/dealplustech-logo.png" alt="Deal Plus Tech" class="h-10 sm:h-14 w-auto transition-transform duration-300 group-hover:scale-105" width="200" height="56" loading="eager" fetchpriority="high" decoding="sync" />
      </a>
      
      <nav class="hidden lg:flex items-center space-x-1">
        <a href="/" class="nav-link">หน้าแรก</a>
        <a href="/about-us" class="nav-link">เกี่ยวกับเรา</a>
        
        <div class="relative group">
          <button class="nav-link 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-0 w-[720px] max-w-[90vw] bg-white rounded-2xl 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 z-50">
            <div class="grid grid-cols-4 gap-4 p-6">
              {categories.map(cat => (
                <div class="space-y-3">
                  <a href={cat.slug} class="block text-sm font-bold text-secondary-800 hover:text-accent-500 transition-colors">
                    {cat.name}
                  </a>
                  {cat.subcategories && (
                    <ul class="space-y-2">
                      {cat.subcategories.map(sub => (
                        <li>
                          <a href={sub.slug} class="block text-sm text-secondary-500 hover:text-accent-500 transition-colors">
                            {sub.name}
                          </a>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              ))}
            </div>
            <div class="border-t border-secondary-100 px-6 py-4 bg-secondary-50 rounded-b-2xl">
              <a href="/all-products" class="text-sm font-semibold text-accent-500 hover:text-accent-600 transition-colors">
                ดูสินค้าทั้งหมด →
              </a>
            </div>
          </div>
        </div>
        
        <a href="/portfolio" class="nav-link">ผลงาน</a>
        <a href="/contact-us" class="nav-link">ติดต่อเรา</a>
      </nav>
      
      <div class="hidden lg:flex items-center space-x-4">
        <a href="tel:0905551415" class="flex items-center space-x-2 text-secondary-700 hover:text-accent-500 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>
      
      <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>
    
    <div id="mobile-menu" class="lg:hidden hidden pb-4">
      <nav class="flex flex-col space-y-2">
        <a href="/" class="mobile-nav-link">หน้าแรก</a>
        <a href="/about-us" class="mobile-nav-link">เกี่ยวกับเรา</a>
        <a href="/ท่อพีพีอาร์" class="mobile-nav-link">สินค้าทั้งหมด</a>
        <a href="/portfolio" class="mobile-nav-link">ผลงาน</a>
        <a href="/contact-us" class="mobile-nav-link">ติดต่อเรา</a>
      </nav>
    </div>
  </div>
</header>

<style>
  .nav-link {
    @apply px-4 py-2 text-base font-medium text-secondary-700 hover:text-accent-500 transition-all duration-200 relative;
  }

  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    @apply bg-accent-500;
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
  }

  .nav-link:hover::after {
    width: 60%;
  }

  .mobile-nav-link {
    @apply px-4 py-3 text-base font-medium text-secondary-700 hover:bg-secondary-100 hover:text-accent-500 rounded-lg transition-colors;
  }
</style>

<script>
  const menuBtn = document.getElementById('mobile-menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  const header = document.getElementById('header');
  
  menuBtn?.addEventListener('click', () => {
    mobileMenu?.classList.toggle('hidden');
  });
  
  let lastScroll = 0;
  const handleScroll = () => {
    const currentScroll = window.scrollY;
    
    if (currentScroll > 50) {
      header?.classList.add('navbar-scrolled');
    } else {
      header?.classList.remove('navbar-scrolled');
    }
    
    lastScroll = currentScroll;
  };
  
  let ticking = false;
  window.addEventListener('scroll', () => {
    if (!ticking) {
      window.requestAnimationFrame(() => {
        handleScroll();
        ticking = false;
      });
      ticking = true;
    }
  }, { passive: true });
  
  handleScroll();
</script>
