// tweaks-app.jsx — Júlia Baeta tweaks panel

const JB_PALETTES = [
  { hue: 55,  swatches: ['#8a6a3d', '#ece1cd', '#c9a87a'], name: 'Marrom' },
  { hue: 45,  swatches: ['#a07242', '#efe2c8', '#d4b48b'], name: 'Caramelo' },
  { hue: 70,  swatches: ['#6b5b3e', '#ebe4d0', '#b8a07b'], name: 'Castanho' },
  { hue: 18,  swatches: ['#c66a78', '#f5e8e6', '#dcc4e0'], name: 'Rosé' },
];

const JBTweaksApp = () => {
  const TWEAK_DEFAULTS = window.__TWEAK_DEFAULTS__ || {
    accentHue: 55,
    showFloatWA: true,
    showArticles: true,
    showLavender: false,
  };

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

  React.useEffect(() => {
    const root = document.documentElement;
    const h = t.accentHue;
    // chroma reduces gracefully across the warm spectrum
    root.style.setProperty('--rose',        `oklch(0.55 0.08 ${h})`);
    root.style.setProperty('--rose-strong', `oklch(0.40 0.075 ${h})`);
    root.style.setProperty('--rose-soft',   `oklch(0.78 0.055 ${h})`);
    root.style.setProperty('--bg-rose',     `oklch(0.86 0.045 ${h})`);

    if (!t.showLavender) {
      root.style.setProperty('--lavender',      `oklch(0.88 0.025 ${h})`);
      root.style.setProperty('--lavender-deep', `oklch(0.52 0.06 ${h})`);
    } else {
      root.style.setProperty('--lavender',      'oklch(0.74 0.05 295)');
      root.style.setProperty('--lavender-deep', 'oklch(0.55 0.07 295)');
    }

    const fwa = document.querySelector('.float-wa');
    if (fwa) fwa.style.display = t.showFloatWA ? '' : 'none';

    const articles = document.querySelector('#artigos');
    if (articles) articles.style.display = t.showArticles ? '' : 'none';
  }, [t]);

  const currentPalette = JB_PALETTES.find(p => p.hue === t.accentHue) || JB_PALETTES[0];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Cor de acento" />
      <TweakColor
        label="Paleta"
        value={currentPalette.swatches}
        options={JB_PALETTES.map(p => p.swatches)}
        onChange={(v) => {
          const p = JB_PALETTES.find(pp => pp.swatches[0] === v[0]);
          if (p) setTweak('accentHue', p.hue);
        }}
      />

      <TweakSection label="Conteúdo" />
      <TweakToggle
        label="Botão WhatsApp flutuante"
        value={t.showFloatWA}
        onChange={(v) => setTweak('showFloatWA', v)}
      />
      <TweakToggle
        label="Seção de artigos / blog"
        value={t.showArticles}
        onChange={(v) => setTweak('showArticles', v)}
      />
      <TweakToggle
        label="Toque lavanda nas ilustrações"
        value={t.showLavender}
        onChange={(v) => setTweak('showLavender', v)}
      />
    </TweaksPanel>
  );
};

const __jbroot = document.createElement('div');
document.body.appendChild(__jbroot);
ReactDOM.createRoot(__jbroot).render(<JBTweaksApp />);