function SiteHeader() {
  const [open, setOpen] = React.useState(false);

  const linkStyle = {
    fontFamily: "var(--font-display)",
    fontSize: 14, color: "var(--fg-2)",
    letterSpacing: "0.02em",
    cursor: "pointer",
    transition: "color 180ms var(--ease-out)",
  };
  const links = [
    ["Warmachine", "#warmachine"],
    ["Product", "#showcase"],
    ["Developers", "#studio"],
    ["Investors", "#investors"],
  ];
  const navItem = ([label, href]) => (
    <a key={label} href={href} style={linkStyle}
       onMouseEnter={(e)=>e.currentTarget.style.color="var(--fg-1)"}
       onMouseLeave={(e)=>e.currentTarget.style.color="var(--fg-2)"}>{label}</a>
  );

  return (
    <header className="ps-header" style={{
      position: "sticky", top: 12, zIndex: 50,
      margin: "12px auto 0", maxWidth: 1240,
      padding: "8px 12px 8px 14px",
      display: "flex", alignItems: "center", gap: 28,
      background: "rgba(17,19,26,0.62)",
      backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
      border: "1px solid rgba(255,255,255,0.06)",
      borderRadius: 999,
      boxShadow: "0 12px 40px rgba(0,0,0,0.55)",
    }}>
      <a href="#top" style={{ display: "flex", alignItems: "center" }}>
        <img src="assets/playseer-logo-square.png" alt="Playseer Labs"
             style={{ height: 56, width: "auto", objectFit: "contain",
                      filter: "drop-shadow(0 0 14px rgba(138,63,252,0.40))" }} />
      </a>

      <nav className="ps-nav-desktop" style={{ display: "flex", gap: 26, marginLeft: 10 }}>
        {links.map(navItem)}
      </nav>

      <div style={{ marginLeft: "auto", display: "flex", gap: 10, alignItems: "center" }}>
        <a href="#signup" className="ps-nav-desktop" style={{
          fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 500,
          letterSpacing: "0.04em", padding: "10px 18px", borderRadius: 999,
          color: "#0A0C14", cursor: "pointer", display: "inline-block",
          background: "var(--ps-gradient)",
          boxShadow: "0 0 22px rgba(138,63,252,0.45)",
        }}>Request access</a>

        {/* Hamburger — only visible on narrow screens (CSS) */}
        <button type="button" className="ps-burger"
                aria-label={open ? "Close menu" : "Open menu"}
                aria-expanded={open}
                onClick={()=>setOpen(!open)}>
          {open ? (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                 stroke="var(--fg-1)" strokeWidth="2" strokeLinecap="round">
              <path d="M6 6l12 12M18 6L6 18"/>
            </svg>
          ) : (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                 stroke="var(--fg-1)" strokeWidth="2" strokeLinecap="round">
              <path d="M4 7h16M4 12h16M4 17h16"/>
            </svg>
          )}
        </button>
      </div>

      {open && (
        <nav className="ps-mobile-menu" style={{
          position: "absolute", top: "calc(100% + 10px)", left: 4, right: 4,
          display: "grid", gap: 4, padding: 12,
          borderRadius: 22,
          background: "rgba(14,16,24,0.94)",
          backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
          border: "1px solid rgba(255,255,255,0.08)",
          boxShadow: "0 24px 64px rgba(0,0,0,0.6)",
          animation: "ps-reveal 260ms var(--ease-out) both",
        }}>
          {links.map(([label, href]) => (
            <a key={label} href={href} onClick={()=>setOpen(false)} style={{
              fontFamily: "var(--font-display)", fontSize: 16,
              color: "var(--fg-1)", padding: "14px 16px",
              borderRadius: 14,
            }}>{label}</a>
          ))}
          <a href="#signup" onClick={()=>setOpen(false)} style={{
            fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 500,
            letterSpacing: "0.04em", padding: "14px 16px", borderRadius: 999,
            color: "#0A0C14", textAlign: "center", marginTop: 6,
            background: "var(--ps-gradient)",
            boxShadow: "0 0 22px rgba(138,63,252,0.45)",
          }}>Request access</a>
        </nav>
      )}
    </header>
  );
}

window.SiteHeader = SiteHeader;