/* global React, ReactDOM, TweaksPanel, TweakSection, TweakColor, TweakSlider, TweakToggle, TweakRadio, useTweaks */

const { useEffect } = React;

function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty('--c-gold', t.accent);
  r.style.setProperty('--c-cream', t.background);
  r.style.setProperty('--c-dark', t.ink);

  // Heading scale
  document.querySelectorAll('.h1').forEach(el => {
    el.style.fontSize = `clamp(${40 * t.headingScale}px, ${6 * t.headingScale}vw, ${84 * t.headingScale}px)`;
  });
  document.querySelectorAll('.h-section').forEach(el => {
    el.style.fontSize = `clamp(${36 * t.headingScale}px, ${4.5 * t.headingScale}vw, ${64 * t.headingScale}px)`;
  });

  // Quote
  const q = document.querySelector('.quote');
  if (q) q.style.display = t.showQuote ? '' : 'none';

  // Dots
  const d = document.querySelector('.dots');
  if (d) d.style.display = t.showDots ? '' : 'none';

  // Round buttons
  document.querySelectorAll('.btn').forEach(el => {
    el.style.borderRadius = t.roundButtons ? '999px' : '10px';
  });

  // Photo bg shape
  const bg = document.querySelector('.about__photo-bg');
  if (bg) {
    if (t.photoBgShape === 'rounded') bg.style.borderRadius = '50% 50% 0 0 / 60% 60% 0 0';
    else if (t.photoBgShape === 'square') bg.style.borderRadius = '12px 12px 0 0';
    else if (t.photoBgShape === 'circle') bg.style.borderRadius = '50%';
  }
}

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Цвета">
        <TweakColor label="Акцент" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
        <TweakColor label="Фон" value={tweaks.background} onChange={v => setTweak('background', v)} />
        <TweakColor label="Основной" value={tweaks.ink} onChange={v => setTweak('ink', v)} />
      </TweakSection>

      <TweakSection title="Типографика">
        <TweakSlider label="Размер заголовков" min={0.7} max={1.3} step={0.05}
                     value={tweaks.headingScale} onChange={v => setTweak('headingScale', v)} />
      </TweakSection>

      <TweakSection title="Layout">
        <TweakRadio label="Форма фона фото"
                    options={[
                      { value: 'rounded', label: 'Арка' },
                      { value: 'circle',  label: 'Круг' },
                      { value: 'square',  label: 'Квадрат' },
                    ]}
                    value={tweaks.photoBgShape}
                    onChange={v => setTweak('photoBgShape', v)} />
        <TweakToggle label="Скругленные кнопки" value={tweaks.roundButtons} onChange={v => setTweak('roundButtons', v)} />
        <TweakToggle label="Цитата на hero" value={tweaks.showQuote} onChange={v => setTweak('showQuote', v)} />
        <TweakToggle label="Точки навигации" value={tweaks.showDots} onChange={v => setTweak('showDots', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement('div');
root.id = 'tweaks-root';
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);