/* Tweaks panel for Monroe Cortex site
   - Hero variation switcher
   - Accent color
   - Glow intensity
*/

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "centered",
  "accent": "#3CDC92",
  "showGrid": true
}/*EDITMODE-END*/;

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

  useEffect(() => {
    document.body.setAttribute('data-hero', t.hero);
    document.documentElement.style.setProperty('--c-accent', t.accent);
    // derive glow from accent
    const hex = t.accent.replace('#','');
    const r = parseInt(hex.substr(0,2),16);
    const g = parseInt(hex.substr(2,2),16);
    const b = parseInt(hex.substr(4,2),16);
    document.documentElement.style.setProperty('--c-accent-glow', `rgba(${r}, ${g}, ${b}, 0.18)`);

    document.querySelectorAll('.hero__grid-bg').forEach(el => {
      el.style.display = t.showGrid ? '' : 'none';
    });
  }, [t.hero, t.accent, t.showGrid]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero layout">
        <TweakRadio
          label="Variação"
          value={t.hero}
          onChange={(v) => setTweak('hero', v)}
          options={[
            { value: 'centered',  label: 'Centralizado' },
            { value: 'split',     label: 'Split' },
            { value: 'editorial', label: 'Editorial' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Cor de acento">
        <TweakColor
          label="Verde da marca"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#3CDC92', '#2EE095', '#5BE3A8', '#22C089']}
        />
      </TweakSection>

      <TweakSection title="Atmosfera">
        <TweakToggle
          label="Grade técnica de fundo"
          value={t.showGrid}
          onChange={(v) => setTweak('showGrid', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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