// ATOM Center — Main App
const App = () => {
  // Hash-based routing
  const getPageFromHash = () => {
    const h = (location.hash || "#home").replace("#", "").split("?")[0];
    const valid = ["home", "about", "programs", "enterprise", "blog", "contact"];
    return valid.includes(h) ? h : "home";
  };

  const [page, setPage] = useState(getPageFromHash());
  const [lang, setLang] = useState(() => localStorage.getItem("atom-lang") || "fr");

  useEffect(() => {
    document.body.dataset.density = "regular";
    document.body.dataset.theme = "light";
  }, []);

  useEffect(() => { localStorage.setItem("atom-lang", lang); }, [lang]);
  useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  useEffect(() => {
    const onHash = () => { setPage(getPageFromHash()); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (p) => {
    location.hash = "#" + p;
    setPage(p);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const PageComponent = {
    home: HomePage, about: AboutPage, programs: ProgramsPage,
    enterprise: EnterprisePage, blog: BlogPage, contact: ContactPage,
  }[page] || HomePage;

  return (
    <>
      <Navbar page={page} lang={lang} setLang={setLang} navigate={navigate} density="regular"/>
      <main key={page + lang}>
        <PageComponent lang={lang} navigate={navigate}/>
      </main>
      <Footer lang={lang} navigate={navigate}/>
      <CookieBanner lang={lang}/>
    </>
  );
};

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