<script lang="ts">
  const links = [
    { href: '/', label: 'Home' },
    { href: '/tools', label: 'Tools' },
    { href: '/guides', label: 'Guides' }
  ];
  let open = false;
  const toggle = () => (open = !open);
  const close = () => (open = false);
  const year = new Date().getFullYear();
</script>

<header class="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-surface/50 border-b border-white/10">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex h-14 items-center justify-between">
      <a href="/" class="flex items-center gap-2">
        <span class="h-2 w-2 rounded-full bg-neon" style="box-shadow: 0 0 12px rgba(34,211,238,0.60);"></span>
        <span class="font-display text-lg tracking-widest">
          <span class="neon-text">PLEBSABER</span><span class="text-muted">.stream</span>
        </span>
      </a>

      <nav class="hidden md:flex items-center gap-6">
        {#each links as link}
          <a href={link.href} class="text-muted hover:text-white transition">{link.label}</a>
        {/each}
        <a href="/tools/beatleader-compare" class="btn-neon">Compare Players</a>
      </nav>

      <button class="md:hidden btn-neon px-3 py-1.5" on:click={toggle} aria-expanded={open} aria-controls="mobile-nav">
        Menu
      </button>
    </div>
  </div>

  {#if open}
    <div id="mobile-nav" class="md:hidden border-t border-white/10 bg-surface/80">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-3 grid gap-3">
        {#each links as link}
          <a href={link.href} on:click={close} class="text-muted hover:text-white transition">{link.label}</a>
        {/each}
        <a href="/tools/beatleader-compare" on:click={close} class="btn-neon w-max">Compare Players</a>
      </div>
    </div>
  {/if}
</header>


