// Nav.jsx — top navigation
function Nav({ active, onNavigate }) {
  const items = [
    { id: "charter", label: "Charter" },
    { id: "accreditation", label: "Accreditation" },
    { id: "members", label: "Members" },
    { id: "benchmarks", label: "Benchmarks" },
    { id: "press", label: "Press" },
  ];
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a className="nav-brand" href="#" onClick={(e) => { e.preventDefault(); onNavigate("home"); }}>
          <img className="nav-brand-mark" src="assets/seal-ink.svg" alt="" />
          <span className="nav-brand-text">Open IP Council</span>
          <span className="nav-brand-sep" aria-hidden="true"></span>
          <span className="nav-brand-meta">
            <span className="nav-brand-dot" aria-hidden="true"></span>
            v0.1 · pre-formation
          </span>
        </a>
        <nav className="nav-links">
          {items.map((it) => (
            <a key={it.id} className="nav-link" data-active={active === it.id}
               onClick={(e) => { e.preventDefault(); onNavigate(it.id); }}>{it.label}</a>
          ))}
          <a className="nav-cta" onClick={(e) => { e.preventDefault(); onNavigate("accreditation"); }}>Apply <span aria-hidden="true">→</span></a>
        </nav>
      </div>
    </header>
  );
}
window.Nav = Nav;