/* @jsx React.createElement */
/* Nav — uniform page-level links. SUPPORT lives only as the right-side CTA.
   `active` prop marks the current page: 'home' | 'doctrine' | 'episodes' | 'aars' | 'about'. */
function Nav({ onCmdK, active }) {
  const link = (id, label, href) => (
    <a
      key={id}
      className={"vc-nav__link" + (active === id ? " vc-nav__link--act" : "")}
      href={href}
    >
      {label}
    </a>
  );
  return (
    <header className="vc-nav">
      <div className="vc-nav__inner">
        <a className="vc-brand" href="index.html">
          <svg width="28" height="28" viewBox="0 0 64 64" fill="none" style={{color: 'var(--c-fg-1)'}}>
            <path d="M4 4 H20 M4 4 V20 M60 4 H44 M60 4 V20 M4 60 H20 M4 60 V44 M60 60 H44 M60 60 V44" stroke="currentColor" strokeWidth="2.5"/>
            <text x="32" y="42" textAnchor="middle" fontFamily="JetBrains Mono" fontWeight="500" fontSize="22" fill="currentColor">C2</text>
          </svg>
          <span className="vc-brand__name">VOLUNTEER&nbsp;C2</span>
          <span className="vc-brand__div" />
          <span className="vc-brand__sub">CMD &amp; CONTROL</span>
        </a>
        <nav className="vc-nav__links">
          {link('home',     'HOME',      'index.html')}
          {link('doctrine', 'DOCTRINE',  'doctrine.html')}
          {link('episodes', 'EPISODES',  'episodes.html')}
          {link('aars',     'AARS',      'aars.html')}
          {link('about',    'ABOUT',     'about.html')}
        </nav>
        <div style={{flex:1}} />
        <div className="vc-nav__right">
          <span className="vc-nav__callsign">VC2&nbsp;&middot;&nbsp;EST.&nbsp;2026</span>
          <button className="vc-nav__kbd" onClick={onCmdK} title="Command palette"><kbd>⌘</kbd><kbd>K</kbd></button>
          <a className="vc-cta" href="https://www.patreon.com/cw/VolunteerC2" target="_blank" rel="noopener">SUPPORT&nbsp;ON&nbsp;PATREON&nbsp;→</a>
        </div>
      </div>
    </header>
  );
}
window.Nav = Nav;