// tweaks-app.jsx — панель Tweaks для лендинга Linksider AI (тёмная тема v2).
// Контент рендерится в обычном HTML; здесь — только панель + применение
// значений к CSS-переменным документа (живой превью).

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "accent": "#4F8DF7",
  "headingFont": "Unbounded",
  "secPad": 72
}/*EDITMODE-END*/;

// Производные палитры акцента для ТЁМНОЙ темы (один источник правды).
const ACCENTS = {
  '#E8C547': { bright: '#F6D862', deep: '#C8A52E', strong: '#EBCB5A', tint: 'rgba(232,197,71,.13)', tint2: 'rgba(232,197,71,.24)', line: 'rgba(232,197,71,.34)', glow: 'rgba(232,197,71,.40)' },
  '#4F8DF7': { bright: '#7FB0FB', deep: '#3A6FD8', strong: '#8FBBFC', tint: 'rgba(79,141,247,.15)', tint2: 'rgba(79,141,247,.26)', line: 'rgba(79,141,247,.38)', glow: 'rgba(79,141,247,.40)' },
  '#34D399': { bright: '#5FDCAF', deep: '#25B07E', strong: '#6FE0BC', tint: 'rgba(52,211,153,.15)', tint2: 'rgba(52,211,153,.26)', line: 'rgba(52,211,153,.38)', glow: 'rgba(52,211,153,.40)' },
  '#9B7CFC': { bright: '#B49BFD', deep: '#7E5CF0', strong: '#BCA6FD', tint: 'rgba(155,124,252,.16)', tint2: 'rgba(155,124,252,.27)', line: 'rgba(155,124,252,.40)', glow: 'rgba(155,124,252,.42)' },
};

const FONT_HREFS = {
  'Unbounded': 'https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&display=swap',
  'Manrope': 'https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap',
  'Onest': 'https://fonts.googleapis.com/css2?family=Onest:wght@600;700;800&display=swap',
};
function ensureFont(name) {
  const href = FONT_HREFS[name];
  if (!href || document.querySelector(`link[data-twkfont="${name}"]`)) return;
  const l = document.createElement('link');
  l.rel = 'stylesheet'; l.href = href; l.dataset.twkfont = name;
  document.head.appendChild(l);
}

function applyTweaks(t) {
  const root = document.documentElement;
  const p = ACCENTS[t.accent] || ACCENTS['#E8C547'];
  root.style.setProperty('--gold', t.accent);
  root.style.setProperty('--gold-bright', p.bright);
  root.style.setProperty('--gold-deep', p.deep);
  root.style.setProperty('--gold-strong', p.strong);
  root.style.setProperty('--gold-tint', p.tint);
  root.style.setProperty('--gold-tint-2', p.tint2);
  root.style.setProperty('--gold-line', p.line);
  root.style.setProperty('--gold-glow', p.glow);
  root.style.setProperty('--grad-gold', `linear-gradient(135deg,${p.bright},${t.accent} 46%,${p.deep})`);
  root.style.setProperty('--sec-pad', t.secPad + 'px');
  ensureFont(t.headingFont);
  root.style.setProperty('--f-head', `'${t.headingFont}', system-ui, sans-serif`);
  document.body.setAttribute('data-hero', t.hero);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio label="Раскладка" value={t.hero}
        options={[{ value: 'split', label: 'Сплит' }, { value: 'center', label: 'Центр' }, { value: 'bold', label: 'Крупный' }]}
        onChange={(v) => setTweak('hero', v)} />

      <TweakSection label="Стиль" />
      <TweakColor label="Акцент" value={t.accent}
        options={['#E8C547', '#4F8DF7', '#34D399', '#9B7CFC']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakRadio label="Шрифт заголовков" value={t.headingFont}
        options={[{ value: 'Unbounded', label: 'Unbounded' }, { value: 'Manrope', label: 'Manrope' }, { value: 'Onest', label: 'Onest' }]}
        onChange={(v) => setTweak('headingFont', v)} />
      <TweakSlider label="Отступ секций" value={t.secPad} min={72} max={168} step={4} unit="px"
        onChange={(v) => setTweak('secPad', v)} />
    </TweaksPanel>
  );
}

// применяем дефолты сразу (до интеракции пользователя)
applyTweaks(TWEAK_DEFAULTS);

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