// tweaks-app.jsx — global look controls for the EBBranding page.
// Writes CSS custom properties on :root so the whole page re-themes live.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ff6600",
  "bg": "warm",
  "displayFont": "'STIX Two Text', Georgia, serif",
  "motion": true,
  "numStyle": "outline"
}/*EDITMODE-END*/;

const BG_PRESETS = {
  warm:  { bg: "#0c0a09", bgAlt: "#100d0b", surface: "#16130f", surface2: "#1e1a15" },
  cool:  { bg: "#08090c", bgAlt: "#0b0d11", surface: "#0f1318", surface2: "#161b22" },
  brown: { bg: "#0e0907", bgAlt: "#130b08", surface: "#1a110c", surface2: "#241710" },
  black: { bg: "#050505", bgAlt: "#0a0a0a", surface: "#111111", surface2: "#1a1a1a" },
};

// Derive a darker "ink" for text that sits on the accent fill.
function inkFor(hex) {
  const h = hex.replace('#', '');
  const r = parseInt(h.substring(0,2),16), g = parseInt(h.substring(2,4),16), b = parseInt(h.substring(4,6),16);
  const lum = (0.299*r + 0.587*g + 0.114*b) / 255;
  return lum > 0.62 ? '#1a0d04' : '#fffaf5';
}
function lighten(hex, amt) {
  const h = hex.replace('#', '');
  let r = parseInt(h.substring(0,2),16), g = parseInt(h.substring(2,4),16), b = parseInt(h.substring(4,6),16);
  r = Math.min(255, Math.round(r + (255-r)*amt));
  g = Math.min(255, Math.round(g + (255-g)*amt));
  b = Math.min(255, Math.round(b + (255-b)*amt));
  return '#' + [r,g,b].map(v => v.toString(16).padStart(2,'0')).join('');
}
function rgba(hex, a) {
  const h = hex.replace('#', '');
  const r = parseInt(h.substring(0,2),16), g = parseInt(h.substring(2,4),16), b = parseInt(h.substring(4,6),16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    // Accent
    r.setProperty('--accent', t.accent);
    r.setProperty('--accent-2', lighten(t.accent, 0.22));
    r.setProperty('--accent-ink', inkFor(t.accent));
    r.setProperty('--accent-soft', rgba(t.accent, 0.14));
    // Background tone
    const p = BG_PRESETS[t.bg] || BG_PRESETS.warm;
    r.setProperty('--bg', p.bg);
    r.setProperty('--bg-alt', p.bgAlt);
    r.setProperty('--surface', p.surface);
    r.setProperty('--surface-2', p.surface2);
    // Display font
    r.setProperty('--font-display', t.displayFont);
    // Motion
    document.querySelectorAll('.marquee').forEach(m => {
      m.style.animationPlayState = t.motion ? 'running' : 'paused';
    });
    // Graphic elements
    document.body.classList.toggle('num-filled', t.numStyle === 'filled');
  }, [t]);

  return (
    <TweaksPanel title="Ajustes">
      <TweakSection label="Cor de destaque" />
      <TweakColor label="Acento" value={t.accent}
        options={['#ff6600', '#e8483b', '#d98e2b', '#3b82f6', '#8b5cf6', '#1f8a5b']}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Fundo" />
      <TweakSelect label="Tom" value={t.bg}
        options={[
          { value: 'warm',  label: 'Preto quente' },
          { value: 'cool',  label: 'Preto frio' },
          { value: 'brown', label: 'Marrom profundo' },
          { value: 'black', label: 'Preto puro' },
        ]}
        onChange={(v) => setTweak('bg', v)} />

      <TweakSection label="Tipografia dos títulos" />
      <TweakSelect label="Fonte" value={t.displayFont}
        options={[
          { value: "'STIX Two Text', Georgia, serif", label: 'STIX Two Text (serifada)' },
          { value: "'DM Sans', system-ui, sans-serif", label: 'DM Sans (sem serifa)' },
        ]}
        onChange={(v) => setTweak('displayFont', v)} />

      <TweakSection label="Animação" />
      <TweakToggle label="Carrossel de logos em movimento" value={t.motion}
        onChange={(v) => setTweak('motion', v)} />

      <TweakSection label="Elementos gráficos" />
      <TweakRadio label="Estilo dos números" value={t.numStyle}
        options={[{ value: 'outline', label: 'Contorno' }, { value: 'filled', label: 'Preenchido' }]}
        onChange={(v) => setTweak('numStyle', v)} />
    </TweaksPanel>
  );
}

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