/* global React, ReactDOM, Nav, Hero, Engine, Bento, Architects, TerminalFooter, i18n, useReveal, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakSlider */ const { useEffect } = React; function App() { const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS); // Apply theme to useEffect(() => { document.documentElement.setAttribute('data-theme', tweaks.theme || 'light'); }, [tweaks.theme]); // Apply font pair useEffect(() => { const root = document.documentElement; const pairs = { 'fraunces-inter': { display: "'Fraunces', 'Times New Roman', serif", body: "'Inter', system-ui, sans-serif", mono: "'JetBrains Mono', monospace" }, 'space-grotesk': { display: "'Space Grotesk', sans-serif", body: "'Inter', system-ui, sans-serif", mono: "'JetBrains Mono', monospace" }, 'plex': { display: "'IBM Plex Serif', serif", body: "'IBM Plex Sans', sans-serif", mono: "'IBM Plex Mono', monospace" } }; const p = pairs[tweaks.fontPair] || pairs['fraunces-inter']; root.style.setProperty('--font-display', p.display); root.style.setProperty('--font-body', p.body); root.style.setProperty('--font-mono', p.mono); }, [tweaks.fontPair]); // Accent color useEffect(() => { const root = document.documentElement; const accents = { mint: { mint: '#A4D2C5', forest: '#1A3A39' }, sky: { mint: '#A8C8E8', forest: '#1A2D3A' }, saffron: { mint: '#F4D29A', forest: '#3A2A1A' }, lavender:{ mint: '#C8B8E0', forest: '#2A1A3A' }, rose: { mint: '#E8B8C4', forest: '#3A1A28' } }; const a = accents[tweaks.accent] || accents.mint; root.style.setProperty('--mint', a.mint); root.style.setProperty('--forest', a.forest); }, [tweaks.accent]); // Animation intensity useEffect(() => { document.body.classList.toggle('anim-off', tweaks.anim === 'off'); }, [tweaks.anim]); useReveal(); const lang = tweaks.lang || 'en'; const t = i18n[lang] || i18n.en; return ( <>