/* SomosWeCheck — Tweaks island (mounts its own React root) */
const { useEffect } = React;

const SWC_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "a",
  "media": "video",
  "accent": "#22d3a8",
  "font": "modern"
}/*EDITMODE-END*/;

// pick readable ink color for a given accent
function inkFor(hex) {
  const c = hex.replace('#', '');
  const r = parseInt(c.substr(0, 2), 16) / 255;
  const g = parseInt(c.substr(2, 2), 16) / 255;
  const b = parseInt(c.substr(4, 2), 16) / 255;
  const lin = (v) => (v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const L = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
  return L > 0.45 ? '#04140f' : '#ffffff';
}

function SWCTweaks() {
  const [t, setTweak] = useTweaks(SWC_DEFAULTS);

  useEffect(() => { document.body.setAttribute('data-hero', t.hero); }, [t.hero]);
  useEffect(() => { document.body.setAttribute('data-media', t.media); }, [t.media]);
  useEffect(() => { document.documentElement.setAttribute('data-font', t.font); }, [t.font]);
  useEffect(() => {
    const root = document.documentElement.style;
    root.setProperty('--accent', t.accent);
    root.setProperty('--accent-ink', inkFor(t.accent));
  }, [t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio label="Dirección" value={t.hero}
        options={[{ value: 'a', label: 'Dividido' }, { value: 'b', label: 'Centrado' }]}
        onChange={(v) => setTweak('hero', v)} />
      <TweakRadio label="Medio" value={t.media}
        options={[{ value: 'video', label: 'Video' }, { value: 'image', label: 'Imagen' }]}
        onChange={(v) => setTweak('media', v)} />

      <TweakSection label="Color" />
      <TweakColor label="Acento" value={t.accent}
        options={['#22d3a8', '#3b82f6', '#34d399', '#f59e0b', '#8b5cf6']}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Tipografía" />
      <TweakRadio label="Pareja" value={t.font}
        options={[{ value: 'modern', label: 'Geométrica' }, { value: 'tech', label: 'Técnica' }]}
        onChange={(v) => setTweak('font', v)} />
    </TweaksPanel>
  );
}

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