function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const diag = typeof location !== "undefined" && /[?&]diag=1/.test(location.search);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = ["WORK", "SERVICES", "CONTACT"];
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      height: "var(--nav-height)", padding: "0 var(--space-section-h)",
      background: diag ? "rgba(15,23,42,0.9)" : (scrolled ? "rgba(15,23,42,0.25)" : "rgba(15,23,42,0.15)"),
      backdropFilter: diag ? "none" : "blur(var(--blur-nav))",
      transform: "translateZ(0)", isolation: "isolate",
      borderBottom: `1px solid ${scrolled ? "var(--border-strong)" : "var(--border-subtle)"}`,
      transition: "all 0.3s ease", fontFamily: "var(--font-body)",
    }}>
      <div style={{ fontSize: "18px", fontWeight: 700, color: "var(--accent-primary)" }}>V3</div>
      <div style={{ display: "flex", gap: "40px" }}>
        {links.map((l) => (
          <a key={l} href={`#${l.toLowerCase()}`} style={{ fontSize: "14px", color: "var(--text-primary)", textDecoration: "none", cursor: "pointer", transition: "all 0.3s ease" }}
            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent-primary)"; e.currentTarget.style.textShadow = "0 0 10px rgba(217,119,6,0.3)"; e.currentTarget.style.transform = "scale(1.05)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-primary)"; e.currentTarget.style.textShadow = "none"; e.currentTarget.style.transform = "scale(1)"; }}>{l}</a>
        ))}
      </div>
    </nav>
  );
}

window.Nav = Nav;