function Header() {
  const links = [
    { label: "Reports", href: "#coverage" },
    { label: "Methodology", href: "#methodology" },
    { label: "Coverage", href: "#coverage" },
    { label: "About", href: "#about" },
  ];
  const [open, setOpen] = useState(false);

  return (
    <header style={{
      background: PALETTE.navy,
      borderBottom: `1px solid ${PALETTE.ruleInverse}`,
      position: "sticky", top: 0, zIndex: 50,
    }}>
      <div style={{
        maxWidth: 1200, margin: "0 auto", height: 64, padding: "0 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }} className="vst-section">
        <div style={{ display: "flex", alignItems: "center", gap: 36 }}>
          <Logo inverse size={22}/>
          <nav style={{ display: "flex", gap: 24 }} className="vst-hide-mobile" aria-label="Primary">
            {links.map(l => (
              <a key={l.label} href={l.href} style={{
                fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 500,
                textDecoration: "none", color: "rgba(250,249,245,.72)",
                transition: "color 120ms",
              }}
              onMouseEnter={e => e.currentTarget.style.color = PALETTE.paper}
              onMouseLeave={e => e.currentTarget.style.color = "rgba(250,249,245,.72)"}
              >{l.label}</a>
            ))}
          </nav>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }} className="vst-hide-mobile">
          <a href="#" style={{
            fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 500,
            color: "rgba(250,249,245,.72)", textDecoration: "none",
          }}>Sign in</a>
          <button
            onClick={() => { document.getElementById("featured")?.scrollIntoView({ behavior: "smooth", block: "start" }); }}
            style={{
              background: PALETTE.amber, color: PALETTE.paper, border: 0, borderRadius: 4,
              padding: "8px 16px", fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 600,
              cursor: "pointer",
            }}
            className="vst-btn-primary"
          >Get Access</button>
        </div>
        <button
          onClick={() => setOpen(!open)}
          aria-label="Menu"
          style={{
            background: "transparent", border: 0, color: PALETTE.paper, padding: 6,
            cursor: "pointer", display: "none",
          }}
          className="vst-mobile-menu"
        >
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
        </button>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .vst-mobile-menu { display: block !important; }
        }
      `}</style>
    </header>
  );
}

window.Header = Header;