/* Tweaks app for index.html */
const { useEffect } = React;

function HomeTweaks() {
  const DEFAULTS = /*EDITMODE-BEGIN*/{
    "showWhyNumbers": false,
    "showStatNumbers": true,
    "showBaStats": true,
    "showHeroTrust": true,
    "showCtaArrows": true,
    "sectionRhythm": "normal"
  }/*EDITMODE-END*/;

  const [t, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.classList.toggle('tw-no-why-nums', !t.showWhyNumbers);
    root.classList.toggle('tw-no-stat-nums', !t.showStatNumbers);
    root.classList.toggle('tw-no-ba-stats', !t.showBaStats);
    root.classList.toggle('tw-no-hero-trust', !t.showHeroTrust);
    root.classList.toggle('tw-no-cta-arrows', !t.showCtaArrows);
    root.setAttribute('data-rhythm', t.sectionRhythm);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Numbering & ornaments">
        <TweakToggle label="Why-card numbers (01 / 02 / 03)" value={t.showWhyNumbers} onChange={v => setTweak('showWhyNumbers', v)} />
        <TweakToggle label="Big stat numbers" value={t.showStatNumbers} onChange={v => setTweak('showStatNumbers', v)} />
        <TweakToggle label="Before/after stat strips" value={t.showBaStats} onChange={v => setTweak('showBaStats', v)} />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakToggle label="Hero trust badges" value={t.showHeroTrust} onChange={v => setTweak('showHeroTrust', v)} />
        <TweakToggle label="CTA arrow glyphs" value={t.showCtaArrows} onChange={v => setTweak('showCtaArrows', v)} />
        <TweakRadio
          label="Section rhythm"
          value={t.sectionRhythm}
          options={[
            { value: 'tight', label: 'Tight' },
            { value: 'normal', label: 'Normal' },
            { value: 'loose', label: 'Loose' },
          ]}
          onChange={v => setTweak('sectionRhythm', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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