/* Tweaks panel + main app */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "accent": "#b00020", "heroVariant": "heal" }/*EDITMODE-END*/; const THEMES = { light: { bg:'#ffffff', surface:'#ffffff', surfaceAlt:'#f5f4f0', surfaceHover:'#ecebe5', ink:'#0b0c10', inkDim:'#55575f', hair:'#e4e2db', hairStrong:'#b8b5ac' }, dark: { bg:'#0a0b10', surface:'#101218', surfaceAlt:'#0d0f14', surfaceHover:'#14161d', ink:'#f2f0ea', inkDim:'#8b8d96', hair:'#1a1c24', hairStrong:'#2a2d35' }, storm: { bg:'#0f1318', surface:'#141a22', surfaceAlt:'#0b0e13', surfaceHover:'#17202c', ink:'#e8f1fa', inkDim:'#7f8ea0', hair:'#1c232d', hairStrong:'#2b3542' }, }; const ACCENT_SWATCHES = ['#b00020','#e94f37','#f3a83a','#39d7aa','#5fa8ff','#c48cff']; const HERO_VARIANTS = [ { k: 'heal', n: 'Dent → Smooth', d: 'Hail falls, dents form, paintless repair heals them.' }, { k: 'storm', n: 'Storm over car', d: 'Continuous hail + ripple impact on the hood.' }, { k: 'xray', n: 'Panel X-Ray', d: 'Wireframe scan highlighting each damage hotspot.' }, ]; function App() { const isMobile = useIsMobile(900); const [cfg, setCfg] = React.useState(() => { try { const saved = JSON.parse(localStorage.getItem('jh-cfg')||'null') || {}; // migrate old peach/orange accent to blood red if (saved.accent && /^#(d97316|f3a83a|f56ea0|e94f37)$/i.test(saved.accent)) saved.accent = '#b00020'; return { ...TWEAK_DEFAULTS, ...saved }; } catch { return TWEAK_DEFAULTS; } }); const [editMode, setEditMode] = React.useState(false); const [scrolled, setScrolled] = React.useState(false); const theme = THEMES[cfg.theme] || THEMES.dark; // Apply theme to document React.useEffect(() => { const r = document.documentElement; r.style.setProperty('--bg', theme.bg); r.style.setProperty('--surface', theme.surface); r.style.setProperty('--surface-alt', theme.surfaceAlt); r.style.setProperty('--surface-hover', theme.surfaceHover); r.style.setProperty('--ink', theme.ink); r.style.setProperty('--ink-dim', theme.inkDim); r.style.setProperty('--hair', theme.hair); r.style.setProperty('--hair-strong', theme.hairStrong); r.style.setProperty('--accent', cfg.accent); r.style.setProperty('--logo-filter', cfg.theme === 'light' ? 'none' : 'invert(1)'); r.style.setProperty('--logo-chip-bg', cfg.theme === 'light' ? '#ffffff' : 'rgba(255,255,255,0.96)'); r.style.setProperty('--logo-chip-border', cfg.theme === 'light' ? '1px solid var(--hair)' : '1px solid transparent'); document.body.style.background = theme.bg; document.body.style.color = theme.ink; localStorage.setItem('jh-cfg', JSON.stringify(cfg)); }, [cfg, theme]); // Edit mode protocol React.useEffect(() => { function onMsg(e) { if (e.data?.type === '__activate_edit_mode') setEditMode(true); else if (e.data?.type === '__deactivate_edit_mode') setEditMode(false); } window.addEventListener('message', onMsg); window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', onMsg); }, []); // Scroll state React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const update = (patch) => { setCfg(c => { const next = { ...c, ...patch }; window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*'); return next; }); }; return ( <>