/* Summit redesign — Tweaks app.
Renders ONLY the Tweaks panel; applies choices to the live static page
via data-attributes + CSS variables. */
const SUMMIT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"headline": "serif",
"overlay": "balanced",
"corners": "soft",
"headlineText": "Senior moving & downsizing, handled with care."
}/*EDITMODE-END*/;
const CORNER_MAP = {
sharp: { card: "2px", btn: "2px", img: "3px" },
soft: { card: "8px", btn: "6px", img: "10px" },
round: { card: "16px", btn: "12px", img: "20px" },
};
const OVERLAY_MAP = { lighter: "0.14", balanced: "0.28", darker: "0.46" };
function applySummitTweaks(t) {
const root = document.documentElement;
root.setAttribute("data-headline", t.headline);
const c = CORNER_MAP[t.corners] || CORNER_MAP.soft;
root.style.setProperty("--radius-card", c.card);
root.style.setProperty("--radius-btn", c.btn);
root.style.setProperty("--radius-img", c.img);
const hero = document.querySelector(".hero");
if (hero) hero.style.setProperty("--hero-ov", OVERLAY_MAP[t.overlay] || OVERLAY_MAP.balanced);
const h1 = document.getElementById("heroHeadline");
if (h1 && typeof t.headlineText === "string" && t.headlineText.trim()) {
h1.textContent = t.headlineText;
}
}
function SummitTweaksApp() {
const [t, setTweak] = useTweaks(SUMMIT_TWEAK_DEFAULTS);
React.useEffect(() => { applySummitTweaks(t); }, [t]);
return (
setTweak("headline", v)}
/>
setTweak("headlineText", v)}
/>
setTweak("overlay", v)}
/>
setTweak("corners", v)}
/>
);
}
// Apply the current defaults immediately (host keeps the EDITMODE block in sync)
applySummitTweaks(SUMMIT_TWEAK_DEFAULTS);
const summitTweakRoot = document.getElementById("tweaks-root");
if (summitTweakRoot) {
ReactDOM.createRoot(summitTweakRoot).render();
}