// Header — Blueprint Navy band with stacked GLOBAL JUSTICE FOUNDATIONS lockup
function Header({ active = "Home" }) {
  const links = [
    { label: "Manifesto", href: "manifesto.html" },
    { label: "Foundational Elements", href: "foundations.html" },
    { label: "The Pillars", href: "pillars.html" },
    { label: "Our Work", href: "our-work.html" },
    { label: "Resources", href: "resources.html" },
    { label: "News", href: "news.html" },
    { label: "About", href: "about.html" },
  ];
  return (
    <header className="gjf-nav">
      <a href="index.html" className="gjf-brand" aria-label="Global Justice Foundations — home">
        <img src="assets/Global_Justice_Logo.png" alt="" className="gjf-brand-mark" />
        <span className="gjf-brand-text">
          <span className="gjf-brand-main">GLOBAL JUSTICE</span>
          <span className="gjf-brand-sub">FOUNDATIONS</span>
        </span>
      </a>
      <nav className="gjf-nav-links" aria-label="Primary">
        {links.map((l) => (
          <a key={l.label} href={l.href}
             className={active === l.label ? "is-active" : ""}>
            {l.label}
          </a>
        ))}
      </nav>
      <a href="get-involved.html" className="gjf-btn gjf-btn-gold-outline">Get Involved</a>
      <a href="search.html" className="gjf-nav-search" aria-label="Search">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6">
          <circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path>
        </svg>
      </a>
    </header>
  );
}
window.GJF_Header = Header;