// App — router shell. State-based, no URL routing.
// Map of accent name → hex (kept here so TweakColor can show real swatches)
const ACCENT_HEX = {
bronze: "#B07A3C",
editorial: "#14161A",
ember: "#C2451E",
moss: "#5B6E3A",
};
const ACCENT_NAME = Object.fromEntries(Object.entries(ACCENT_HEX).map(([k, v]) => [v, k]));
function DesignsmithTweaks({ t, setTweak }) {
const accentHex = ACCENT_HEX[t.accent] || ACCENT_HEX.bronze;
return (
setTweak("mode", v)}
options={[
{ value: "light", label: "Light" },
{ value: "dark", label: "Dark" },
]}
/>
setTweak("accent", ACCENT_NAME[hex] || "bronze")}
/>
setTweak("headlineStyle", v)}
options={[
{ value: "tagline", label: "Tagline" },
{ value: "build", label: "Build-first" },
{ value: "years", label: "37 years" },
]}
/>
setTweak("density", v)}
options={[
{ value: "comfortable", label: "Roomy" },
{ value: "compact", label: "Tight" },
]}
/>
setTweak("locale", v)}
options={[
{ value: "en", label: "EN" },
{ value: "ar", label: "AR" },
]}
/>
);
}
function App() {
const [route, setRoute] = useState({ name: "home" });
const [tweaks, setTweak] = useTweaks(window.DS_TWEAKS_DEFAULTS);
// Apply tweaks to
useEffect(() => {
document.documentElement.dataset.mode = tweaks.mode || "light";
document.documentElement.dataset.accent = tweaks.accent || "bronze";
document.documentElement.lang = tweaks.locale || "en";
if (tweaks.density === "compact") {
document.documentElement.style.setProperty("--section-py", "clamp(48px, 6vw, 96px)");
} else {
document.documentElement.style.removeProperty("--section-py");
}
}, [tweaks]);
const navigate = useCallback((r) => {
setRoute(r);
requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: "instant" }));
}, []);
const setLocale = (l) => setTweak("locale", l);
let body = null;
if (route.name === "home") body = ;
else if (route.name === "projects") body = ;
else if (route.name === "project") body = ;
else if (route.name === "sectors") body = ;
else if (route.name === "how-we-build") body = ;
else if (route.name === "studio") body = ;
else if (route.name === "awards") body = ;
else if (route.name === "contact") body = ;
return (
<>
{body}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();