function MobileNav({ route, setRoute, lang, setLang, onLogout, clientName }) {
  const T = window.T;
  const NAV = window.NAV;
  const LangToggle = window.LangToggle;
  const t = T[lang];
  const [open, setOpen] = React.useState(false);

  function go(routeId) {
    setRoute(routeId);
    setOpen(false);
  }

  return (
    <>
      {/* Header mobile fijo */}
      <header className="srv-mobile-header">
        <button className="srv-hamburger" onClick={function () { setOpen(true); }} aria-label="Menú">
          <i className="ph ph-list"></i>
        </button>
        <div className="srv-mobile-brand">ServiaOS</div>
        <div style={{width: 40}}></div>
      </header>

      {/* Overlay */}
      {open && (
        <div className="srv-drawer-overlay" onClick={function () { setOpen(false); }}></div>
      )}

      {/* Drawer lateral */}
      <aside className={"srv-drawer " + (open ? "on" : "")}>
        <div className="srv-drawer-head">
          <div>
            <div className="srv-brand-mark">ServiaOS</div>
            <div className="srv-brand-sub eyebrow">
              <span className="srv-brand-name">{clientName || "—"}</span>
              <span className="srv-brand-tag">Intranet</span>
            </div>
          </div>
          <button className="srv-drawer-close" onClick={function () { setOpen(false); }} aria-label="Tancar">
            <i className="ph ph-x"></i>
          </button>
        </div>

        <nav className="srv-drawer-nav">
          {NAV.map(function (n) {
            return (
              <button key={n.id} className={"srv-nav-item " + (route === n.id ? "on" : "")} onClick={function () { go(n.id); }}>
                <i className={"ph " + n.icon}></i>
                <span>{t.nav[n.id]}</span>
              </button>
            );
          })}
        </nav>

        <div className="srv-drawer-foot">
          <LangToggle lang={lang} setLang={setLang} />
          <button className="srv-drawer-logout" onClick={onLogout}>
            <i className="ph ph-sign-out"></i>
            <span>{t.logout}</span>
          </button>
        </div>
      </aside>
    </>
  );
}

window.MobileNav = MobileNav;