/* TuTesisYA — tweaks controller (palette + hero copy) */

const TWEAK_DEFAULTS = (typeof window !== 'undefined' && window.TWEAKS) || {
  palette: 'crema',
  copy: 'cercano',
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute('data-palette', t.palette || 'crema');
  root.setAttribute('data-copy', t.copy || 'cercano');
}

// apply defaults immediately to avoid flash
applyTweaks(TWEAK_DEFAULTS);

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

  React.useEffect(() => { applyTweaks(t); }, [t.palette, t.copy]);

  // palette swatch trios: bg / accent / ink
  const palettes = [
    ['#faf3e7', '#ee6c4d', '#243245'],  // crema
    ['#f3f1ec', '#ee6c4d', '#243245'],  // marfil
    ['#15202f', '#ee6c4d', '#f4ead8'],  // noche
  ];

  return (
    <TweaksPanel title="Tweaks" noDeckControls>
      <TweakSection label="Paleta" />
      <TweakColor
        label="Color"
        value={palettes[['crema','marfil','noche'].indexOf(t.palette)] || palettes[0]}
        options={palettes}
        onChange={(p) => {
          const idx = palettes.findIndex(x => Array.isArray(x) && x[0] === p[0]);
          const name = ['crema','marfil','noche'][idx] || 'crema';
          setTweak('palette', name);
        }}
      />
      <TweakRadio
        label="Variante"
        value={t.palette}
        options={['crema', 'marfil', 'noche']}
        onChange={(v) => setTweak('palette', v)}
      />

      <TweakSection label="Copy del hero" />
      <TweakRadio
        label="Tono"
        value={t.copy}
        options={[
          { value: 'cercano',      label: 'Cercano' },
          { value: 'directo',      label: 'Directo' },
          { value: 'aspiracional', label: 'Aspiración' },
        ]}
        onChange={(v) => setTweak('copy', v)}
      />
    </TweaksPanel>
  );
}

const tweaksRoot = document.createElement('div');
tweaksRoot.id = 'tweaks-root';
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<TweaksApp />);