// app.jsx — Root component for Arkwright Systems homepage.
const { useState, useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroVariant": "beforeafter",
"dark": false
}/*EDITMODE-END*/;
// ─────────────────────────────────────────────────────────────────────────────
// Top chrome: wordmark + nav pill + CTA. Tracks scroll progress.
// ─────────────────────────────────────────────────────────────────────────────
function TopChrome({ onToggleMenu, onToggleTheme, dark, scrollPct, menuOpen }) {
return (
);
}
// ─────────────────────────────────────────────────────────────────────────────
// App
// ─────────────────────────────────────────────────────────────────────────────
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [menuOpen, setMenuOpen] = useState(false);
const [scrollPct, setScrollPct] = useState(0);
// Apply theme to so it covers everything (including drawer scroll bg)
useEffect(() => {
const root = document.documentElement;
if (t.dark) root.setAttribute('data-theme', 'dark');
else root.removeAttribute('data-theme');
}, [t.dark]);
// Scroll progress
useEffect(() => {
const update = () => {
const max = document.documentElement.scrollHeight - window.innerHeight;
const next = max <= 0 ? 0 : Math.round((window.scrollY / max) * 100);
setScrollPct(Math.max(0, Math.min(100, next)));
};
update();
window.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
return () => {
window.removeEventListener('scroll', update);
window.removeEventListener('resize', update);
};
}, []);
// Menu is a centered dropdown — no scroll lock needed.
const toggleTheme = () => setTweak('dark', !t.dark);
return (
<>
setMenuOpen((v) => !v)}
onToggleTheme={toggleTheme}
dark={t.dark}
scrollPct={scrollPct}
menuOpen={menuOpen}
/>
setMenuOpen(false)}
/>
setTweak('dark', v)}
/>
setTweak('heroVariant', v)}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render();