---
import { SITE } from '../data/site';
import { isPro } from '../data/edition';

const base = import.meta.env.BASE_URL;
const currentPath = Astro.url.pathname;

const nav = [
  { label: 'Work', href: `${base}#work` },
  { label: 'Stories', href: `${base}stories/` },
  // Pro edition adds the Prints & Licensing page.
  ...(isPro ? [{ label: 'Prints', href: `${base}prints/` }] : []),
  { label: 'About', href: `${base}#about` },
  { label: 'Contact', href: `${base}#contact` },
];
---

<header
  class="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100"
  id="site-header"
>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-14">
      <!-- Wordmark -->
      <a
        href={base}
        class="font-bold text-ink text-sm tracking-tight hover:text-accent transition-colors"
        aria-label={`${SITE.name} — Home`}
      >
        {SITE.name}
      </a>

      <!-- Desktop nav -->
      <nav aria-label="Main navigation" class="hidden md:flex items-center gap-6">
        {nav.map((item) => (
          <a
            href={item.href}
            class="text-sm text-ink-secondary hover:text-ink transition-colors font-medium"
          >
            {item.label}
          </a>
        ))}
        <a
          href={`mailto:${SITE.email}`}
          class="text-sm bg-accent text-white px-4 py-1.5 rounded-full hover:bg-accent-dark transition-colors font-medium"
        >
          Build with me
        </a>
      </nav>

      <!-- Mobile menu button -->
      <button
        id="mobile-menu-btn"
        class="md:hidden p-2 text-ink-secondary hover:text-ink transition-colors"
        aria-label="Open navigation menu"
        aria-expanded="false"
        aria-controls="mobile-menu"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile menu -->
  <div
    id="mobile-menu"
    class="hidden md:hidden border-t border-gray-100 bg-white"
    role="navigation"
    aria-label="Mobile navigation"
  >
    <div class="px-4 py-3 flex flex-col gap-3">
      {nav.map((item) => (
        <a
          href={item.href}
          class="text-sm text-ink-secondary hover:text-ink transition-colors font-medium py-1"
        >
          {item.label}
        </a>
      ))}
      <a
        href={`mailto:${SITE.email}`}
        class="text-sm bg-accent text-white px-4 py-2 rounded-full hover:bg-accent-dark transition-colors font-medium text-center mt-1"
      >
        Build with me
      </a>
    </div>
  </div>
</header>

<script>
  const btn = document.getElementById('mobile-menu-btn');
  const menu = document.getElementById('mobile-menu');
  btn?.addEventListener('click', () => {
    const isOpen = !menu?.classList.contains('hidden');
    menu?.classList.toggle('hidden', isOpen);
    btn.setAttribute('aria-expanded', String(!isOpen));
    btn.setAttribute('aria-label', isOpen ? 'Open navigation menu' : 'Close navigation menu');
  });
</script>
