/* App — router + Tweaks integration */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "warm", "locale": "en", "hero": "editorial", "showCredit": true }/*EDITMODE-END*/; function App() { const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS); /* route is "home" | "projects" | "projects?sector=hospitality" | "project/" | ... */ const [route, setRoute] = React.useState(() => { const h = (window.location.hash || "").replace(/^#\/?/, ""); return h || "home"; }); React.useEffect(() => { const onHash = () => { const h = (window.location.hash || "").replace(/^#\/?/, ""); setRoute(h || "home"); window.scrollTo({ top: 0, behavior: "instant" }); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); const go = React.useCallback((target) => { window.location.hash = `#/${target}`; setRoute(target); window.scrollTo({ top: 0, behavior: "instant" }); }, []); /* apply locale to for RTL */ React.useEffect(() => { document.documentElement.dir = tweaks.locale === "ar" ? "rtl" : "ltr"; document.documentElement.lang = tweaks.locale; }, [tweaks.locale]); /* apply palette */ React.useEffect(() => { document.body.setAttribute("data-palette", tweaks.palette); }, [tweaks.palette]); /* translation helper */ const tr = (en) => tweaks.locale === "ar" ? (window.SHORT_AR[en] || en) : en; /* parse route */ const [routeBase, routeQuery] = route.split("?"); const queryParams = Object.fromEntries(new URLSearchParams(routeQuery || "")); const [sectorFilter, setSectorFilter] = React.useState(() => queryParams.sector || "all"); React.useEffect(() => { if (routeBase === "projects" && queryParams.sector) { setSectorFilter(queryParams.sector); } else if (routeBase === "projects" && !queryParams.sector) { setSectorFilter("all"); } }, [route]); let page; if (routeBase === "home" || routeBase === "") { page = ; } else if (routeBase === "projects") { page = { setSectorFilter(s); window.location.hash = s === "all" ? "#/projects" : `#/projects?sector=${s}`; }} showCredit={tweaks.showCredit} />; } else if (routeBase === "sectors") { page = ; } else if (routeBase.startsWith("project/")) { const id = routeBase.replace("project/", ""); page = ; } else if (routeBase === "factory") { page = ; } else if (routeBase === "capabilities") { page = ; } else if (routeBase === "about") { page = ; } else if (routeBase === "contact") { page = ; } else { page = ; } /* Tweaks panel */ const TweaksPanel = window.TweaksPanel; const TweakSection = window.TweakSection; const TweakRadio = window.TweakRadio; const TweakToggle = window.TweakToggle; const TweakSelect = window.TweakSelect; return ( <> setTweak("locale", l)} /> {page} {TweaksPanel && ( setTweak("palette", v)} options={[ { value: "warm", label: "Warm" }, { value: "steel", label: "Steel" }, { value: "contrast", label: "Dark" }, ]} /> setTweak("locale", v)} options={[ { value: "en", label: "EN" }, { value: "ar", label: "AR" }, ]} /> setTweak("hero", v)} options={[ { value: "editorial", label: "Editorial type-first" }, { value: "image", label: "Image-led, calm" }, { value: "split", label: "Split — type & lede" }, ]} /> setTweak("showCredit", v)} /> )} ); } ReactDOM.createRoot(document.getElementById("root")).render();