// Shared top navigation — sticky, light, with mobile hamburger.
// Ported from the rcv.vc Nav pattern and re-pointed at the Renewal Funds pages.
function Nav({ active = "" }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    { label: "Portfolio", href: "portfolio.html" },
    { label: "About",     href: "about.html" },
    { label: "Team",      href: "team.html" },
  ];
  const ink = "#333333";
  const green = "#4c721d";
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 20,
      background: "rgba(255,255,255,0.92)",
      backdropFilter: "saturate(140%) blur(8px)",
      WebkitBackdropFilter: "saturate(140%) blur(8px)",
      color: ink,
      borderBottom: "1px solid #DDE6D8",
      padding: "16px 48px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
    }}>
      <a href="index.html" style={{ display: "flex", alignItems: "center", textDecoration: "none" }} aria-label="Renewal Funds home">
        <img src="assets/renewal-logo.png" alt="Renewal Funds" style={{ height: 40, width: "auto", display: "block" }} />
      </a>

      <nav className={"site-nav" + (open ? " nav-open" : "")} style={{
        display: "flex", alignItems: "center", gap: 30,
        fontSize: 14.5, fontWeight: 600, letterSpacing: "-0.01em",
      }}>
        {items.map(item => (
          <a key={item.label} href={item.href} style={{
            color: item.label === active ? green : ink,
            textDecoration: "none",
            paddingBottom: 3,
            borderBottom: item.label === active ? ("2px solid " + green) : "2px solid transparent",
          }}>{item.label}</a>
        ))}
      </nav>

      <button className="nav-toggle" aria-label="Menu" aria-expanded={open}
        onClick={() => setOpen(!open)}
        style={{
          background: "transparent", color: ink, border: "1px solid #DDE6D8",
          width: 40, height: 40, padding: 0, cursor: "pointer", borderRadius: 4,
          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>

      <style>{`
        @media (max-width: 760px) {
          header nav.site-nav.nav-open {
            position: absolute; top: 100%; left: 0; right: 0;
            flex-direction: column; align-items: flex-start;
            background: #fff; border-bottom: 1px solid #DDE6D8;
            padding: 18px 24px 24px; gap: 18px;
          }
        }
      `}</style>
    </header>
  );
}
window.Nav = Nav;