---
/**
 * MOREMINIMORE - NAVIGATION COMPONENT (LIGHT THEME)
 * Light bg + dark text nav links + white logo banner
 */

const services = [
  { label: 'Website Development', href: '/services/webdev' },
  { label: 'Marketing Automation', href: '/services/marketing' },
  { label: 'AI Automation', href: '/services/automation' },
  { label: 'Tech Consult', href: '/services/ai-consult' },
];
---

<header class="nav" id="nav">
  <div class="nav-container container">
    <!-- Logo: white-bg banner with the black-text logo (works on light/yellow) -->
    <a href="/" class="nav-logo">
      <div class="logo-banner">
        <img src="/images/logo-long-black.png" alt="MoreminiMore" class="logo-img" />
      </div>
    </a>

    <!-- Desktop Navigation -->
    <nav class="nav-desktop">
      <a href="/" class="nav-link" data-magnetic>หน้าแรก</a>

      <!-- Services with Submenu -->
      <div class="nav-dropdown">
        <a href="/services" class="nav-link nav-dropdown-trigger" data-magnetic>
          บริการ
          <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </a>
        <div class="nav-dropdown-menu">
          {services.map(service => (
            <a href={service.href} class="dropdown-item">
              {service.label}
            </a>
          ))}
        </div>
      </div>

      <a href="/portfolio" class="nav-link" data-magnetic>ผลงาน</a>
      <a href="/blog" class="nav-link" data-magnetic>บทความ</a>
      <a href="/about" class="nav-link" data-magnetic>เกี่ยวกับเรา</a>
      <a href="/contact" class="nav-link nav-cta" data-magnetic>ติดต่อเรา</a>
    </nav>

    <!-- Mobile Menu Toggle (DARK icons on light bg) -->
    <button class="nav-toggle" id="nav-toggle" aria-label="Toggle menu">
      <span class="toggle-line"></span>
      <span class="toggle-line"></span>
      <span class="toggle-line"></span>
    </button>
  </div>

  <!-- Mobile Navigation Overlay (LIGHT bg) -->
  <div class="nav-mobile-overlay" id="nav-mobile">
    <nav class="nav-mobile-content">
      <a href="/" class="mobile-link">หน้าแรก</a>

      <!-- Mobile Services with Submenu -->
      <div class="mobile-dropdown">
        <button class="mobile-dropdown-trigger">
          บริการ
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </button>
        <div class="mobile-dropdown-content">
          {services.map(service => (
            <a href={service.href} class="mobile-link mobile-sublink">{service.label}</a>
          ))}
        </div>
      </div>

      <a href="/portfolio" class="mobile-link">ผลงาน</a>
      <a href="/blog" class="mobile-link">บทความ</a>
      <a href="/about" class="mobile-link">เกี่ยวกับเรา</a>
      <a href="/contact" class="mobile-link mobile-cta">ติดต่อเรา</a>
    </nav>
  </div>
</header>

<!-- Scroll Progress Bar (yellow) -->
<div class="scroll-progress" id="scroll-progress"></div>

<style>
  /* ============================================
     NAVIGATION BASE — LIGHT THEME
     ============================================ */

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    transition: all 0.3s var(--ease-out-expo);
  }

  .nav.scrolled {
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }

  /* ============================================
     CONTAINER
     ============================================ */

  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* ============================================
     LOGO BANNER
     ============================================ */

  .nav-logo {
    display: flex;
    align-items: center;
    z-index: 1001;
  }

  .logo-banner {
    background: var(--color-white);
    border-radius: 0 0 12px 12px;
    padding: 8px 16px;
    transition: all 0.3s ease;
  }

  .logo-banner:hover {
    transform: scale(1.02);
  }

  .nav.scrolled .logo-banner {
    border-radius: 0 0 8px 8px;
    padding: 6px 12px;
  }

  .logo-img {
    height: 36px;
    width: auto;
    display: block;
  }

  .nav.scrolled .logo-img {
    height: 28px;
  }

  /* ============================================
     DESKTOP NAVIGATION
     ============================================ */

  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nav-link {
    position: relative;
    padding: 12px 16px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-black);
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nav-link:hover,
  .nav-link.active {
    color: var(--color-primary-dark);
  }

  .nav-cta {
    background: var(--color-primary);
    color: var(--color-black) !important;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    margin-left: 16px;
    padding: 12px 24px;
    transition: all 0.3s var(--ease-out-expo);
  }

  .nav-cta:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(254, 212, 0, 0.3);
  }

  .nav-cta::after { display: none; }

  /* ============================================
     DROPDOWN — LIGHT CARD ON WHITE BG
     ============================================ */

  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown-trigger {
    cursor: pointer;
  }

  .dropdown-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }

  .nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
  }

  .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 220px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease-out-expo);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  }

  .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .dropdown-item {
    display: block;
    padding: 12px 24px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-700);
    transition: all 0.2s ease;
  }

  .dropdown-item:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary-dark);
  }

  /* ============================================
     MOBILE TOGGLE — DARK lines (since nav is light)
     ============================================ */

  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 10px;
  }

  .toggle-line {
    width: 24px;
    height: 2px;
    background: var(--color-black);
    border-radius: 2px;
    transition: all 0.3s var(--ease-out-expo);
  }

  .nav-toggle.active .toggle-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle.active .toggle-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
  }

  .nav-toggle.active .toggle-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* ============================================
     MOBILE OVERLAY — LIGHT THEME
     ============================================ */

  .nav-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--ease-out-expo);
    z-index: 999;
  }

  .nav-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .nav-mobile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px;
    width: 100%;
  }

  .mobile-link {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 14px 32px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    width: 100%;
    text-align: center;
  }

  .nav-mobile-overlay.active .mobile-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-mobile-overlay.active .mobile-link:nth-child(1) { transition-delay: 0.1s; }
  .nav-mobile-overlay.active .mobile-link:nth-child(2) { transition-delay: 0.15s; }
  .nav-mobile-overlay.active .mobile-link:nth-child(3) { transition-delay: 0.2s; }
  .nav-mobile-overlay.active .mobile-link:nth-child(4) { transition-delay: 0.25s; }
  .nav-mobile-overlay.active .mobile-link:nth-child(5) { transition-delay: 0.3s; }
  .nav-mobile-overlay.active .mobile-link:nth-child(6) { transition-delay: 0.35s; }

  .mobile-link:hover {
    color: var(--color-primary-dark);
    transform: translateX(10px);
  }

  .mobile-cta {
    background: var(--color-primary);
    color: var(--color-black) !important;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    margin-top: 20px;
  }

  /* ============================================
     MOBILE DROPDOWN
     ============================================ */

  .mobile-dropdown {
    width: 100%;
    text-align: center;
  }

  .mobile-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 32px;
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: color 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
  }

  .mobile-dropdown-trigger svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }

  .mobile-dropdown.open .mobile-dropdown-trigger {
    color: var(--color-primary-dark);
  }

  .mobile-dropdown.open .mobile-dropdown-trigger svg {
    transform: rotate(180deg);
  }

  .mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out-expo);
  }

  .mobile-dropdown.open .mobile-dropdown-content {
    max-height: 300px;
  }

  .mobile-sublink {
    font-size: 20px !important;
    padding: 10px 32px !important;
    opacity: 0.7;
  }

  .mobile-sublink:hover {
    opacity: 1;
  }

  /* ============================================
     SCROLL PROGRESS
     ============================================ */

  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), #ffe066);
    width: 0;
    z-index: 1001;
  }

  /* ============================================
     RESPONSIVE
     ============================================ */

  @media (max-width: 1024px) {
    .nav-desktop {
      display: none;
    }

    .nav-toggle {
      display: flex;
    }
  }

  @media (max-width: 640px) {
    .mobile-link {
      font-size: 24px;
      padding: 12px 24px;
    }
  }
</style>

<script>
  // Navigation scroll effect
  const nav = document.getElementById('nav');
  const toggle = document.getElementById('nav-toggle');
  const mobileNav = document.getElementById('nav-mobile');
  const scrollProgress = document.getElementById('scroll-progress');

  // Scroll effect
  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;

    if (scrollY > 80) {
      nav?.classList.add('scrolled');
    } else {
      nav?.classList.remove('scrolled');
    }

    // Scroll progress
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = (scrollY / docHeight) * 100;
    if (scrollProgress) {
      scrollProgress.style.width = `${progress}%`;
    }
  });

  // Mobile menu toggle
  toggle?.addEventListener('click', () => {
    toggle.classList.toggle('active');
    mobileNav?.classList.toggle('active');
    document.body.style.overflow = mobileNav?.classList.contains('active') ? 'hidden' : '';
  });

  // Mobile dropdown toggle
  document.querySelectorAll('.mobile-dropdown-trigger').forEach(btn => {
    btn.addEventListener('click', () => {
      btn.parentElement?.classList.toggle('open');
    });
  });

  // Close mobile nav on link click
  document.querySelectorAll('.nav-mobile-overlay .mobile-link').forEach(link => {
    link.addEventListener('click', () => {
      toggle?.classList.remove('active');
      mobileNav?.classList.remove('active');
      document.body.style.overflow = '';
    });
  });
</script>
