/* Sticky top nav — transparent over black, hairline + scroll-progress bar on scroll */
function Nav({ active, onNav }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [prog, setProg] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProg(h > 0 ? Math.min(1, window.scrollY / h) : 0);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header
      style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        transition: "background 240ms, border-color 240ms",
        background: scrolled ? "rgba(0,0,0,0.72)" : "transparent",
        backdropFilter: scrolled ? "blur(10px)" : "none",
        borderBottom: "1px solid " + (scrolled ? "var(--border-subtle)" : "transparent"),
      }}
    >
      <div className="wrap" style={{ height: 68, display: "flex", alignItems: "center", justifyContent: "space-between", maxWidth: "none", paddingLeft: "clamp(24px, 4vw, 76px)", paddingRight: "clamp(24px, 4vw, 76px)" }}>
        <button onClick={() => onNav("top")} style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 16, letterSpacing: ".01em", color: "var(--fg1)", display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ color: "var(--fg4)" }}>&lt;/&gt;</span>
          rishi<span style={{ color: "var(--fg4)" }}>.dv</span>
        </button>

        <nav style={{ display: "flex", alignItems: "center", gap: 26 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 26 }} className="nav-links">
            {window.NAV.map((item) => (
              <button
                key={item.id}
                onClick={() => onNav(item.id)}
                style={{
                  fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: ".04em",
                  color: active === item.id ? "var(--fg1)" : "var(--fg3)",
                  transition: "color 140ms", position: "relative", padding: "4px 0",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.color = "var(--fg1)")}
                onMouseLeave={(e) => (e.currentTarget.style.color = active === item.id ? "var(--fg1)" : "var(--fg3)")}
              >
                {item.label}
                <span style={{
                  position: "absolute", left: 0, right: 0, bottom: -2, height: 1,
                  background: "var(--fg1)", transform: active === item.id ? "scaleX(1)" : "scaleX(0)",
                  transformOrigin: "left", transition: "transform 240ms var(--ease-out)",
                }} />
              </button>
            ))}
          </div>
          <a className="btn-primary lk" style={{ padding: "9px 16px", fontSize: 13 }} href="#" onClick={(e) => { e.preventDefault(); onNav("resume"); }}>
            Résumé <span className="arrow">↓</span>
          </a>
        </nav>
      </div>
      {/* scroll progress */}
      <div style={{ height: 2, background: "transparent", position: "relative" }}>
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: (prog * 100) + "%", background: "var(--fg1)", opacity: scrolled ? .9 : 0, transition: "opacity 240ms" }} />
      </div>
      <style>{`@media(max-width:680px){.nav-links{display:none !important}}`}</style>
    </header>
  );
}
Object.assign(window, { Nav });