/* sppoX LP — Tweaks panel (controls applied to data-* + game config) */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "neon",
"font": "clean",
"hero": "photo",
"pricing": "b",
"ai": "chat",
"why": "story",
"flow": "three",
"fes": "hype",
"catch": "この夏 \"アソビ\" つくせ！",
"ctaLabel": "今すぐフェスを体験する"
}/*EDITMODE-END*/;
function SppoxTweaks() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const root = document.documentElement;
React.useEffect(() => { root.setAttribute('data-theme', t.theme); }, [t.theme]);
React.useEffect(() => { root.setAttribute('data-font', t.font); }, [t.font]);
React.useEffect(() => { document.getElementById('lp').setAttribute('data-hero', t.hero); }, [t.hero]);
React.useEffect(() => { document.getElementById('lp').setAttribute('data-pricing', t.pricing); }, [t.pricing]);
React.useEffect(() => { document.getElementById('lp').setAttribute('data-ai', t.ai); }, [t.ai]);
React.useEffect(() => { document.getElementById('lp').setAttribute('data-why', t.why); }, [t.why]);
React.useEffect(() => { document.getElementById('lp').setAttribute('data-flow', t.flow); }, [t.flow]);
React.useEffect(() => { document.getElementById('lp').setAttribute('data-fes', t.fes); }, [t.fes]);
React.useEffect(() => {
const el = document.getElementById('hero-catch');
if (!el) return;
const raw = (t.catch || '').trim();
// 引用符（" " 「」 “ ”）で囲んだ部分を強調
const esc = (s) => s.replace(/&/g, '&').replace(//g, '>');
let html = esc(raw).replace(/("[^"]+"|“[^”]+”|「[^」]+」)/g,
(m) => '' + m + '');
el.innerHTML = html;
}, [t.catch]);
React.useEffect(() => {
document.querySelectorAll('[data-cta="hero"], [data-cta="sticky"]').forEach((b) => {
const arrow = b.querySelector('.arrow');
b.textContent = t.ctaLabel + ' ';
if (arrow) b.appendChild(arrow); else { const s = document.createElement('span'); s.className = 'arrow'; s.textContent = '▶'; b.appendChild(s); }
});
}, [t.ctaLabel]);
return (
{
const map = { '#1ec8de': 'neon', '#ff5aa0': 'sunset', '#5b7bff': 'electric', '#0fb6d4': 'arena' };
setTweak('theme', map[v] || 'neon');
}}
/>
setTweak('theme', v)}
/>
setTweak('font', v)}
/>
setTweak('catch', v)}
/>
setTweak('hero', v)}
/>
setTweak('ctaLabel', v)}
/>
setTweak('fes', v)}
/>
setTweak('why', v)}
/>
setTweak('ai', v)}
/>
setTweak('flow', v)}
/>
setTweak('pricing', v)}
/>
);
}
(function mount() {
const host = document.createElement('div');
host.id = 'tweaks-root';
document.body.appendChild(host);
ReactDOM.createRoot(host).render();
})();