// App — top-level router. Hash-based: #/projects, #/project/<id>, #/manufacturing, etc.

function App() {
  const [route, setRoute] = useState({ page: "home" });
  const [lang, setLang] = useState("en");
  const [tweaksTick, setTweaksTick] = useState(0);

  // Push to URL hash; restore on back/forward.
  useEffect(() => {
    const toHash = (r) => {
      if (r.page === "home") return "#/";
      if (r.page === "project" && r.id) return `#/project/${r.id}`;
      if (r.page === "projects" && r.sector) return `#/projects/${r.sector.toLowerCase().replace(/ /g, "-").replace("&", "and")}`;
      return `#/${r.page}`;
    };
    const hash = toHash(route);
    if (window.location.hash !== hash) window.history.replaceState(null, "", hash);
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route]);

  useEffect(() => {
    const fromHash = () => {
      const h = window.location.hash.replace(/^#\/?/, "");
      if (!h) return { page: "home" };
      const parts = h.split("/");
      if (parts[0] === "project" && parts[1]) return { page: "project", id: parts[1] };
      return { page: parts[0] };
    };
    const onPop = () => setRoute(fromHash());
    window.addEventListener("popstate", onPop);
    // Initial hash
    if (window.location.hash) setRoute(fromHash());
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  // Listen to tweaks changes
  useEffect(() => {
    const h = () => setTweaksTick(t => t + 1);
    window.addEventListener("gli-tweaks-change", h);
    return () => window.removeEventListener("gli-tweaks-change", h);
  }, []);

  const tweaks = window.__gliTweaks || { heroVariant: "lobby", showFactoryStats: true };

  // Set RTL on AR
  useEffect(() => {
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
  }, [lang]);

  const renderPage = () => {
    switch (route.page) {
      case "home":          return <Home setRoute={setRoute} heroVariant={tweaks.heroVariant} />;
      case "projects":      return <ProjectsIndex setRoute={setRoute} initialSector={route.sector} />;
      case "project":       return <CaseStudy id={route.id} setRoute={setRoute} />;
      case "sectors":       return <SectorsHub setRoute={setRoute} />;
      case "manufacturing": return <ManufacturingPage setRoute={setRoute} showFactoryStats={tweaks.showFactoryStats} />;
      case "capabilities":  return <CapabilitiesPage setRoute={setRoute} />;
      case "about":         return <AboutPage setRoute={setRoute} />;
      case "contact":       return <ContactPage initialProjectType={route.projectType} />;
      default:              return <Home setRoute={setRoute} heroVariant={tweaks.heroVariant} />;
    }
  };

  return (
    <div data-screen-label={`${route.page === "project" ? `project-${route.id}` : route.page}`}>
      <Nav route={route} setRoute={setRoute} lang={lang} setLang={setLang} />
      {renderPage()}
      <Footer setRoute={setRoute} />
      <GLITweaks />
    </div>
  );
}

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