/* Tweaks for Varolo landing page */
const { useEffect } = React;

function VaroloTweaks() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Sync body attributes so CSS responds
  useEffect(() => {
    document.body.dataset.accent = t.accent;
    document.body.dataset.hero = t.heroLayout;
    document.body.dataset.tone = t.portraitTone;
    document.body.dataset.stats = String(t.showStats);
    document.body.dataset.office = String(t.showOfficeImage);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Acento">
        <TweakRadio
          label="Cor"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={[
            { value: 'gold',     label: 'Dourado'  },
            { value: 'copper',   label: 'Cobre'    },
            { value: 'platinum', label: 'Platina'  },
          ]}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakRadio
          label="Layout"
          value={t.heroLayout}
          onChange={(v) => setTweak('heroLayout', v)}
          options={[
            { value: 'split',     label: 'Dividido' },
            { value: 'reversed',  label: 'Invertido'},
            { value: 'centered',  label: 'Centrado' },
          ]}
        />
        <TweakRadio
          label="Tom da foto"
          value={t.portraitTone}
          onChange={(v) => setTweak('portraitTone', v)}
          options={[
            { value: 'warm', label: 'Quente'  },
            { value: 'cool', label: 'Frio'    },
            { value: 'mono', label: 'P&B'     },
          ]}
        />
        <TweakToggle
          label="Card de estatísticas"
          value={t.showStats}
          onChange={(v) => setTweak('showStats', v)}
        />
      </TweakSection>

      <TweakSection label="Sobre">
        <TweakToggle
          label="Foto do escritório"
          value={t.showOfficeImage}
          onChange={(v) => setTweak('showOfficeImage', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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