---
const navLinks = [
  { href: '/', label: 'Home' },
  { href: '/sneakers', label: 'Sneakers' },
  { href: '/merken', label: 'Merken' },
  { href: '/deals', label: 'Deals' },
];
---

<header class="sticky top-0 z-40 border-b border-border/50 bg-bg/80 backdrop-blur-xl">
  <nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6" aria-label="Hoofdnavigatie">
    <!-- Logo -->
    <a href="/" class="flex items-center gap-1 text-2xl font-black tracking-tight" aria-label="SneakerPicks home">
      <img src="/logo.svg" alt="SneakerPicks" class="hidden h-14 w-auto dark:block" />
      <img src="/logo-light.svg" alt="SneakerPicks" class="block h-14 w-auto dark:hidden" />
    </a>

    <!-- Desktop Nav -->
    <div class="hidden items-center gap-8 md:flex">
      {navLinks.map(link => (
        <a href={link.href} class="text-sm font-semibold uppercase tracking-widest text-text-secondary transition-colors hover:text-accent">
          {link.label}
        </a>
      ))}
    </div>

    <!-- Right side -->
    <div class="flex items-center gap-3">
      <!-- Theme toggle -->
      <button
        id="theme-toggle"
        class="rounded-full p-2 text-text-secondary transition-colors hover:bg-bg-elevated hover:text-text"
        aria-label="Wissel thema"
      >
        <svg class="dark-icon h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
        <svg class="light-icon hidden h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
      </button>

      <!-- Mobile menu button -->
      <button
        id="mobile-menu-btn"
        class="rounded-lg p-2 text-text-secondary transition-colors hover:bg-bg-elevated md:hidden"
        aria-label="Menu openen"
        aria-expanded="false"
      >
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </nav>

  <!-- Mobile menu -->
  <div id="mobile-menu" class="hidden border-t border-border/50 bg-bg/95 backdrop-blur-xl md:hidden">
    <div class="space-y-1 px-4 py-4">
      {navLinks.map(link => (
        <a href={link.href} class="block rounded-lg px-3 py-2.5 text-sm font-semibold uppercase tracking-widest text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent">
          {link.label}
        </a>
      ))}
    </div>
  </div>
</header>

<script>
  // Theme toggle
  const toggle = document.getElementById('theme-toggle');
  const darkIcon = toggle?.querySelector('.dark-icon');
  const lightIcon = toggle?.querySelector('.light-icon');

  function updateIcons() {
    const isLight = document.documentElement.classList.contains('light');
    darkIcon?.classList.toggle('hidden', isLight);
    lightIcon?.classList.toggle('hidden', !isLight);
  }

  // Logo swap is handled by CSS dark: classes
  updateIcons();

  toggle?.addEventListener('click', () => {
    const isLight = document.documentElement.classList.toggle('light');
    document.documentElement.classList.toggle('dark', !isLight);
    localStorage.setItem('theme', isLight ? 'light' : 'dark');
    updateIcons();
  });

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