/* Tweaks panel root — applies hero variant + accent to the static page */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "accent": "coral",
  "showStickyCta": true
}/*EDITMODE-END*/;

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

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

  React.useEffect(() => {
    document.documentElement.setAttribute('data-accent', t.accent === 'bordo' ? 'bordo' : 'coral');
  }, [t.accent]);

  React.useEffect(() => {
    const el = document.querySelector('.sticky-cta');
    if (el) el.style.setProperty('--sticky-on', t.showStickyCta ? '1' : '0');
    document.documentElement.setAttribute('data-sticky', t.showStickyCta ? 'on' : 'off');
  }, [t.showStickyCta]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero — перший екран" />
      <TweakRadio
        label="Композиція"
        value={t.hero}
        options={['split', 'centered', 'editorial']}
        onChange={(v) => setTweak('hero', v)}
      />
      <TweakSection label="Акцентний колір" />
      <TweakColor
        label="Один акцент"
        value={t.accent === 'bordo' ? '#7B2D3F' : '#C2553E'}
        options={['#C2553E', '#7B2D3F']}
        onChange={(v) => setTweak('accent', v === '#7B2D3F' ? 'bordo' : 'coral')}
      />
      <TweakSection label="Мобільне" />
      <TweakToggle
        label="Sticky-кнопка заявки"
        value={t.showStickyCta}
        onChange={(v) => setTweak('showStickyCta', v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const root = document.getElementById('tweaks-root');
  if (root && window.ReactDOM) {
    ReactDOM.createRoot(root).render(<TweaksApp />);
  }
})();