---
const navLinks = [
  { label: 'Features', href: '/iptvnator/#features' },
  { label: 'Screenshots', href: '/iptvnator/#screenshots' },
  { label: 'Download', href: '/iptvnator/#download' },
  { label: 'Blog', href: '/iptvnator/blog/' },
];
---

<header
  id="site-header"
  class="fixed top-0 z-50 w-full transition-all duration-500"
>
  <div class="absolute inset-0 border-b border-surface-700/0 bg-surface-950/0 backdrop-blur-none transition-all duration-500" id="header-bg"></div>

  <nav class="relative mx-auto flex max-w-6xl items-center justify-between px-6 py-5">
    <!-- Logo -->
    <a href="/iptvnator/" class="flex items-center gap-3 group">
      <img
        src="/iptvnator/favicon.ico"
        alt="IPTVnator logo"
        class="h-7 w-7 transition-transform duration-300 group-hover:scale-110"
      />
      <span class="font-display text-xl font-semibold tracking-tight text-surface-50">
        IPTVnator
      </span>
    </a>

    <!-- Desktop nav -->
    <div class="hidden items-center gap-8 md:flex">
      {
        navLinks.map((link) => (
          <a
            href={link.href}
            class="text-[13px] font-medium uppercase tracking-[0.12em] text-surface-400 transition-colors duration-200 hover:text-accent-400"
          >
            {link.label}
          </a>
        ))
      }
    </div>

    <!-- Right side actions -->
    <div class="hidden items-center gap-4 md:flex">
      <a
        href="https://github.com/4gray/iptvnator"
        target="_blank"
        rel="noopener noreferrer"
        class="text-surface-500 transition-colors hover:text-surface-200"
        aria-label="GitHub"
      >
        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
        </svg>
      </a>
      <a
        href="https://github.com/4gray/iptvnator/releases/latest"
        class="rounded-lg border border-accent-500/30 bg-accent-500/10 px-4 py-2 text-[13px] font-medium text-accent-400 transition-all duration-200 hover:border-accent-400/50 hover:bg-accent-500/20 hover:text-accent-300"
      >
        Download
      </a>
    </div>

    <!-- Mobile menu button -->
    <button
      id="mobile-menu-btn"
      class="inline-flex items-center justify-center rounded-lg p-2 text-surface-400 transition-colors hover:text-surface-100 md:hidden"
      aria-label="Toggle menu"
    >
      <svg id="menu-icon-open" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
      <svg id="menu-icon-close" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </nav>

  <!-- Mobile menu -->
  <div
    id="mobile-menu"
    class="hidden border-t border-dashed border-surface-700/60 bg-surface-950/98 backdrop-blur-2xl md:hidden"
  >
    <div class="space-y-1 px-6 py-5">
      {
        navLinks.map((link) => (
          <a
            href={link.href}
            class="block rounded-lg px-3 py-2.5 text-[13px] font-medium uppercase tracking-[0.12em] text-surface-400 transition-colors hover:bg-surface-800/50 hover:text-accent-400"
          >
            {link.label}
          </a>
        ))
      }
      <div class="flex items-center gap-3 pt-3">
        <a
          href="https://github.com/4gray/iptvnator"
          target="_blank"
          rel="noopener noreferrer"
          class="flex items-center gap-2 rounded-lg px-3 py-2.5 text-[13px] font-medium text-surface-400 transition-colors hover:text-surface-200"
        >
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
          </svg>
          GitHub
        </a>
        <a
          href="https://github.com/4gray/iptvnator/releases/latest"
          class="flex-1 rounded-lg border border-accent-500/30 bg-accent-500/10 px-3 py-2.5 text-center text-[13px] font-medium text-accent-400 transition-all hover:border-accent-400/50 hover:bg-accent-500/20"
        >
          Download
        </a>
      </div>
    </div>
  </div>
</header>

<script>
  // Mobile menu toggle
  const btn = document.getElementById('mobile-menu-btn');
  const menu = document.getElementById('mobile-menu');
  const iconOpen = document.getElementById('menu-icon-open');
  const iconClose = document.getElementById('menu-icon-close');

  btn?.addEventListener('click', () => {
    const isHidden = menu?.classList.toggle('hidden');
    iconOpen?.classList.toggle('hidden', !isHidden);
    iconClose?.classList.toggle('hidden', isHidden);
  });

  // Header scroll effect
  const header = document.getElementById('site-header');
  const headerBg = document.getElementById('header-bg');
  let lastScroll = 0;

  window.addEventListener('scroll', () => {
    const scroll = window.scrollY;
    if (scroll > 50) {
      headerBg?.classList.remove('border-surface-700/0', 'bg-surface-950/0', 'backdrop-blur-none');
      headerBg?.classList.add('border-surface-700/40', 'bg-surface-950/85', 'backdrop-blur-xl');
    } else {
      headerBg?.classList.add('border-surface-700/0', 'bg-surface-950/0', 'backdrop-blur-none');
      headerBg?.classList.remove('border-surface-700/40', 'bg-surface-950/85', 'backdrop-blur-xl');
    }
    lastScroll = scroll;
  });
</script>