function LangSwitcher() {
  const { lang, setLang } = window.useT();
  const [open, setOpen] = React.useState(false);
  const langs = [
    { code: 'en', label: 'English', short: 'EN' },
    { code: 'fr', label: 'Français', short: 'FR' },
    { code: 'ar', label: 'العربية', short: 'AR' },
  ];
  const current = langs.find(l => l.code === lang);
  return (
    <div className="relative">
      <button onClick={()=>setOpen(o=>!o)} className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl bg-brand-50 hover:bg-brand-100 text-brand-700 font-extrabold text-[12px] transition" aria-label="Language">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18 M12 3a14 14 0 010 18 M12 3a14 14 0 000 18"/></svg>
        <span>{current.short}</span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      {open && (
        <>
          <div className="fixed inset-0 z-40" onClick={()=>setOpen(false)}/>
          <div className="absolute top-full mt-2 right-0 rtl:right-auto rtl:left-0 z-50 bg-cream border-2 border-brand-100 rounded-2xl shadow-card p-1.5 min-w-[150px]">
            {langs.map(l => (
              <button key={l.code} onClick={()=>{setLang(l.code); setOpen(false);}} className={"w-full text-start px-3 py-2 rounded-xl text-[13px] font-extrabold transition flex items-center justify-between gap-3 " + (l.code===lang ? 'bg-brand-600 text-cream' : 'text-brand-700 hover:bg-brand-50')}>
                <span>{l.label}</span>
                <span className={"text-[10px] " + (l.code===lang ? 'opacity-80' : 'opacity-50')}>{l.short}</span>
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function Nav() {
  const { t } = window.useT();
  const [open, setOpen] = React.useState(false);
  const links = [
    { label: t.nav.programs, href: '#programs' },
    { label: t.nav.method, href: '#methodology' },
    { label: t.nav.community, href: '#community' },
    { label: t.nav.contact, href: '#contact' },
  ];
  return (
    <header className="sticky top-0 z-40 px-4 sm:px-8 pt-4">
      <nav className="mx-auto max-w-7xl rounded-2xl bg-cream/80 backdrop-blur border border-brand-100 shadow-soft px-4 sm:px-6 py-3 flex items-center gap-4">
        <a href="#top" className="flex items-center gap-3 group">
          <div className="relative w-10 h-10 rounded-xl bg-brand-600 flex items-center justify-center shadow-pop group-hover:rotate-[-6deg] transition">
            <img src="assets/logo.png" alt="" className="w-7 h-7 object-contain brightness-0 invert" />
          </div>
          <div className="leading-tight">
            <div className="font-display font-extrabold text-brand-700 text-[15px] tracking-tight">Robotics Center</div>
            <div className="text-[11px] uppercase tracking-[0.18em] text-brand-400 font-bold">Ouarzazate</div>
          </div>
        </a>
        <div className="ms-auto hidden md:flex items-center gap-1">
          {links.map(l => (
            <a key={l.href} href={l.href} className="px-3 py-2 rounded-xl text-[14px] font-bold text-brand-700/80 hover:text-brand-700 hover:bg-brand-50 transition">
              {l.label}
            </a>
          ))}
        </div>
        <div className="ms-auto md:ms-0 flex items-center gap-2">
          <LangSwitcher/>
          <a href="#join" className="hidden sm:inline-flex items-center gap-2 bg-brand-600 text-white font-extrabold text-[14px] px-4 py-2.5 rounded-xl btn-3d">
            <span>{t.nav.enroll}</span>
            <span aria-hidden>→</span>
          </a>
          <button onClick={() => setOpen(o => !o)} className="md:hidden w-10 h-10 rounded-xl bg-brand-50 text-brand-700 grid place-items-center" aria-label="Menu">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d={open ? 'M6 6L18 18 M6 18L18 6' : 'M4 7h16 M4 12h16 M4 17h16'}/></svg>
          </button>
        </div>
      </nav>
      {open && (
        <div className="md:hidden mx-auto max-w-7xl mt-2 rounded-2xl bg-cream border border-brand-100 shadow-soft p-2">
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="block px-4 py-3 rounded-xl text-[15px] font-bold text-brand-700 hover:bg-brand-50">{l.label}</a>
          ))}
        </div>
      )}
    </header>
  );
}
window.Nav = Nav;