// Main app — tiny hash router: "#/tarifs" is a standalone pricing page,
// every other hash is a section anchor on the home page.
// Pricing page is hidden for now: flip SHOW_PRICING to true to bring back
// "#/tarifs", the nav link and the "Voir les tarifs" CTA.
window.SHOW_PRICING = false;
const SHOW_PRICING = window.SHOW_PRICING;
const getRoute = () => (SHOW_PRICING && window.location.hash === "#/tarifs" ? "tarifs" : "home");

const App = () => {
  const [lang, setLang] = React.useState("fr");
  const [route, setRoute] = React.useState(getRoute);

  React.useEffect(() => {
    const onHash = () => {
      const r = getRoute();
      setRoute(r);
      if (r === "tarifs") window.scrollTo(0, 0);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Landing back on home with a section hash (#contact, #services…): the
  // section only exists after render, so scroll to it here.
  React.useEffect(() => {
    if (route === "home") {
      const id = window.location.hash.slice(1);
      if (id && !id.startsWith("/")) {
        const el = document.getElementById(id);
        if (el) el.scrollIntoView();
      }
    }
  }, [route]);

  const t = window.COPY[lang];
  return (
    <>
      <Header t={t} lang={lang} setLang={setLang} />
      {route === "tarifs" ? (
        <>
          <Pricing t={t} />
          <Compare t={t} />
        </>
      ) : (
        <>
          <Hero t={t} />
          <Services t={t} />
          <WhyUs t={t} />
          <Process t={t} />
          <Platform t={t} />
          <Compare t={t} />
          <Contact t={t} lang={lang} />
          <Final t={t} />
        </>
      )}
      <Footer t={t} lang={lang} />
      <Tweaks />
    </>
  );
};

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