// faq-tweaks.jsx — Three expressive controls that reshape the feel of the FAQ
// Mood (palette) · Density (rhythm) · Voice (Q/A treatment)

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "editorial",
  "density": "conversacion",
  "voice": "pregunta"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    document.body.dataset.faqMood    = t.mood;
    document.body.dataset.faqDensity = t.density;
    document.body.dataset.faqVoice   = t.voice;
  }, [t]);

  return (
    <TweaksPanel title="Atmósfera · Densidad · Voz">
      <TweakSection label="Atmósfera">
        <TweakRadio
          label="Paleta"
          value={t.mood}
          onChange={v => setTweak('mood', v)}
          options={[
            { value: 'editorial',  label: 'Editorial' },
            { value: 'crepusculo', label: 'Crepúsculo' },
            { value: 'manuscrito', label: 'Manuscrito' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Densidad">
        <TweakRadio
          label="Cómo respiran"
          value={t.density}
          onChange={v => setTweak('density', v)}
          options={[
            { value: 'conversacion', label: 'Conversación' },
            { value: 'indice',       label: 'Índice' },
            { value: 'expediente',   label: 'Expediente' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Voz">
        <TweakRadio
          label="Lectura Q/R"
          value={t.voice}
          onChange={v => setTweak('voice', v)}
          options={[
            { value: 'pregunta', label: 'Pregunta sola' },
            { value: 'dialogo',  label: 'Diálogo P/R' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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