// Nav liquid glass — pill flottante en haut
function Nav({ lang, setLang, onContact }) {
  const t = window.I18N[lang];
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

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

  const navStyle = {
    position: "fixed",
    top: scrolled ? 16 : 24,
    left: "50%",
    transform: "translateX(-50%)",
    zIndex: 50,
    display: "flex",
    alignItems: "center",
    gap: 8,
    padding: "8px 8px 8px 22px",
    transition: "top 320ms var(--ease-out)",
    width: "min(960px, calc(100% - 32px))",
    justifyContent: "space-between",
  };
  const linkStyle = {
    padding: "10px 16px",
    fontSize: 12,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "rgba(247,247,247,0.85)",
    borderRadius: 999,
    transition: "background 200ms, color 200ms",
  };
  const linksWrap = {
    display: "flex",
    alignItems: "center",
    gap: 4,
  };

  return (
    <nav className="lg lg-nav lg-pill" style={navStyle}>
      <a href="#top" onClick={scrollTo("top")} data-cursor="" style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <img src="assets/logo-mark-white.svg" alt="deepprod" style={{ width: 22, height: 22 }} />
        <span style={{ fontStyle: "italic", fontWeight: 800, letterSpacing: "-0.02em", textTransform: "lowercase", fontSize: 18 }}>
          deep<span style={{ color: "rgba(247,247,247,0.5)" }}>.</span>
        </span>
      </a>
      <div className="nav-links" style={linksWrap}>
        <a href="#work" onClick={scrollTo("work")} style={linkStyle}>{t.nav.work}</a>
        <a href="#clients" onClick={scrollTo("clients")} style={linkStyle}>{t.nav.clients}</a>
        <a href="#footer" onClick={scrollTo("footer")} style={linkStyle}>{t.nav.contact}</a>
      </div>
    </nav>
  );
}

window.Nav = Nav;