function Nav({onDonate, current}) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [serv, setServ] = React.useState(false);

  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  React.useEffect(() => {
    const h = (e) => { if (!e.target.closest('.nv-services')) setServ(false); };
    if (serv) document.addEventListener('click', h);
    return () => document.removeEventListener('click', h);
  }, [serv]);

  const cls = (k) => 'nv-link' + (current === k ? ' on' : '');

  return (
    <>
      <header className="nv-bar">
        <div className="nv-inner">
          <button className="nv-burger" onClick={() => setMobileOpen(true)} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
          <nav className="nv-left">
            <a href="about.html" className={cls('about')}>About Us</a>
            <div className="nv-services" onClick={(e) => { e.stopPropagation(); setServ(s => !s); }}>
              <a className={cls('services') + ' nv-with-caret'}>
                Services <svg width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
              </a>
              {serv && (
                <div className="nv-mega">
                  <a href="program-schools.html"><strong>Kiruv Schools</strong><span>127 schools across Eretz Yisrael</span></a>
                  <a href="program-buses.html"><strong>Nationwide Transportation</strong><span>1,600 daily routes</span></a>
                  <a href="program-hemshech.html"><strong>Mentorship · Hemshech</strong><span>Rav Steinman zt"l's continuation program</span></a>
                  <a href="program-teachers.html"><strong>Bar/Bat Mitzvah Preparation</strong><span>12-month structured program</span></a>
                  <a href="program-special-ed.html"><strong>Yeshiva Placement</strong><span>Personalized guidance</span></a>
                  <a href="program-welfare.html"><strong>Family Support Programs</strong><span>Reaching the whole household</span></a>
                  <a href="services.html" className="nv-mega-all">View all services →</a>
                </div>
              )}
            </div>
            <a href="news.html" className={cls('read')}>Read</a>
          </nav>

          <a href="index.html" className="nv-logo" aria-label="Chinuch Atzmai · Home">
            <span className="nv-logo-pill">
              <img src="assets/logo-cream.svg" alt="Chinuch Atzmai" />
            </span>
          </a>

          <nav className="nv-right">
            <a href="contact.html" className={cls('contact')}>Contact Us</a>
            {onDonate
              ? <button className="nv-donate" onClick={onDonate}>Donate</button>
              : <a className="nv-donate" href="donate.html">Donate</a>}
          </nav>
        </div>
      </header>

      {mobileOpen && (
        <div className="mob-drawer" onClick={() => setMobileOpen(false)}>
          <div className="mob-panel" onClick={e => e.stopPropagation()}>
            <div className="mob-head">
              <img src="assets/logo-cream.svg" alt="Chinuch Atzmai" style={{height:48, filter:'invert(20%) sepia(35%) saturate(2200%) hue-rotate(140deg)'}} />
              <button className="mob-x" onClick={() => setMobileOpen(false)} aria-label="Close">×</button>
            </div>
            <div className="mob-section">
              <a href="about.html">About Us</a>
              <a href="founders.html">The Founders</a>
              <a href="leadership.html">Leadership</a>
              <a href="where-we-work.html">Where We Work</a>
            </div>
            <div className="mob-section">
              <div className="mob-h">Services</div>
              <a href="services.html">All Services</a>
              <a href="program-schools.html">Kiruv Schools</a>
              <a href="program-buses.html">Nationwide Transportation</a>
              <a href="program-hemshech.html">Mentorship · Hemshech</a>
              <a href="program-welfare.html">Family Support</a>
            </div>
            <div className="mob-section">
              <div className="mob-h">Read</div>
              <a href="news.html">News & Updates</a>
              <a href="stories.html">Stories</a>
              <a href="annual-report.html">Annual Report</a>
              <a href="yeshuos.html">Yeshuos</a>
            </div>
            <div className="mob-section">
              <a href="contact.html">Contact Us</a>
              <a href="faq.html">FAQ</a>
            </div>
            <a className="mob-cta" href="donate.html">Donate</a>
          </div>
        </div>
      )}
    </>
  );
}
window.Nav = Nav;