// app.jsx — Router + App entry

function detectLang() {
  try {
    const nav = (navigator.language || "ru").slice(0, 2).toLowerCase();
    if (["ru", "en", "es"].includes(nav)) return nav;
  } catch (e) {}
  return "ru";
}

function App() {
  const [lang, setLang] = window.useLocalState("nv:lang", detectLang());
  const [theme, setTheme] = window.useLocalState("nv:theme", "dark");
  const route = window.useRoute();
  const t = window.I18N[lang] || window.I18N.ru;

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    document.documentElement.setAttribute("lang", lang);
  }, [theme, lang]);

  // After a route change, if the Nav stashed a section to scroll to
  // (because the user clicked Credo/Connect/etc. from a non-home page),
  // scroll to it once the new page has mounted. useLayoutEffect runs
  // before paint so the user never sees a flash at the top.
  React.useLayoutEffect(() => {
    let target = null;
    try {
      target = sessionStorage.getItem("nv:scrollAfterRoute");
      if (target) sessionStorage.removeItem("nv:scrollAfterRoute");
    } catch (e) {}
    if (!target) return;
    const el = document.getElementById(target);
    if (el) el.scrollIntoView({ behavior: "auto", block: "start" });
  }, [route]);

  let page;
  switch (route) {
    case "projects":
      page = <window.ProjectsIndex t={t} />;
      break;
    case "projects/moi-dedans":
      page = <window.ProjectMoiDedans t={t} />;
      break;
    case "projects/catzpacho":
      page = <window.ProjectCatzpacho t={t} />;
      break;
    case "projects/otvetno":
      page = <window.ProjectOtvetno t={t} />;
      break;
    case "videos":
      page = <window.VideosPage t={t} />;
      break;
    case "home":
    default:
      page = <window.HomePage t={t} />;
      break;
  }

  return (
    <div className={"page page--" + route.replace(/\//g, "-")}>
      <window.Nav t={t} lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} route={route} />
      {page}
      <window.Footer t={t} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);