// App: router, scroll progress, mount
const { useEffect } = React;
const { RouterProvider, useRoute, Nav, Footer } = window;
const { Home, About, Services, ServiceDetail, Work, CaseStudy, Platform, Pricing, Journal, Article, Careers, Contact, Login, Signup, Legal, NotFound } = window;

function ScrollProgress() {
  useEffect(() => {
    const el = document.getElementById("scrollProgress");
    if (!el) return;
    const on = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      el.style.width = max > 0 ? `${(h.scrollTop / max) * 100}%` : "0";
    };
    document.addEventListener("scroll", on, { passive: true });
    on();
    return () => document.removeEventListener("scroll", on);
  }, []);
  return null;
}

function Routes() {
  const { path } = useRoute();
  // /work/:slug, /services/:slug, /journal/:slug
  // /legal/:slug — slugs: terms, privacy, cookies, refund, aup, mentions-legales
  const parts = path.split("/").filter(Boolean);
  const [section, slug] = parts;
  let page;
  if (!section) page = <Home />;
  else if (section === "about") page = <About />;
  else if (section === "services" && !slug) page = <Services />;
  else if (section === "services" && slug) page = <ServiceDetail slug={slug} />;
  else if (section === "work" && !slug) page = <Work />;
  else if (section === "work" && slug) page = <CaseStudy slug={slug} />;
  else if (section === "platform") page = <Platform />;
  else if (section === "pricing") page = <Pricing />;
  else if (section === "journal" && !slug) page = <Journal />;
  else if (section === "journal" && slug) page = <Article slug={slug} />;
  else if (section === "careers") page = <Careers />;
  else if (section === "contact") page = <Contact />;
  else if (section === "login") page = <Login />;
  else if (section === "signup") page = <Signup />;
  else if (section === "legal") page = <Legal kind={slug || "privacy"} />;
  else if (section === "404") page = <NotFound />;
  else page = <NotFound />;
  return page;
}

function App() {
  return (
    <RouterProvider>
      <ScrollProgress />
      <Nav />
      <Routes />
      <Footer />
    </RouterProvider>
  );
}

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