/* Nav.jsx — top navigation bar (logo + section links + venture credit) */

function Nav({ active = "research", onNavigate = () => {} }) {
  const [hoveredItem, setHoveredItem] = React.useState(null);
  const [hoveredBrand, setHoveredBrand] = React.useState(null);
  const items = [
    { key: "about", scrollTo: "manifesto" },
    { key: "research", scrollTo: "research" },
    { key: "contact", scrollTo: "contact" },
  ];

  const onClick = (it) => (e) => {
    if (it.scrollTo) {
      e.preventDefault();
      const el = document.getElementById(it.scrollTo);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }
    onNavigate(it.key);
  };

  return (
    <nav style={{
      position: "absolute", top: 0, left: 0, right: 0, padding: "28px 56px",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      zIndex: 20,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <MountainMark size={42} strokeWidth={1.6} />
        <Wordmark size={22} />
      </div>
      <div style={{ display: "flex", gap: 36, fontFamily: "var(--title)", fontSize: 11,
                    letterSpacing: "0.24em", textTransform: "uppercase" }}>
        {items.map((it) => {
          const hasTarget = !!it.scrollTo;
          const isHovered = hoveredItem === it.key;
          return (
            <a key={it.key}
               href={it.scrollTo ? `#${it.scrollTo}` : undefined}
               onClick={onClick(it)}
               onMouseEnter={() => setHoveredItem(it.key)}
               onMouseLeave={() => setHoveredItem(null)}
               style={{ background: "transparent", border: 0, padding: 0,
                        cursor: hasTarget ? "pointer" : "default",
                        textDecoration: "none",
                        color: isHovered ? "var(--terra-deep)" : "var(--ink-dim)",
                        borderBottom: isHovered ? "1px solid var(--terra-deep)" : "1px solid transparent",
                        paddingBottom: 4, transition: "color .15s, border-color .15s" }}>
              {it.key}
            </a>
          );
        })}
      </div>
      <div style={{ fontFamily: "var(--title)", fontSize: 10, letterSpacing: "0.24em",
                    color: "var(--ink-dim)", textTransform: "uppercase", textAlign: "right",
                    cursor: "pointer" }}>
        <a href="https://pol.finance/" target="_blank" rel="noopener noreferrer"
           onMouseEnter={() => setHoveredBrand("pol")}
           onMouseLeave={() => setHoveredBrand(null)}
           style={{ color: hoveredBrand === "pol" ? "var(--terra-deep)" : "var(--ink-dim)",
                    transition: "color .15s",
                    display: "inline-block",
                    padding: "2px 0" }}>Pol Finance</a>
        <span> × </span>
        <a href="https://alignedlayer.com/" target="_blank" rel="noopener noreferrer"
           onMouseEnter={() => setHoveredBrand("aligned")}
           onMouseLeave={() => setHoveredBrand(null)}
           style={{ color: hoveredBrand === "aligned" ? "var(--terra-deep)" : "var(--ink-dim)",
                    transition: "color .15s",
                    display: "inline-block",
                    padding: "2px 0" }}>Aligned</a>
        <br />
        <span style={{ color: "var(--ink-faint)" }}>MMXXVI</span>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });