// Top navigation
function Nav({ current, navigate, openTour, lang, setLang }) {
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'approach', label: 'Approach' },
    { id: 'programmes', label: 'Programmes' },
    { id: 'facilities', label: 'Facilities' },
    { id: 'admissions', label: 'Admissions' },
    { id: 'about', label: 'About' },
    { id: 'contact', label: 'Contact' },
  ];
  const [mobileOpen, setMobileOpen] = React.useState(false);
  return (
    <header className="nav">
      <div className="container nav-inner">
        <button onClick={() => navigate('home')} style={{ display: 'flex', alignItems: 'center' }} aria-label="IDEA Early Learning Center — home">
          <IdeaLogo size={50} />
        </button>
        <nav className="nav-links" aria-label="Primary">
          {links.map(l => (
            <button
              key={l.id}
              className={`nav-link ${current === l.id ? 'active' : ''}`}
              onClick={() => navigate(l.id)}
            >{l.label}</button>
          ))}
        </nav>
        <div className="nav-cta">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang === 'EN' ? 'active' : ''} onClick={() => setLang('EN')}>EN</button>
            <button className={lang === 'AR' ? 'active' : ''} onClick={() => setLang('AR')}>عربي</button>
          </div>
          <button className="btn btn-primary btn-sm" onClick={openTour}>
            <Icon.Calendar size={14} /> Book a Tour
          </button>
          <button
            className="btn btn-light btn-sm"
            onClick={() => setMobileOpen(o => !o)}
            style={{ display: 'none' }}
            aria-label="Menu"
          >☰</button>
        </div>
      </div>
    </header>
  );
}
window.Nav = Nav;