// nav.jsx — sticky top nav, appears after scrolling past hero

const SECTIONS = [
  { id: 'manifesto', label: 'Manifeste', n: '02' },
  { id: 'travaux',   label: 'Travaux',   n: '03' },
  { id: 'stack',     label: 'Stack',     n: '04' },
  { id: 'contact',   label: 'Contact',   n: '05' },
];

function Nav() {
  const [visible, setVisible] = React.useState(false);
  const [active, setActive] = React.useState(null);

  React.useEffect(() => {
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const y = window.scrollY;
        setVisible(y > window.innerHeight * 0.6);

        // determine active section
        let current = null;
        for (const s of SECTIONS) {
          const el = document.getElementById(s.id);
          if (!el) continue;
          const r = el.getBoundingClientRect();
          if (r.top <= window.innerHeight * 0.4) current = s.id;
        }
        setActive(current);
        ticking = false;
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const goto = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    window.scrollTo({ top: el.offsetTop - 20, behavior: 'smooth' });
  };

  return (
    <nav className={`nv ${visible ? 'is-visible' : ''}`} aria-hidden={!visible}>
      <div className="nv-inner">
        <a href="#top" className="nv-brand mono" onClick={goto('top')}>
          <span className="nv-mark">M</span>
          <span className="nv-name">Maxime Coupez</span>
        </a>

        <ul className="nv-list">
          {SECTIONS.map((s) => (
            <li key={s.id}>
              <a href={`#${s.id}`}
                 onClick={goto(s.id)}
                 className={active === s.id ? 'is-active' : ''}>
                <span className="mono small dim nv-num">{s.n}</span>
                <span className="nv-lbl">{s.label}</span>
              </a>
            </li>
          ))}
        </ul>

        <a href="mailto:hello@maxime.dev" className="nv-cta mono">
          Contact
          <span className="nv-cta-dot"></span>
        </a>
      </div>
    </nav>
  );
}

window.Nav = Nav;