/* global React, ReactDOM */
/* ============================================================
MYTHOS APP — same routes as the original site, rendered
through the Mythos chrome and home. Inner pages are the
existing components, re-themed via the token system.
============================================================ */
const { useEffect, useState } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"mode": "light",
"accent": "lumen",
"display": "cormorant",
"hero": "block110",
"density": "spacious",
"motion": "full"
}/*EDITMODE-END*/;
function MythosApp() {
const VALID_ROUTES = ['home', 'optimize', 'pricing', 'contact', 'revscout-s', 'revtoolbox', 'emi', 'revfield', 'revsizer', 'case-study', 'faq', 'privacy'];
const LEGACY_ROUTES = { 'tools': 'revscout-s', 'services': 'revscout-s' };
const normalizeRoute = (h) => {
if (LEGACY_ROUTES[h]) return LEGACY_ROUTES[h];
return VALID_ROUTES.includes(h) ? h : 'home';
};
const [route, setRoute] = useState(() => {
const h = (window.location.hash || '#home').replace('#', '');
return normalizeRoute(h);
});
const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
window.useReveal(route);
window.useMythosMotion(route, tweaks.motion);
// Reflect tweaks → attributes on . data-mythos gates every override.
useEffect(() => {
const root = document.documentElement;
root.setAttribute('data-mythos', '1');
root.setAttribute('data-myth-mode', tweaks.mode);
root.setAttribute('data-theme', tweaks.mode === 'dark' ? 'dark' : 'light');
root.setAttribute('data-density', tweaks.density);
root.setAttribute('data-myth-accent', tweaks.accent);
root.setAttribute('data-myth-display', tweaks.display);
root.setAttribute('data-myth-motion', tweaks.motion);
}, [tweaks]);
// Route → hash + scroll top
useEffect(() => {
if (window.location.hash !== '#' + route) {
window.history.replaceState(null, '', '#' + route);
}
window.scrollTo({ top: 0, behavior: 'instant' });
}, [route]);
useEffect(() => {
const onHash = () => {
const h = (window.location.hash || '#home').replace('#', '');
setRoute(normalizeRoute(h));
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
// Global audio kill-switch — keep every video muted.
useEffect(() => {
let raf;
const tick = () => {
document.querySelectorAll('video').forEach((v) => {
if (!v.muted) v.muted = true;
if (v.volume !== 0) v.volume = 0;
});
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
const inner = (page) => {page}
;
return (
{route === 'home' && }
{route === 'revscout-s' && inner()}
{route === 'revtoolbox' && inner()}
{route === 'emi' && inner()}
{route === 'revfield' && inner()}
{route === 'revsizer' && inner()}
{route === 'optimize' && inner()}
{route === 'pricing' && inner()}
{route === 'contact' && inner()}
{route === 'case-study' && inner()}
{route === 'faq' && inner()}
{route === 'privacy' && inner()}
setTweak('mode', v)} />
setTweak('accent', v)} />
setTweak('display', v)} />
setTweak('hero', v)} />
setTweak('density', v)} />
setTweak('motion', v)} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();