/* Tweaks de Somos Astra — aplica dirección de color, tipografía,
   titular del hero y movimiento de fondo en vivo. */
const TWEAK_DEFAULTS = {
  palette: "Cian",
  type: "Técnica",
  headline: "Caos → sistema",
  bgMotion: true
};

const PAL = { "Azul eléctrico": "blue", "Violeta": "violet", "Cian": "cyan" };
const TYPE = { "Técnica": "tech", "Editorial": "editorial", "Grotesk": "grotesk" };
const HEADLINES = {
  "Órbita": 'La infraestructura que lleva<br><span class="hl">su empresa a órbita.</span>',
  "Precisión": 'Automatización con<br><span class="hl">tolerancia cero al error.</span>',
  "Caos → sistema": 'Convertimos su caos operativo<br>en <span class="hl">sistemas de precisión.</span>'
};

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

  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', PAL[t.palette] || 'blue');
  }, [t.palette]);
  React.useEffect(() => {
    document.documentElement.setAttribute('data-type', TYPE[t.type] || 'tech');
  }, [t.type]);
  React.useEffect(() => {
    const h = document.getElementById('hero-h1');
    if (h) h.innerHTML = HEADLINES[t.headline] || HEADLINES["Órbita"];
  }, [t.headline]);
  React.useEffect(() => {
    document.body.classList.toggle('fx-off', !t.bgMotion);
  }, [t.bgMotion]);

  return (
    <TweaksPanel title="Tweaks · Astra">
      <TweakSection label="Dirección de color" />
      <TweakRadio label="Paleta" value={t.palette}
        options={["Azul eléctrico", "Violeta", "Cian"]}
        onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="Tipografía" />
      <TweakRadio label="Sistema" value={t.type}
        options={["Técnica", "Editorial", "Grotesk"]}
        onChange={(v) => setTweak('type', v)} />

      <TweakSection label="Hero" />
      <TweakSelect label="Titular" value={t.headline}
        options={["Órbita", "Precisión", "Caos → sistema"]}
        onChange={(v) => setTweak('headline', v)} />

      <TweakSection label="Movimiento" />
      <TweakToggle label="Campo estelar animado" value={t.bgMotion}
        onChange={(v) => setTweak('bgMotion', v)} />
    </TweaksPanel>
  );
}

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