/* ============================================================
   KUSHAEV — Tweaks island
   ============================================================ */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#cfd4d8",
  "headline": "Архитектор",
  "diagonal": 58,
  "motion": 1,
  "pairing": "Golos"
}/*EDITMODE-END*/;

const HEADLINES = {
  "Архитектор": `<span class="em">Архитектор</span><br><span class="lead">бизнес-решений</span>`,
  "Преимущество": `Системы, что<br><span class="em">создают</span><br><span class="lead">преимущество</span>`,
  "Founder": `<span class="lead">Founder.</span><br>Инженер.<br><span class="em">Стратег.</span>`
};

const PAIRINGS = {
  "Manrope": { display: '"Manrope", system-ui, sans-serif', body: '"Manrope", system-ui, sans-serif' },
  "Golos":   { display: '"Golos Text", system-ui, sans-serif', body: '"Golos Text", system-ui, sans-serif' }
};

function hexToRgba(hex, a) {
  const h = hex.replace('#', '');
  const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return `rgba(${r},${g},${b},${a})`;
}

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

  // theme
  useEffect(() => { document.documentElement.setAttribute('data-theme', t.theme); }, [t.theme]);

  // accent
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--accent', t.accent);
    r.setProperty('--accent-soft', hexToRgba(t.accent, 0.16));
    r.setProperty('--accent-line', hexToRgba(t.accent, 0.32));
  }, [t.accent]);

  // headline copy
  useEffect(() => {
    const h = document.querySelector('.content-chapter[data-ch="0"] .headline');
    if (h && HEADLINES[t.headline]) h.innerHTML = HEADLINES[t.headline];
  }, [t.headline]);

  // diagonal geometry
  useEffect(() => {
    const top = (22 + (t.diagonal / 100) * 24);   // 22 → 46 %
    const bot = (4 + (t.diagonal / 100) * 18);     // 4  → 22 %
    ['visual', 'visualFrame'].forEach(id => {
      const el = document.getElementById(id);
      if (el) { el.style.setProperty('--cut-top', top + '%'); el.style.setProperty('--cut-bot', bot + '%'); }
    });
    const ln = document.querySelector('#diagLine line');
    if (ln) { ln.setAttribute('x1', top); ln.setAttribute('x2', bot); }
  }, [t.diagonal]);

  // motion
  useEffect(() => { window.__kuMotion = t.motion; }, [t.motion]);

  // font pairing
  useEffect(() => {
    const p = PAIRINGS[t.pairing] || PAIRINGS.Manrope;
    document.documentElement.style.setProperty('--font-display', p.display);
    document.documentElement.style.setProperty('--font-body', p.body);
  }, [t.pairing]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Тема и цвет" />
      <TweakRadio label="Тема" value={t.theme} options={['dark', 'light']}
        onChange={v => setTweak('theme', v)} />
      <TweakColor label="Акцент" value={t.accent}
        options={['#cfd4d8', '#84a7cc', '#82bfa0']}
        onChange={v => setTweak('accent', v)} />

      <TweakSection label="Композиция" />
      <TweakSelect label="Заголовок" value={t.headline}
        options={['Архитектор', 'Преимущество', 'Founder']}
        onChange={v => setTweak('headline', v)} />
      <TweakSlider label="Диагональ" value={t.diagonal} min={0} max={100} unit="%"
        onChange={v => setTweak('diagonal', v)} />

      <TweakSection label="Движение и шрифт" />
      <TweakSlider label="Интенсивность" value={t.motion} min={0} max={1.6} step={0.1}
        onChange={v => setTweak('motion', v)} />
      <TweakRadio label="Шрифт" value={t.pairing} options={['Manrope', 'Golos']}
        onChange={v => setTweak('pairing', v)} />
    </TweaksPanel>
  );
}

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