const { useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#2563EB",
  "secondary": "#7C3AED",
  "accent": "#F97316",
  "headline": "AI가 24시간\n외국인 손님을\n찾아드립니다",
  "subhead": "100만원으로 시작하는 AI 기반 구글 마케팅\n월 3만원으로 5개 언어 SEO 자동 관리",
  "seats": 27
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty('--primary', t.primary);
  r.style.setProperty('--secondary', t.secondary);
  r.style.setProperty('--accent', t.accent);

  const h1 = document.querySelector('[data-edit-key="headline"]');
  if (h1) h1.innerHTML = t.headline.split('\n').map(l => l).join('<br/>');
  const sub = document.querySelector('[data-edit-key="subhead"]');
  if (sub) sub.textContent = t.subhead;

  const seatsEl = document.getElementById('seats');
  const seatsBottomEl = document.getElementById('seatsBottom');
  if (seatsEl) seatsEl.textContent = t.seats;
  if (seatsBottomEl) seatsBottomEl.textContent = t.seats;
}

function App() {
  const [t, setTweak] = window.useTweaks(DEFAULTS);

  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <window.TweaksPanel>
      <window.TweakSection label="Colors">
        <window.TweakColor
          label="Primary"
          value={t.primary}
          onChange={(v) => setTweak('primary', v)}
          options={['#2563EB', '#0EA5E9', '#0F766E', '#1F2937']}
        />
        <window.TweakColor
          label="Secondary"
          value={t.secondary}
          onChange={(v) => setTweak('secondary', v)}
          options={['#7C3AED', '#DB2777', '#9333EA', '#475569']}
        />
        <window.TweakColor
          label="Accent (CTA)"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#F97316', '#EF4444', '#10B981', '#F59E0B']}
        />
      </window.TweakSection>

      <window.TweakSection label="Copy">
        <window.TweakText
          label="Headline"
          value={t.headline}
          onChange={(v) => setTweak('headline', v)}
        />
        <window.TweakText
          label="Subhead"
          value={t.subhead}
          onChange={(v) => setTweak('subhead', v)}
        />
      </window.TweakSection>

      <window.TweakSection label="Early bird">
        <window.TweakSlider
          label="Seats remaining"
          value={t.seats}
          onChange={(v) => setTweak('seats', v)}
          min={1}
          max={30}
          step={1}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

const mount = document.createElement('div');
document.body.appendChild(mount);
ReactDOM.createRoot(mount).render(<App />);