/* こころね LP — Tweaks island (applies to the vanilla DOM) */
const KOKORONE_TWEAKS = /*EDITMODE-BEGIN*/{
  "headlineFont": "mincho",
  "accent": "#f1d48a",
  "ctaLabel": "リリース通知を受け取る"
}/*EDITMODE-END*/;

const FONT_MAP = {
  mincho: "'Shippori Mincho', serif",
  maru:   "'Zen Maru Gothic', sans-serif"
};

function applyKokorone(t){
  const root = document.documentElement;
  root.style.setProperty('--serif', FONT_MAP[t.headlineFont] || FONT_MAP.mincho);
  root.style.setProperty('--accent', t.accent);
  document.querySelectorAll('button[data-notify]').forEach(btn=>{
    const tn = btn.lastChild;
    if(tn && tn.nodeType === 3){ tn.textContent = ' ' + t.ctaLabel; }
  });
}

function TweaksApp(){
  const [t, setTweak] = useTweaks(KOKORONE_TWEAKS);
  React.useEffect(()=>{ applyKokorone(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="見出しフォント" />
      <TweakRadio label="書体" value={t.headlineFont}
        options={[{value:'mincho',label:'明朝'},{value:'maru',label:'丸ゴシック'}]}
        onChange={(v)=>setTweak('headlineFont', v)} />
      <TweakSection label="アクセント" />
      <TweakColor label="差し色" value={t.accent}
        options={['#f1d48a','#c4bff0','#a9c2f0','#eccadd']}
        onChange={(v)=>setTweak('accent', v)} />
      <TweakSection label="CTA文言" />
      <TweakSelect label="ボタン" value={t.ctaLabel}
        options={['リリース通知を受け取る','詳しく見る','画面を見てみる']}
        onChange={(v)=>setTweak('ctaLabel', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweaksApp/>);