---
// TODO(assets): replace favicon "K" + text wordmark with the real PCBJam logo (§4b.1).
// TODO(links): add "Roadmap" → /roadmap and repoint How-it-works/Open to their own
//   pages once the supporting pages ship; for now they anchor to landing sections.
const links = [
  { href: '/#how-it-works', label: 'How it works' },
  { href: '/#open', label: 'Open & yours' },
  { href: '/pricing', label: 'Pricing' },
  { href: '/blog', label: 'Blog' },
  {
    href: 'https://emergence-engineering.com',
    label: 'Built by Emergence Engineering',
    external: true,
  },
  // Highlighted (accent) link to the public editor demo. A compact text link, not
  // a button — the header container caps at 1024px and a second button overflows it.
  { href: 'https://demo.pcbjam.com', label: 'Live demo', external: true, highlight: true },
];

const path = Astro.url.pathname;
const isActive = (href: string, external?: boolean) =>
  external || href.startsWith('/#') ? false : href === '/' ? path === '/' : path.startsWith(href);
---

<header class="site-header" transition:persist>
  <div class="container bar">
    <a class="brand" href="/">
      <img src="/favicon.svg" alt="" width="20" height="28" />
      <span class="brand-name">PCBJam</span>
      <span class="brand-chip">built on KiCad</span>
    </a>

    <input type="checkbox" id="nav-toggle" class="nav-toggle sr-only" />
    <label class="hamburger" for="nav-toggle" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>

    <nav class="nav" aria-label="Primary">
      {
        links.map((l) => (
          <a
            href={l.href}
            class:list={[{ 'nav-cta': l.highlight }]}
            aria-current={isActive(l.href, l.external) ? 'page' : undefined}
            rel={l.external ? 'noopener' : undefined}
            target={l.external ? '_blank' : undefined}
          >
            {l.label}
          </a>
        ))
      }
      <a class="btn btn-primary cta-join" href="/#waitlist">Join the waitlist</a>
    </nav>
  </div>
</header>

<style>
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-soft) 92%, transparent);
    backdrop-filter: blur(8px);
  }
  .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.75rem;
  }
  .brand {
    font-weight: 700;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .brand img {
    height: 1.85rem;
    width: auto;
  }
  .brand-chip {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--fg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
  }
  .nav {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .nav > a {
    color: var(--fg-muted);
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .nav > a:hover {
    color: var(--fg);
    text-decoration: none;
  }
  .nav > a[aria-current='page'] {
    color: var(--fg);
  }
  /* Highlighted demo link — accent-colored so it stands out among the neutral
     nav links without needing a second button (which would overflow the bar). */
  .nav > a.nav-cta {
    color: var(--accent);
    font-weight: 600;
  }
  .nav > a.nav-cta:hover {
    filter: brightness(1.1);
  }
  .cta-join {
    padding-block: 0.5rem;
    font-size: 0.95rem;
  }
  /* `.nav > a` (higher specificity than .btn-primary) sets the muted link color;
     re-assert the button's white text — dark-on-blue otherwise. */
  .nav > a.cta-join,
  .nav > a.cta-join:hover {
    color: #fff;
  }

  /* Mobile menu (CSS-only via checkbox toggle). */
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 0.4rem;
    cursor: pointer;
  }
  .hamburger span {
    width: 22px;
    height: 2px;
    background: var(--fg);
    border-radius: 2px;
  }

  /* Collapse to the hamburger menu once the full one-line nav no longer fits the
     1024px-capped bar (the demo link, then the Pricing link, pushed the crowded
     desktop nav past the point where it stays on a single row). */
  @media (max-width: 1120px) {
    .brand-chip {
      display: none;
    }
    .hamburger {
      display: flex;
    }
    .nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--bg-soft);
      border-bottom: 1px solid var(--border);
      padding: 0.5rem 1.25rem 1rem;
      display: none;
    }
    .nav-toggle:checked ~ .nav {
      display: flex;
    }
    .nav > a {
      padding-block: 0.6rem;
      border-bottom: 1px solid var(--border);
    }
    .cta-join {
      margin-top: 0.75rem;
      text-align: center;
    }
  }
</style>

<script>
  // ClientRouter persists the header (transition:persist). Two jobs:
  //  1. Reset the mobile menu toggle after every navigation (was already here).
  //  2. Close the menu when ANY nav link is tapped — including same-page anchor
  //     links (How it works / Open & yours / Join the waitlist) that scroll but
  //     don't navigate, so astro:page-load never fires for them and the CSS-only
  //     checkbox would otherwise stay checked (menu stuck open).
  function initMobileNav() {
    const toggle = document.getElementById('nav-toggle') as HTMLInputElement | null;
    if (!toggle) return;
    toggle.checked = false;

    const nav = document.querySelector<HTMLElement>('.nav');
    if (!nav || nav.dataset.bound === '1') return; // header persists — bind once
    nav.dataset.bound = '1';
    nav.addEventListener('click', (e) => {
      if ((e.target as HTMLElement).closest('a')) toggle.checked = false;
    });
  }
  document.addEventListener('astro:page-load', initMobileNav);
</script>
