/* Tweaks — ajustes ao vivo do site Impacto */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "Escuro",
  "accent": ["#45D4E0", "#6FE9DE", "#3B6FD4"],
  "depth": "Profundo",
  "h1a": "Inteligência Artificial aplicada que gera",
  "h1b": "impacto real",
  "h1c": "no seu negócio.",
  "animations": true
}/*EDITMODE-END*/;

const DEPTHS = {
  "Profundo": "#160B3E",
  "Meia-noite": "#0C0524",
  "Índigo": "#1C1149"
};

function ImpactoTweaks() {
  const initialTheme = (typeof window.__getTheme === 'function' && window.__getTheme() === 'light') ? 'Claro' : 'Escuro';
  const [t, setTweak] = useTweaks({ ...TWEAK_DEFAULTS, theme: initialTheme });

  // theme
  React.useEffect(() => {
    if (window.__setTheme) window.__setTheme(t.theme === 'Claro' ? 'light' : 'dark');
  }, [t.theme]);

  // colors + depth + animations
  React.useEffect(() => {
    const root = document.documentElement;
    const a = Array.isArray(t.accent) ? t.accent : TWEAK_DEFAULTS.accent;
    const isLight = t.theme === 'Claro';
    if (!isLight) {
      root.style.setProperty('--teal-bright', a[0]);
      root.style.setProperty('--accent', a[0]);
      root.style.setProperty('--teal-soft', a[1]);
      root.style.setProperty('--accent-2', a[2]);
      root.style.setProperty('--navy-800', DEPTHS[t.depth] || DEPTHS.Profundo);
    } else {
      // let light-mode stylesheet own the palette
      ['--teal-bright','--accent','--teal-soft','--accent-2','--navy-800'].forEach(function(v){ root.style.removeProperty(v); });
    }
    document.body.classList.toggle('anim-off', !t.animations);
    if (window.__logoAnim) { try { t.animations ? window.__logoAnim.play() : window.__logoAnim.pause(); } catch(e){} }
  }, [t.accent, t.depth, t.animations, t.theme]);

  React.useEffect(() => {
    var lang = (window.__getLang && window.__getLang()) || 'pt';
    if (lang !== 'pt') return; // don't stomp a translated headline
    const h1 = document.querySelector('.hero h1');
    if (!h1) return;
    const esc = (s) => String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    h1.innerHTML = esc(t.h1a) + ' <span class="grad-text">' + esc(t.h1b) + '</span> ' + esc(t.h1c);
  }, [t.h1a, t.h1b, t.h1c]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tema" />
      <TweakRadio label="Aparência" value={t.theme}
        options={["Escuro","Claro"]}
        onChange={(v)=>setTweak('theme', v)} />

      <TweakSection label="Cor de destaque" />
      <TweakColor label="Paleta" value={t.accent}
        options={[
          ["#45D4E0","#6FE9DE","#3B6FD4"],
          ["#2BA6B8","#3FD0C9","#2E6FB0"],
          ["#4F8DF5","#7FB0FF","#7A5AE0"],
          ["#34D9C0","#6FE9DE","#2BA6B8"]
        ]}
        onChange={(v)=>setTweak('accent', v)} />
      {t.theme === 'Claro' && <p style={{fontSize:'12px',color:'#8B88AD',margin:'2px 2px 0'}}>A paleta de destaque se aplica no tema escuro.</p>}

      <TweakSection label="Fundo" />
      <TweakRadio label="Profundidade" value={t.depth}
        options={["Profundo","Meia-noite","Índigo"]}
        onChange={(v)=>setTweak('depth', v)} />

      <TweakSection label="Hero" />
      <TweakText label="Título — linha 1" value={t.h1a} onChange={(v)=>setTweak('h1a', v)} />
      <TweakText label="Título — destaque" value={t.h1b} onChange={(v)=>setTweak('h1b', v)} />
      <TweakText label="Título — linha 2" value={t.h1c} onChange={(v)=>setTweak('h1c', v)} />

      <TweakSection label="Movimento" />
      <TweakToggle label="Animações" value={t.animations} onChange={(v)=>setTweak('animations', v)} />
    </TweaksPanel>
  );
}

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