// App shell: hash-based routing + lang provider + Loi 25 banner.

const { useState: aUseState, useEffect: aUseEffect } = React;

function ScrollToTopOnRoute({ route }) {
  aUseEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  }, [route]);
  return null;
}

function App() {
  const [route, setRoute] = aUseState(() => {
    const hash = (window.location.hash || "").replace("#/", "").replace("#", "");
    return hash || "home";
  });

  aUseEffect(() => {
    const onHash = () => {
      const hash = (window.location.hash || "").replace("#/", "").replace("#", "");
      setRoute(hash || "home");
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (id) => {
    setRoute(id);
    window.history.replaceState(null, "", `#/${id === "home" ? "" : id}`);
  };

  let Page = HomePage;
  if (route === "services") Page = ServicesPage;
  else if (route === "cases") Page = CasesPage;
  else if (route === "blog") Page = BlogPage;
  else if (route === "contact") Page = ContactPage;
  else if (route === "privacy" || route === "politique-confidentialite") Page = PrivacyPage;
  else if (route === "terms" || route === "conditions") Page = TermsPage;
  else if (route === "law25" || route === "loi-25") Page = Law25Page;

  return (
    <LangProvider>
      <ScrollToTopOnRoute route={route} />
      <div className="min-h-screen flex flex-col bg-bg">
        <Navbar route={route} setRoute={navigate} />
        <div className="flex-1" data-screen-label={`Zynflow · ${route}`}>
          <Page setRoute={navigate} />
        </div>
        <Footer setRoute={navigate} />
        <Loi25Banner />
      </div>
    </LangProvider>
  );
}

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