/* DallasRoofGuard — homepage Tweaks app. Drives theme / font / hero layout / headline copy / CTA shape via attributes on , mirrored to localStorage so choices persist across the site. */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "ember", "font": "grotesk", "hero": "split", "copy": "trust", "cta": "rounded" }/*EDITMODE-END*/; const COPY_SETS = { trust: { h: 'DALLAS\u2019S MOST TRUSTED NAME IN PREMIUM ROOFING.', s: 'Replacements, repairs, and storm restoration done with real craftsmanship and zero pressure \u2014 backed by a workmanship warranty that actually means something.', }, storm: { h: 'STORM-READY ROOFS, BUILT TO LAST IN NORTH TEXAS.', s: 'Hail and high winds are no match for a roof installed right. We restore, replace, and handle the insurance claim from first photo to final shingle.', }, craft: { h: 'HONEST ROOFING. EXCEPTIONAL CRAFT.', s: 'A local crew that treats your home like our own \u2014 meticulous installs, spotless job sites, and recommendations you can actually trust.', }, }; const LS = { theme: 'drg-theme', font: 'drg-font', hero: 'drg-hero', cta: 'drg-cta', copy: 'drg-copy' }; function readInitial() { const init = { ...TWEAK_DEFAULTS }; try { Object.keys(LS).forEach((k) => { const v = localStorage.getItem(LS[k]); if (v) init[k] = v; }); } catch (e) {} return init; } function applyTweaks(t) { const de = document.documentElement; de.setAttribute('data-theme', t.theme); de.setAttribute('data-font', t.font); de.setAttribute('data-hero', t.hero); de.setAttribute('data-cta', t.cta); try { localStorage.setItem(LS.theme, t.theme); localStorage.setItem(LS.font, t.font); localStorage.setItem(LS.hero, t.hero); localStorage.setItem(LS.cta, t.cta); localStorage.setItem(LS.copy, t.copy); } catch (e) {} const h1 = document.getElementById('hero-headline'); const sub = document.getElementById('hero-sub'); const set = COPY_SETS[t.copy] || COPY_SETS.trust; if (h1) h1.innerHTML = set.h; if (sub) sub.textContent = set.s; } const THEME_SWATCHES = { ember: ['#c2410c', '#1b1816', '#f8f6f3'], indigo: ['#2f3e8c', '#121726', '#f4f6fa'], ironclad: ['#b5302b', '#17181b', '#f5f5f6'], pine: ['#1f6047', '#18201b', '#f5f4ee'], }; function HomeTweaks() { const [t, setTweak] = useTweaks(readInitial()); React.useEffect(() => { applyTweaks(t); }, [t]); // Custom theme swatch row (named presets, not raw colors) const ThemeRow = () => (

Color theme

{Object.keys(THEME_SWATCHES).map((key) => { const sw = THEME_SWATCHES[key]; const active = t.theme === key; return ( ); })}

); return ( setTweak('font', v)} /> setTweak('hero', v)} /> setTweak('copy', v)} /> setTweak('cta', v)} /> ); } ReactDOM.createRoot(document.getElementById('tweaks-root')).render();