/* ============================================================
   TU YOGA ONCOLÓGICO — Tweaks panel (React, panel only)
   El sitio es HTML/CSS vanilla; este panel sólo aplica ajustes
   al documento (data-dir, variables CSS, imagen del hero).
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direccion": "sereno",
  "heroFoto": "montana",
  "formaBoton": "recto",
  "acento": "auto",
  "animaciones": true
}/*EDITMODE-END*/;

const HERO_FOTOS = {
  montana:    "assets/img/hero-montana.webp",
  jungla:     "assets/img/jungla.webp",
  playaBack:  "assets/img/beach-backbend.webp",
  meditacion: "assets/img/beach-medita.webp"
};

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

  // Dirección visual
  React.useEffect(() => {
    document.body.setAttribute('data-dir', t.direccion);
  }, [t.direccion]);

  // Foto del hero
  React.useEffect(() => {
    const el = document.getElementById('heroBg');
    if (el && HERO_FOTOS[t.heroFoto]) el.style.backgroundImage = "url('" + HERO_FOTOS[t.heroFoto] + "')";
  }, [t.heroFoto]);

  // Forma de botón
  React.useEffect(() => {
    document.body.setAttribute('data-btn', t.formaBoton);
  }, [t.formaBoton]);

  // Acento (override opcional)
  React.useEffect(() => {
    const b = document.body;
    if (t.acento === 'auto') {
      b.style.removeProperty('--accent');
    } else {
      b.style.setProperty('--accent', t.acento);
    }
  }, [t.acento]);

  // Animaciones al hacer scroll
  React.useEffect(() => {
    if (!t.animaciones) {
      document.querySelectorAll('.reveal').forEach((el) => el.classList.add('in'));
      document.body.setAttribute('data-noanim', '1');
    } else {
      document.body.removeAttribute('data-noanim');
    }
  }, [t.animaciones]);

  return (
    <TweaksPanel title="Tweaks · TYO">
      <TweakSection label="Dirección visual" />
      <TweakRadio
        label="Estilo"
        value={t.direccion}
        options={[
          { value: 'sereno', label: 'Sereno' },
          { value: 'soleado', label: 'Soleado' },
          { value: 'bosque', label: 'Bosque' }
        ]}
        onChange={(v) => setTweak('direccion', v)}
      />
      <p style={{ fontSize: '10.5px', lineHeight: 1.45, color: 'rgba(41,38,27,.55)', margin: '2px 0 0' }}>
        {t.direccion === 'sereno' && 'Editorial, crema + verde Woodman, serif Newsreader.'}
        {t.direccion === 'soleado' && 'Luminoso, acentos Rayo de Sol, sans moderno y redondeado.'}
        {t.direccion === 'bosque' && 'Verde inmersivo, serif Spectral, ánimo natural y dramático.'}
      </p>

      <TweakSection label="Hero" />
      <TweakSelect
        label="Fotografía"
        value={t.heroFoto}
        options={[
          { value: 'montana', label: 'Amanecer en la montaña' },
          { value: 'jungla', label: 'Brazos al cielo / jungla' },
          { value: 'playaBack', label: 'Extensión en la playa' },
          { value: 'meditacion', label: 'Meditación frente al mar' }
        ]}
        onChange={(v) => setTweak('heroFoto', v)}
      />

      <TweakSection label="Forma de botón" />
      <TweakRadio
        label="Esquinas"
        value={t.formaBoton}
        options={[
          { value: 'recto', label: 'Recto' },
          { value: 'suave', label: 'Suave' },
          { value: 'redondo', label: 'Redondo' },
          { value: 'capsula', label: 'Cápsula' }
        ]}
        onChange={(v) => setTweak('formaBoton', v)}
      />

      <TweakSection label="Color de acento" />
      <TweakColor
        label="Acento"
        value={t.acento}
        options={['auto', '#AF7A1F', '#F8C558', '#8EA855', '#4D5D2A']}
        onChange={(v) => setTweak('acento', v)}
      />
      <p style={{ fontSize: '10.5px', lineHeight: 1.45, color: 'rgba(41,38,27,.55)', margin: '2px 0 0' }}>
        «auto» usa el acento propio de cada dirección.
      </p>

      <TweakSection label="Movimiento" />
      <TweakToggle
        label="Animaciones al hacer scroll"
        value={t.animaciones}
        onChange={(v) => setTweak('animaciones', v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const mount = document.createElement('div');
  mount.id = 'tweaks-root';
  document.body.appendChild(mount);
  ReactDOM.createRoot(mount).render(<TweaksApp />);
})();