// Main app. Composes everything; manages tweaks; mounts the Tweaks panel. const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSlider, TweakToggle } = window; const { Hero, Scan, Features, Nordic, Verified, Data, Footer, TaglineStrip, InsideApp } = window; // Tweakable accent: stored as a hex, mapped to {--accent, --accent-deep}. const ACCENT_PALETTES = { '#C4622D': { '--accent': '#C4622D', '--accent-deep': 'hsl(16 65% 36%)' }, // terracotta '#D69020': { '--accent': '#D69020', '--accent-deep': 'hsl(32 70% 36%)' }, // sunflower-warm '#5C7A60': { '--accent': '#5C7A60', '--accent-deep': 'hsl(140 28% 26%)' }, // sage-deep '#4E342C': { '--accent': '#4E342C', '--accent-deep': 'hsl(25 30% 18%)' }, // bark }; function Nav({ lang, onLangChange }) { return (
Seedling
); } function App() { const [t, setT] = useTweaks(window.TWEAK_DEFAULTS); // Apply accent palette + grain opacity as CSS vars on React.useEffect(() => { const root = document.documentElement; const palette = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES.terracotta; Object.entries(palette).forEach(([k,v]) => root.style.setProperty(k, v)); root.style.setProperty('--grain-opacity', String(t.grain)); document.body.setAttribute('data-lang', t.language); }, [t.accent, t.grain, t.language]); return ( <>