// Production Nav — multi-page links, mobile hamburger.
function Nav({ variant = "light", active = "Home" }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    { label: "Home", href: "index.html" },
    { label: "About", href: "about.html" },
    { label: "Portfolio", href: "portfolio.html" },
    { label: "Contact", href: "contact.html" },
  ];
  const dark = variant === "dark";
  const bg = dark ? "#213A2C" : "#FFFFFF";
  const fg = dark ? "#FFFFFF" : "#213A2C";
  const accentFg = dark ? "#CDF6B0" : "#213A2C";
  const border = dark ? "rgba(255,255,255,0.12)" : "#DFE9E9";
  const logoSrc = dark
    ? "assets/logo-primary-reverse-accent.svg"
    : "assets/logo-primary-main.svg";
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 10,
      background: bg, color: fg,
      borderBottom: `1px solid ${border}`,
      padding: "20px 48px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
    }}>
      <a href="index.html" style={{ display: "flex", alignItems: "center", textDecoration: "none" }} aria-label="RCV home">
        <img src={logoSrc} alt="Renewal Climate Ventures" style={{ height: 56, width: "auto" }} />
      </a>
      <nav className={open ? "nav-open" : ""} style={{ display: "flex", gap: 32, fontSize: 14, fontWeight: 500, letterSpacing: "-0.01em", background: bg }}>
        {items.map(item => (
          <a key={item.label} href={item.href} style={{
            color: item.label === active ? accentFg : fg,
            textDecoration: item.label === active ? "underline" : "none",
            textUnderlineOffset: "0.4em",
            textDecorationThickness: 1.5,
          }}>{item.label}</a>
        ))}
      </nav>
      <a href="contact.html" className="nav-cta" style={{
        background: dark ? "#CDF6B0" : "#213A2C",
        color: dark ? "#213A2C" : "#FFFFFF",
        border: 0, padding: "10px 18px",
        font: "500 13px 'Plus Jakarta Sans', sans-serif",
        letterSpacing: "-0.01em", cursor: "pointer", borderRadius: 2,
        textDecoration: "none",
      }}>Contact →</a>
      <button className="nav-toggle" aria-label="Menu" aria-expanded={open}
        onClick={() => setOpen(!open)}
        style={{
          background: "transparent", color: fg, border: "1px solid " + border,
          width: 40, height: 40, padding: 0, cursor: "pointer", borderRadius: 2,
          alignItems: "center", justifyContent: "center",
        }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          {open
            ? <path d="M6 6 L18 18 M18 6 L6 18" />
            : <React.Fragment><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></React.Fragment>}
        </svg>
      </button>
    </header>
  );
}
window.Nav = Nav;