// App — composes the marketing site. Scroll-spy for nav, applies Tweaks. function App() { const [t, setTweak] = useTweaks(window.__TWEAK_DEFAULTS); // Apply tweaks to so CSS attribute selectors can react. React.useEffect(() => { const root = document.documentElement; root.dataset.theme = t.theme; root.dataset.accent = t.accent; root.dataset.intensity = String(t.intensity); root.dataset.crosshair = t.crosshair !== false ? "on" : "off"; // Mirror selection / accent token at root. site-accent-fg is the text // color to use *on* the accent (so e.g. a green button gets dark text). if (t.accent === "matrix") { root.style.setProperty("--site-accent", "#00FF66"); root.style.setProperty("--site-accent-soft","rgba(0,255,102,0.16)"); root.style.setProperty("--site-accent-fg", "var(--ink)"); } else if (t.accent === "mono") { root.style.setProperty("--site-accent", "var(--fg-1)"); root.style.setProperty("--site-accent-soft","rgba(10,10,10,0.06)"); root.style.setProperty("--site-accent-fg", "var(--paper)"); } else if (t.accent === "ember") { root.style.setProperty("--site-accent", "var(--ember)"); root.style.setProperty("--site-accent-soft","var(--ember-soft)"); root.style.setProperty("--site-accent-fg", "var(--ink)"); } else { root.style.setProperty("--site-accent", "var(--flame)"); root.style.setProperty("--site-accent-soft","var(--flame-soft)"); root.style.setProperty("--site-accent-fg", "var(--paper)"); } }, [t.theme, t.accent, t.intensity, t.crosshair]); // Scroll-spy const [active, setActive] = React.useState("top"); React.useEffect(() => { const ids = ["top", "pillars", "services", "contact"]; const onScroll = () => { const y = window.scrollY + 120; let current = "top"; for (const id of ids) { const el = document.getElementById(id); if (el && el.offsetTop <= y) current = id; } setActive(current); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const navigate = (id) => { if (id === "top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; } const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 84, behavior: "smooth" }); }; // On load, honor an incoming #hash (e.g. arriving from another page via // index.html#services). The app is client-rendered, so the target section // doesn't exist when the browser first tries to jump — scroll once mounted. React.useEffect(() => { const id = window.location.hash.replace("#", ""); if (!id) return; let tries = 0; const tryScroll = () => { const el = document.getElementById(id); if (el) { window.scrollTo({ top: el.offsetTop - 84, behavior: "auto" }); // Re-settle after late layout shifts (fonts, WebGL canvas, images). setTimeout(() => { const e2 = document.getElementById(id); if (e2) window.scrollTo({ top: e2.offsetTop - 84, behavior: "auto" }); }, 350); } else if (tries++ < 20) { setTimeout(tryScroll, 60); } }; // Wait a frame so layout settles before measuring offsetTop. requestAnimationFrame(() => setTimeout(tryScroll, 60)); }, []); const dark = t.theme === "dark"; return (