// Nav.jsx — sticky top navigation
function Nav({ onCta }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["Le programme", "#distinguish"],
    ["Penser → Faire", "#spine"],
    ["Livrables", "#deliverables"],
    ["Intervenants", "#intervenants"],
    ["Contact", "#contact"],
  ];
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a className="nav-brand" href="#top">
          <img src="assets/logo-mark.png" alt="AI Leadership Compass" />
          <div>
            <div className="nb-name">AI Leadership Compass</div>
            <div className="nb-sub">Édition Executive</div>
          </div>
        </a>
        <nav className="nav-links">
          {links.map(([l, h]) => (
            <a key={l} className="nav-link" href={h}>{l}</a>
          ))}
          <button className="btn btn-ink btn-sm" onClick={onCta}>Réserver une cohorte</button>
        </nav>
      </div>
    </header>
  );
}
Object.assign(window, { Nav });