/* ═══════════════════════════════════════════════════════════════
DRAFTED — Tweaks island
A tiny React app that only renders the Tweaks panel and writes
the chosen values onto (data-* attributes) + the hero
headline. The page itself stays vanilla HTML/CSS/JS.
═══════════════════════════════════════════════════════════════ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#4F6BED",
"bg": "cool",
"motion": "full",
"headline": "tagline"
}/*EDITMODE-END*/;
const ACCENT_MAP = { "#4F6BED": "icy", "#6B7385": "silver", "#18181B": "mono" };
const HEADLINES = {
tagline: 'Your LinkedIn posts.
Your voice. Drafted.',
outcome: 'Turn quiet profile visits into
warm inbound leads.',
problem: 'Stop staring at
the blank page.',
authority: 'Show up every week.
In your exact voice.',
};
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => {
const root = document.documentElement;
root.dataset.accent = ACCENT_MAP[t.accent] || "icy";
root.dataset.bg = t.bg;
root.dataset.motion = t.motion;
}, [t.accent, t.bg, t.motion]);
React.useEffect(() => {
const h = document.getElementById("hero-headline");
if (h) h.innerHTML = HEADLINES[t.headline] || HEADLINES.tagline;
}, [t.headline]);
return (
setTweak("accent", v)}
/>
setTweak("bg", v)}
/>
setTweak("headline", v)}
/>
setTweak("motion", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("tweaks-root")).render();