/* Tweaks — aplica variações ao site inteiro via CSS variables + classes */
const { useState, useEffect } = React;

const PALETTES = {
  'Rosé': {
    '--accent':'#B8857D','--accent-deep':'#9E6255','--accent-soft':'#D4A5A0','--accent-pale':'#EDE0DA',
    '--ink':'#3D2A27','--text':'#6B4A45','--text-soft':'#8A6A65','--cream':'#FAF5F2','--alt':'#F5EDE8',
    '--warm-1':'#F0DED4','--warm-2':'#E8D5C8','--warm-3':'#DEC8BA','--dark-1':'#7A5550','--dark-2':'#6B4A45','--dark-3':'#5C3D38'
  },
  'Terracota': {
    '--accent':'#C0846A','--accent-deep':'#A65D3E','--accent-soft':'#D9A98D','--accent-pale':'#EEDDCF',
    '--ink':'#3A271D','--text':'#6B4A38','--text-soft':'#8A6A55','--cream':'#FBF5EF','--alt':'#F5ECE3',
    '--warm-1':'#F2E1D2','--warm-2':'#EAD2C0','--warm-3':'#E0C2AC','--dark-1':'#7A4F3C','--dark-2':'#6B4332','--dark-3':'#5C3829'
  },
  'Malva': {
    '--accent':'#B083A0','--accent-deep':'#8E5C7C','--accent-soft':'#CBA6BD','--accent-pale':'#E8DCE4',
    '--ink':'#2F2330','--text':'#5C4655','--text-soft':'#82697A','--cream':'#FAF5F8','--alt':'#F2EAEF',
    '--warm-1':'#EEDDE6','--warm-2':'#E4CFDA','--warm-3':'#D8BECD','--dark-1':'#6E4F63','--dark-2':'#5F4256','--dark-3':'#503749'
  },
  'Bordô': {
    '--accent':'#A56A6A','--accent-deep':'#8A3F45','--accent-soft':'#C99595','--accent-pale':'#E9D8D8',
    '--ink':'#321E1F','--text':'#5E4040','--text-soft':'#846161','--cream':'#FBF4F3','--alt':'#F3E8E7',
    '--warm-1':'#EDD8D5','--warm-2':'#E2C5C2','--warm-3':'#D5AEAB','--dark-1':'#6E3F42','--dark-2':'#5E3438','--dark-3':'#4E2A2E'
  }
};

const TYPE_SCALE = { 'Compacto': 0.92, 'Equilibrado': 1, 'Amplo': 1.1 };
const ANIM = {
  'Sutil':      { dist: '14px', time: '0.7s' },
  'Padrão':     { dist: '26px', time: '0.9s' },
  'Expressivo': { dist: '44px', time: '1.15s' }
};
const RADIUS = { 'Reto': '0px', 'Suave': '14px' };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Rosé",
  "sections": "Plano",
  "typeScale": "Equilibrado",
  "anim": "Padrão",
  "corners": "Suave"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const root = document.documentElement;
    const pal = PALETTES[t.palette] || PALETTES['Rosé'];
    Object.entries(pal).forEach(([k, v]) => root.style.setProperty(k, v));
    root.style.setProperty('--type-scale', String(TYPE_SCALE[t.typeScale] ?? 1));
    const a = ANIM[t.anim] || ANIM['Padrão'];
    root.style.setProperty('--reveal-dist', a.dist);
    root.style.setProperty('--reveal-time', a.time);
    root.style.setProperty('--radius', RADIUS[t.corners] || '0px');
    document.body.classList.toggle('flat', t.sections === 'Plano');
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Paleta de cor" />
      <TweakColor label="Família"
        value={(PALETTES[t.palette] && [PALETTES[t.palette]['--accent-deep'], PALETTES[t.palette]['--accent'], PALETTES[t.palette]['--accent-pale']]) || []}
        options={Object.keys(PALETTES).map(k => [PALETTES[k]['--accent-deep'], PALETTES[k]['--accent'], PALETTES[k]['--accent-pale']])}
        onChange={(arr) => {
          const name = Object.keys(PALETTES).find(k => PALETTES[k]['--accent-deep'] === arr[0]);
          if (name) setTweak('palette', name);
        }} />
      <TweakSelect label="Tom" value={t.palette} options={Object.keys(PALETTES)}
        onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="Estilo das seções" />
      <TweakRadio label="Fundos" value={t.sections} options={['Suave', 'Plano']}
        onChange={(v) => setTweak('sections', v)} />
      <TweakRadio label="Cantos" value={t.corners} options={['Reto', 'Suave']}
        onChange={(v) => setTweak('corners', v)} />

      <TweakSection label="Tipografia" />
      <TweakRadio label="Escala" value={t.typeScale} options={['Compacto', 'Equilibrado', 'Amplo']}
        onChange={(v) => setTweak('typeScale', v)} />

      <TweakSection label="Animações de scroll" />
      <TweakRadio label="Intensidade" value={t.anim} options={['Sutil', 'Padrão', 'Expressivo']}
        onChange={(v) => setTweak('anim', v)} />
    </TweaksPanel>
  );
}

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