// nav.jsx
const { useEffect, useState } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={`nav-wrap ${scrolled ? "scrolled" : ""}`}>
      <div className="nav">
        <a href="#top" className="brand" aria-label="Global Capstone home">
          <div className="brand-mark" aria-hidden="true"></div>
          <div className="brand-name">
            <span className="t1">Global Capstone</span>
            <span className="t2">Elliott School · Class of 2026</span>
          </div>
        </a>
        <nav className="nav-links">
          <a href="#overview">Program</a>
          <a href="#map">Where We Work</a>
          <a href="#projects">Projects</a>
          <a href="#reel">Voices</a>
          <a href="#timeline">The Year</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a className="nav-apply" href="#apply">
            Apply <span className="chev" aria-hidden="true">›</span>
          </a>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;