const BrainMark = ({ size = 30, maskId = "brain-mask" }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" stroke="var(--saffron)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" style={{ flex: "none", alignSelf: "center" }} aria-hidden="true">
    <defs>
      <mask id={maskId} maskUnits="userSpaceOnUse">
        <rect x="0" y="0" width="40" height="40" fill="white" />
        {/* Hide the central rectangle behind the AI text */}
        <rect x="14" y="16" width="12" height="9" fill="black" />
      </mask>
    </defs>
    <g mask={`url(#${maskId})`}>
      {/* Left hemisphere outline */}
      <path d="M19 8 C 13 8, 8 11, 8 16 C 6 17, 5 19, 6 21 C 5 23, 6 25, 8 26 C 8 30, 12 33, 16 33 C 18 33, 19 32, 19 31 L 19 9" />
      {/* Right hemisphere outline */}
      <path d="M21 8 C 27 8, 32 11, 32 16 C 34 17, 35 19, 34 21 C 35 23, 34 25, 32 26 C 32 30, 28 33, 24 33 C 22 33, 21 32, 21 31 L 21 9" />
      {/* Wireframe internal lines — left */}
      <path d="M8 16 C 11 17, 13 16, 14 14" opacity="0.85" />
      <path d="M6 21 C 9 21, 12 22, 13 25" opacity="0.85" />
      <path d="M8 26 C 11 26, 13 28, 14 31" opacity="0.85" />
      {/* Wireframe internal lines — right */}
      <path d="M32 16 C 29 17, 27 16, 26 14" opacity="0.85" />
      <path d="M34 21 C 31 21, 28 22, 27 25" opacity="0.85" />
      <path d="M32 26 C 29 26, 27 28, 26 31" opacity="0.85" />
    </g>
    {/* Nodes (outside mask, all sit outside the central rect anyway) */}
    <circle cx="14" cy="14" r="0.9" fill="var(--saffron)" stroke="none" />
    <circle cx="13" cy="25" r="0.9" fill="var(--saffron)" stroke="none" />
    <circle cx="26" cy="14" r="0.9" fill="var(--saffron)" stroke="none" />
    <circle cx="27" cy="25" r="0.9" fill="var(--saffron)" stroke="none" />
    {/* AI text in center */}
    <text x="20" y="23" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="9" fill="var(--saffron)" stroke="none" letterSpacing="-0.04em">AI</text>
  </svg>
);

const Nav = ({ onBookCall }) => {
  const [stuck, setStuck] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const closeMenu = () => setMenuOpen(false);
  return (
    <nav className={"nav " + (stuck ? "is-stuck " : "") + (menuOpen ? "is-open" : "")} data-screen-label="Nav">
      <div className="nav__inner">
        <a href="index.html" className="wordmark" aria-label="Industrolearn home">
          <BrainMark />
          <span>Industro<span style={{ color: "var(--saffron)" }}>learn</span></span>
        </a>
        <div className="nav__links">
          <a href="programs/index.html" onClick={closeMenu}>Programs</a>
          <a href="studio.html" onClick={closeMenu}>Studio</a>
          <a href="#events" onClick={closeMenu}>Events</a>
          <a href="#about" onClick={closeMenu}>About</a>
          <a
            className="btn btn--ghost btn--sm"
            href="#book"
            data-cal-namespace="intro"
            data-cal-link="industrolearn/intro"
            data-cal-config='{"layout":"month_view"}'
            onClick={(e) => { closeMenu(); onBookCall && onBookCall(e); }}
          >Book a call</a>
        </div>
        <button
          type="button"
          className="nav__toggle"
          aria-expanded={menuOpen}
          aria-controls="nav-links"
          aria-label={menuOpen ? "Close menu" : "Open menu"}
          onClick={() => setMenuOpen((v) => !v)}
        >
          <span className="nav__toggle-bar" />
          <span className="nav__toggle-bar" />
          <span className="nav__toggle-bar" />
        </button>
      </div>
    </nav>
  );
};

window.Nav = Nav;
