/* Tweaks panel: A/B copy toggle */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "copyVariant": "A",
  "showStickyCta": true
}/*EDITMODE-END*/;

const HERO_COPY = {
  A: {
    h1: 'その仕事、<br /><span class="mark">AIに任せて</span>みませんか？',
    lede: 'あなたが普段行っている <strong>面倒な経営業務</strong> をヒアリング。<br />その場で「AIに任せた場合」の <strong>簡易デモを完全無料</strong> で作ります。'
  },
  B: {
    h1: '毎週<span class="mark">3時間以上</span>やっているその仕事、<br />AIに任せてみませんか？',
    lede: '3店舗以上の飲食店経営者限定。<strong>あなたの会社専用のAIエージェント</strong>を、その場で <strong>無料</strong> で作ります。'
  }
};

function TweaksApp(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const h1 = document.querySelector('[data-slot="hero-h1"]');
    const lede = document.querySelector('[data-slot="hero-lede"]');
    const copy = HERO_COPY[t.copyVariant] || HERO_COPY.A;
    if (h1) h1.innerHTML = copy.h1;
    if (lede) lede.innerHTML = copy.lede;
  }, [t.copyVariant]);

  useEffect(() => {
    const sticky = document.getElementById('stickyCta');
    if (sticky) sticky.style.display = t.showStickyCta ? '' : 'none';
  }, [t.showStickyCta]);

  return (
    <TweaksPanel>
      <TweakSection title="A/Bコピー切替">
        <TweakRadio
          label="ヒーローコピー"
          value={t.copyVariant}
          onChange={v => setTweak('copyVariant', v)}
          options={[
            { value: 'A', label: 'A: AI訴求' },
            { value: 'B', label: 'B: Pain訴求' }
          ]}
        />
        <div style={{fontSize:11, color:'#6b7280', lineHeight:1.6, marginTop:8}}>
          <b>A:</b> 「その仕事、AIに任せてみませんか？」<br />
          <b>B:</b> 「毎週3時間以上やっているその仕事、AIに任せてみませんか？」
        </div>
      </TweakSection>

      <TweakSection title="UI表示">
        <TweakToggle
          label="モバイルSticky CTA"
          value={t.showStickyCta}
          onChange={v => setTweak('showStickyCta', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount
const twRoot = document.createElement('div');
document.body.appendChild(twRoot);
ReactDOM.createRoot(twRoot).render(<TweaksApp />);