// Nav.jsx — Sticky top nav. Hosts an invisible "brand slot" the cinematic hero
// lands into. Our own brand fades in only once the hero's collapse is ~done.
const { useState, useEffect } = React;

function Nav({ onApply, theme, onToggleTheme, onMobileNav }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const el = document.querySelector('.site-scroll') || window;
    const handler = () => {
      const y = el === window ? window.scrollY : el.scrollTop;
      setScrolled(y > 40);
    };
    el.addEventListener('scroll', handler, { passive: true });
    return () => el.removeEventListener('scroll', handler);
  }, []);

  const links = ['Program', 'Schedule', 'Outcomes', 'Team', 'FAQ'];

  return (
    <header className={`al-nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="al-nav-inner">
        {/* Empty slot: gives the cinematic hero a landing target. */}
        <a className="al-brand al-nav-brand-slot" href="#top">
          <span className="al-nav-brand-real">
            <img src="assets/logomark.png" alt="" width="32" height="32"/>
            <span className="al-wordmark">AeroLabs</span>
          </span>
        </a>
        <nav className="al-links">
          {links.map(l => <a key={l} href={`#${l.toLowerCase()}`}>{l}</a>)}
        </nav>
        <div className="al-nav-actions">
          <button className="al-icon-btn" onClick={onToggleTheme} aria-label="Toggle theme">
            <i data-lucide={theme === 'dark' ? 'sun' : 'moon'} />
          </button>
          <button className="al-btn al-btn-primary" onClick={onApply}>Apply — free</button>
          <button className="al-icon-btn al-mobile-only" onClick={onMobileNav} aria-label="Menu">
            <i data-lucide="menu" />
          </button>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;