// Main App + routing
const { useState, useEffect } = React;

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem("fantula-lang") || "en");
  const [page, setPage] = useState(() => {
    const hash = (window.location.hash || "#home").replace("#", "").split("-")[0];
    return ["home","services","industries","insights","about","security","contact","privacy","terms"].includes(hash) ? hash : "home";
  });

  useEffect(() => { localStorage.setItem("fantula-lang", lang); }, [lang]);
  useEffect(() => {
    window.location.hash = page;
    document.title = (window.I18N[lang].nav[page] ? window.I18N[lang].nav[page] + " · " : "") + "FANTULA LLC";
  }, [page, lang]);

  useEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || "#home").replace("#", "");
      if (["home","services","industries","insights","about","security","contact","privacy","terms"].includes(h)) setPage(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const t = window.I18N[lang];

  let content;
  switch (page) {
    case "services": content = <ServicesPage t={t} setPage={setPage} lang={lang}/>; break;
    case "industries": content = <IndustriesPage t={t} setPage={setPage} lang={lang}/>; break;
    case "insights": content = <InsightsPage t={t} setPage={setPage} lang={lang}/>; break;
    case "about": content = <AboutPage t={t} setPage={setPage} lang={lang}/>; break;
    case "security": content = <SecurityPage t={t} setPage={setPage} lang={lang}/>; break;
    case "contact": content = <ContactPage t={t} setPage={setPage} lang={lang}/>; break;
    case "privacy": content = <PrivacyPage t={t} lang={lang}/>; break;
    case "terms": content = <TermsPage t={t} lang={lang}/>; break;
    default: content = <HomePage t={t} setPage={setPage} lang={lang}/>;
  }

  return (
    <>
      <TopBar t={t} lang={lang} setLang={setLang} page={page} setPage={setPage}/>
      <main data-screen-label={`${page}`}>
        {content}
      </main>
      <Footer t={t} lang={lang} setLang={setLang} setPage={setPage}/>
    </>
  );
}

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