/* Top navigation — minimal, editorial */
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const { isMobile } = useViewport();

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

  const navStyle = {
    position: "fixed",
    top: 0, left: 0, right: 0,
    zIndex: 100,
    padding: isMobile ? "14px 20px" : "18px 56px",
    transition: "background 280ms ease, backdrop-filter 280ms ease, border-color 280ms ease",
    background: scrolled ? "rgba(9, 9, 15, 0.72)" : "transparent",
    backdropFilter: scrolled ? "blur(18px) saturate(140%)" : "none",
    WebkitBackdropFilter: scrolled ? "blur(18px) saturate(140%)" : "none",
    borderBottom: `1px solid ${scrolled ? "rgba(243,238,230,0.06)" : "transparent"}`,
  };
  const inner = {
    margin: "0 auto",
    display: "grid",
    gridTemplateColumns: isMobile ? "1fr auto" : "1fr auto 1fr",
    alignItems: "center",
    gap: isMobile ? 16 : 40,
  };
  const brand = { display: "flex", alignItems: "center", gap: isMobile ? 10 : 14, minWidth: 0 };
  const orb = {
    width: isMobile ? 24 : 30, height: isMobile ? 24 : 30, borderRadius: "50%",
    background: "radial-gradient(circle at 35% 30%, #ecefff 0%, #c9c1ff 38%, #9d8bdf 70%, #6d5aa8 100%)",
    boxShadow: "0 0 0 1px rgba(255,255,255,0.08), 0 0 24px rgba(184, 168, 255, 0.35)",
    flex: "0 0 auto",
  };
  const wordmark = {
    fontFamily: "var(--serif)",
    fontSize: isMobile ? 15 : 19,
    letterSpacing: "-0.01em",
    lineHeight: 1,
    color: "var(--ink)",
  };
  const sub = {
    display: "block",
    fontFamily: "var(--mono)",
    fontSize: isMobile ? 8.5 : 9.5,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ink-3)",
    marginTop: 4,
    whiteSpace: "nowrap",
  };
  const links = {
    display: "flex",
    gap: 36,
    fontFamily: "var(--mono)",
    fontSize: 12,
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    color: "var(--ink-2)",
    justifySelf: "center",
  };
  const right = { display: "flex", gap: 16, alignItems: "center", justifySelf: "end" };

  const items = [
    { label: "Services", href: "#services" },
    { label: "About", href: "#about" },
  ];

  return (
    <nav style={navStyle} data-screen-label="Nav">
      <div style={inner}>
        <a href="#top" style={brand} aria-label="Human Centered AI Academy">
          <span style={orb} aria-hidden="true"></span>
          <span style={{ display: "flex", flexDirection: "column", whiteSpace: "nowrap", minWidth: 0 }}>
            <span style={wordmark}>Human Centered <em style={{ fontStyle: "italic", color: "var(--lav-1)" }}>AI</em> Academy</span>
            {!isMobile && <span style={sub}>EST. MMXXIV · TORONTO</span>}
          </span>
        </a>

        {!isMobile && (
          <div style={links}>
            {items.map((it, i) => (
              <a key={it.label} href={it.href} className="nav-link" style={{ position: "relative", whiteSpace: "nowrap" }}>
                <span style={{ color: "var(--ink-3)", marginRight: 6, fontSize: 10 }}>{String(i+1).padStart(2,"0")}</span>
                {it.label}
              </a>
            ))}
          </div>
        )}

        <div style={right}>
          <a href="#contact" className="btn" style={{ whiteSpace: "nowrap", padding: isMobile ? "10px 16px 10px 18px" : "14px 22px 14px 24px", fontSize: isMobile ? 10.5 : 12 }}>
            <span className="dot"></span>
            {isMobile ? "Work with us" : "Work with us"}
            <span className="arr">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;