// app.jsx — Tweaks panel mounting. Applies palette / theme / density to <body>.
// NOTE: hero background and logo are controlled by admin "사이트 설정" (render.js
// → renderSettings) — Tweaks no longer touches them to avoid override conflicts.

const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;

function applyTweaks(t) {
  const body = document.body;
  // Theme variant classes
  body.classList.remove('theme-dark', 'theme-charcoal', 'theme-mono', 'theme-emerald');
  if (t.theme === 'dark') body.classList.add('theme-dark');
  if (t.palette === 'charcoal') body.classList.add('theme-charcoal');
  if (t.palette === 'mono')     body.classList.add('theme-mono');
  if (t.palette === 'emerald')  body.classList.add('theme-emerald');

  body.setAttribute('data-density', t.density);

  // Font pairing
  const root = document.documentElement;
  if (t.fontPair === 'pretendard') {
    root.style.setProperty('--f-display', '"Space Grotesk", "Pretendard", system-ui, sans-serif');
    root.style.setProperty('--f-sans', '"Pretendard", system-ui, sans-serif');
  } else if (t.fontPair === 'serif') {
    root.style.setProperty('--f-display', '"Fraunces", "Pretendard", serif');
    root.style.setProperty('--f-sans', '"Pretendard", system-ui, sans-serif');
  } else if (t.fontPair === 'mono') {
    root.style.setProperty('--f-display', '"JetBrains Mono", "Pretendard", monospace');
    root.style.setProperty('--f-sans', '"Pretendard", system-ui, sans-serif');
  }

  // Marquee
  const m = document.querySelector('.marquee');
  if (m) m.style.display = t.showMarquee ? '' : 'none';

  // Hero variant — swap h1 layout
  const heroH1 = document.querySelector('.hero h1');
  if (heroH1) {
    if (t.heroVariant === 'split') {
      heroH1.innerHTML =
        '<span class="ko">통합 솔루션</span>으로<br>수익은 <em>극대화</em>,<br>비용은 <span class="stroke">최소화</span>.';
    } else if (t.heroVariant === 'quantum') {
      heroH1.innerHTML =
        'Quantum-<em>Jump</em><br>for <span class="ko">스마트 팩토리</span>.';
    } else if (t.heroVariant === 'bold') {
      heroH1.innerHTML =
        '<span class="ko">공장 한 곳</span>에서 시작해,<br><em>전 공정</em>을 잇습니다.';
    }
  }
}

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

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

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme}
        options={['light', 'dark']}
        onChange={(v) => setTweak('theme', v)} />
      <TweakSelect label="Palette" value={t.palette}
        options={[
          { label: 'Navy + Orange (default)', value: 'navy' },
          { label: 'Charcoal + Hot orange',   value: 'charcoal' },
          { label: 'Monochrome (no accent)',  value: 'mono' },
          { label: 'Emerald (ESG)',           value: 'emerald' },
        ]}
        onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="Typography" />
      <TweakRadio label="Font" value={t.fontPair}
        options={[
          { label: 'Pretendard ⨯ Grotesk', value: 'pretendard' },
          { label: 'Pretendard ⨯ Serif',   value: 'serif' },
          { label: 'Pretendard ⨯ Mono',    value: 'mono' },
        ]}
        onChange={(v) => setTweak('fontPair', v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density}
        options={['compact', 'regular', 'loose']}
        onChange={(v) => setTweak('density', v)} />
      <TweakToggle label="Show marquee" value={t.showMarquee}
        onChange={(v) => setTweak('showMarquee', v)} />

      <TweakSection label="Hero copy" />
      <TweakSelect label="Headline" value={t.heroVariant}
        options={[
          { label: '수익 극대화 / 비용 최소화', value: 'split' },
          { label: 'Quantum-Jump 강조',         value: 'quantum' },
          { label: '공장 한 곳에서 / 전 공정',  value: 'bold' },
        ]}
        onChange={(v) => setTweak('heroVariant', v)} />
    </TweaksPanel>
  );
}

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