// Root app — wires sections + tweaks panel
const DEFAULTS = /*EDITMODE-BEGIN*/{
"direction": "dark-techy",
"accentHue": 195,
"density": "comfy",
"heroVariant": "workflow",
"showLogos": true,
"monoLabels": true,
"buttonHover": "lift",
"logoBadge": "navy"
}/*EDITMODE-END*/;
const App = () => {
const [values, setTweak] = useTweaks(DEFAULTS);
const [legalOpen, setLegalOpen] = React.useState(false);
const [privacyOpen, setPrivacyOpen] = React.useState(false);
// Apply theme
React.useEffect(() => {
const map = {
'dark-techy': 'dark',
'light-editorial': 'light',
'hybrid-narrative': 'hybrid'
};
document.body.dataset.theme = map[values.direction] || 'dark';
document.body.dataset.density = values.density || 'comfy';
document.body.dataset.hover = values.buttonHover || 'lift';
document.body.dataset.badge = values.logoBadge || 'navy';
// Accent hue
const h = Number.isFinite(values.accentHue) ? values.accentHue : 195;
document.documentElement.style.setProperty('--cyan', `oklch(0.82 0.17 ${h})`);
document.documentElement.style.setProperty('--blue', `oklch(0.62 0.2 ${(h + 30) % 360})`);
}, [values]);
// Scroll reveal
React.useEffect(() => {
const els = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
}, { threshold: 0.15 });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, [values.direction]);
return (
<>
{values.showLogos && }