---
import AccountIcon from './AccountIcon';
import SizePicker from './SizePicker';

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

<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-3 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-white.svg" alt="SneakerPicks" class="logo-dark h-5 w-auto sm:h-6 lg:h-7" width="134" height="20" />
      <img src="/logo.svg" alt="SneakerPicks" class="logo-light h-5 w-auto sm:h-6 lg:h-7" width="134" height="20" />
    </a>

    <!-- Desktop Nav -->
    <div class="hidden items-center gap-8 md:flex">
      {navLinks.map(link => (
        link.label === 'Sneakers' ? (
          <div class="group relative">
            <a href={link.href} class="text-sm font-semibold uppercase tracking-widest text-text-secondary transition-colors hover:text-accent">
              {link.label}
              <svg class="ml-1 inline-block h-3 w-3 transition-transform group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
            </a>
            <div class="invisible absolute left-1/2 top-full z-50 w-52 -translate-x-1/2 pt-3 opacity-0 transition-all group-hover:visible group-hover:opacity-100">
              <div class="rounded-xl border border-border/50 bg-bg-elevated p-2 shadow-xl">
                <a href="/sneakers" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-card hover:text-accent">Alle Sneakers</a>
                <a href="/sneakers/heren" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-card hover:text-accent">Heren</a>
                <a href="/sneakers/dames" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-card hover:text-accent">Dames</a>
                <a href="/releases" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-card hover:text-accent">Nieuw binnen</a>
                <a href="/deals" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-card hover:text-accent">Deals</a>
                <div class="my-1 border-t border-border/50"></div>
                <a href="/sneakers/onder-100" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-card hover:text-accent">Onder &euro;100</a>
                <a href="/sneakers/onder-150" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-card hover:text-accent">Onder &euro;150</a>
                <a href="/sneakers/onder-200" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-card hover:text-accent">Onder &euro;200</a>
              </div>
            </div>
          </div>
        ) : (
          <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-1 sm:gap-3">
      <!-- Size picker -->
      <SizePicker client:idle />

      <!-- Watchlist icon -->
      <AccountIcon client:idle />

      <!-- Search icon -->
      <button
        id="search-btn"
        class="rounded-full p-2 text-text-secondary transition-colors hover:bg-bg-elevated hover:text-text"
        aria-label="Zoeken"
        title="Zoeken (/ om te openen)"
      >
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </button>

      <!-- 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"
        title="Wissel tussen donker en licht"
      >
        <!-- Sun icon: shown in dark mode, click to go light -->
        <svg id="icon-sun" class="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>
        <!-- Moon icon: shown in light mode, click to go dark -->
        <svg id="icon-moon" class="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 => (
        link.label === 'Sneakers' ? (
          <div>
            <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 class="ml-4 space-y-0.5 border-l border-border/50 pl-3">
              <a href="/sneakers" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent">Alle Sneakers</a>
              <a href="/sneakers/heren" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent">Heren</a>
              <a href="/sneakers/dames" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent">Dames</a>
              <a href="/releases" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent">Nieuw binnen</a>
              <a href="/deals" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent">Deals</a>
              <div class="my-1 border-t border-border/30 ml-3 mr-3"></div>
              <a href="/sneakers/onder-100" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent">Onder &euro;100</a>
              <a href="/sneakers/onder-150" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent">Onder &euro;150</a>
              <a href="/sneakers/onder-200" class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent">Onder &euro;200</a>
            </div>
          </div>
        ) : (
          <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 class="border-t border-border/50 pt-3 mt-2">
        <span class="block px-3 pb-2 text-xs font-bold uppercase tracking-widest text-text-muted">Jouw maat</span>
        <div class="px-3">
          <SizePicker client:idle />
        </div>
      </div>
    </div>
  </div>
</header>

<script>
  // Theme toggle
  const toggle = document.getElementById('theme-toggle');
  const sunIcon = document.getElementById('icon-sun');
  const moonIcon = document.getElementById('icon-moon');

  function updateIcons() {
    const isLight = document.documentElement.classList.contains('light');
    // In dark mode: show sun (click to switch to light)
    // In light mode: show moon (click to switch to dark)
    sunIcon?.classList.toggle('hidden', isLight);
    moonIcon?.classList.toggle('hidden', !isLight);
  }

  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));
  });

  // Search button
  const searchBtn = document.getElementById('search-btn');
  searchBtn?.addEventListener('click', () => {
    document.dispatchEvent(new CustomEvent('open-search-modal'));
  });
</script>