/* Tweaks de AstraOps — tres controles expresivos que remodelan el carácter
   de la página: acento de color, voz de marca (titular + entradilla) y
   atmósfera del hero (densidad estelar, rejilla, viñeta y glow). */
const OPS_TWEAK_DEFAULTS = {
  accent: "Cian",
  voice: "Ingeniería",
  atmosphere: "Equilibrado"
};

const OPS_PAL = { "Azul eléctrico": "blue", "Violeta": "violet", "Cian": "cyan" };

const OPS_VOICE = {
  "Ingeniería": {
    h: 'Procesos sin fricción.<br>Operaciones <span class="hl">sin margen para el fallo.</span>',
    p: 'Automatizamos la arquitectura interna de su empresa con la misma tolerancia al error que aplica la industria aeroespacial: exactamente cero. Cada proceso que hoy se ejecuta a mano es una fuga de capital cuantificable.'
  },
  "Negocio": {
    h: 'Cada tarea manual<br>es <span class="hl">capital que se evapora.</span>',
    p: 'Sus equipos dedican horas a procesos repetitivos que un sistema ejecuta en segundos y sin error. Recuperamos ese tiempo, lo convertimos en margen y le devolvemos una operación que trabaja sola, 24/7.'
  },
  "Órbita": {
    h: 'Elevamos su operación<br>a <span class="hl">la perspectiva orbital.</span>',
    p: 'Desde el suelo, el caos operativo parece irresoluble. Desde la órbita, solo existen líneas de flujo perfectas. Construimos la infraestructura que mantiene su empresa ahí arriba, en trayectoria estable y sin intervención.'
  }
};

const OPS_ATMOS = { "Sereno": "atmos-calm", "Equilibrado": "atmos-balanced", "Cinemático": "atmos-cinematic" };

function OpsTweaks() {
  const [t, setTweak] = useTweaks(OPS_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', OPS_PAL[t.accent] || 'cyan');
  }, [t.accent]);

  React.useEffect(() => {
    const v = OPS_VOICE[t.voice] || OPS_VOICE["Ingeniería"];
    const h = document.getElementById('ops-h1');
    const p = document.getElementById('ops-sub');
    if (h) h.innerHTML = v.h;
    if (p) p.textContent = v.p;
  }, [t.voice]);

  React.useEffect(() => {
    const cls = OPS_ATMOS[t.atmosphere] || 'atmos-balanced';
    document.body.classList.remove('atmos-calm', 'atmos-balanced', 'atmos-cinematic');
    document.body.classList.add(cls);
    // re-siembra el campo estelar para que la densidad cambie al instante
    if (window.AstraHero && window.AstraHero.reseed) window.AstraHero.reseed();
  }, [t.atmosphere]);

  return (
    <TweaksPanel title="Tweaks · AstraOps">
      <TweakSection label="Acento operativo" />
      <TweakRadio label="Color de sistema" value={t.accent}
        options={["Cian", "Azul eléctrico", "Violeta"]}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Voz de marca" />
      <TweakRadio label="Registro del mensaje" value={t.voice}
        options={["Ingeniería", "Negocio", "Órbita"]}
        onChange={(v) => setTweak('voice', v)} />

      <TweakSection label="Atmósfera del hero" />
      <TweakRadio label="Intensidad ambiental" value={t.atmosphere}
        options={["Sereno", "Equilibrado", "Cinemático"]}
        onChange={(v) => setTweak('atmosphere', v)} />
    </TweaksPanel>
  );
}

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