// Top navigation
const Nav = ({ page, setPage, lang, setLang, t }) => {
  const links = [
    { id: "home",      label: t.nav.home },
    { id: "services",  label: t.nav.services },
    { id: "report",    label: t.nav.report },
    { id: "about",     label: t.nav.about },
    { id: "dashboard", label: t.nav.dashboard },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="nav-left">
          <div className="nav-logo" onClick={() => setPage("home")}>
            <Logo size={44}/>
            <div>
              <span className="nav-logo-text">{t.brand_full}</span>
            </div>
          </div>
          <div className="nav-links">
            {links.map(l => (
              <div key={l.id} className={"nav-link" + (page === l.id ? " active" : "")} onClick={() => setPage(l.id)}>
                {l.label}
              </div>
            ))}
          </div>
        </div>
        <div className="nav-right">
          <div className="lang-toggle">
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "ar" ? "on" : ""} onClick={() => setLang("ar")}>عربي</button>
          </div>
          <div className="nav-link" onClick={() => setPage("auth")}>{t.nav.signin}</div>
          <button className="btn btn-primary btn-sm" onClick={() => setPage("map")}>
            {t.nav.get_started}
          </button>
        </div>
      </div>
    </nav>
  );
};

Object.assign(window, { Nav });