/* App — Encuesta de diagnóstico · Impulsores de Allar.ia */

const D = window.ENCUESTA_DATA;
const STORAGE_KEY = "impulsores-encuesta-state-v1";
const THEME_KEY = "impulsores-encuesta-theme";

const EMPTY_ANSWERS = {
  relacion: null,
  frecuencia: null, herramientas: [], usos: [],
  faltas: [],
  vocab: {},          // id -> 0..3
  practicas: [],
  ultimoMes: [],
  trabas: null, prompts: null, compartir: null, tiempo: null, fuentes: [],
  // Bloque 8 · La IA en tu sector (no puntúa)
  sectorAdopcion: null, sectorUsos: [], sectorBloqueo: null, sectorAyuda: [],
  // Capacitación elegida (explorador / navegante / piloto)
  capacitacionElegida: null,
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "allaria",
  "mostrarDatos": true,
  "compacto": false
}/*EDITMODE-END*/;

/* ---------- Puntaje y recomendación ---------- */
function allPracticeItems() {
  return D.practicas.reduce(function (acc, g) { return acc.concat(g.items); }, []);
}

function computeResult(a) {
  var items = allPracticeItems();
  var selected = items.filter(function (it) { return a.practicas.indexOf(it.id) >= 0; });

  var pilotGuns = selected.filter(function (it) { return it.gun === "piloto"; });
  var navGuns = selected.filter(function (it) { return it.gun === "navegante"; });

  var vocabScore = 0;
  Object.keys(a.vocab).forEach(function (k) { vocabScore += a.vocab[k] || 0; });
  var practScore = selected.reduce(function (s, it) { return s + it.weight; }, 0);
  var usageScore = a.ultimoMes.length;
  var score = vocabScore + practScore + usageScore;

  var level, via;
  if (pilotGuns.length > 0) { level = "piloto"; via = "gun"; }
  else if (navGuns.length > 0) { level = "navegante"; via = "gun"; }
  else {
    via = "score";
    level = score >= D.umbrales.piloto ? "piloto" : score >= D.umbrales.navegante ? "navegante" : "explorador";
  }

  return {
    level: level, via: via, score: score,
    vocabScore: vocabScore, practScore: practScore, usageScore: usageScore,
    pilotGuns: pilotGuns, navGuns: navGuns,
  };
}

function joinEs(arr) {
  if (arr.length === 1) return arr[0];
  return arr.slice(0, -1).join(", ") + " y " + arr[arr.length - 1];
}

function buildReason(a, r) {
  if (r.level === "piloto" && r.pilotGuns.length > 0) {
    var p = r.pilotGuns.slice(0, 3).map(function (g) { return g.phrase; });
    return "Marcaste que ya " + joinEs(p) + ". Eso te ubica derecho entre los Pilotos.";
  }
  if (r.level === "navegante" && r.navGuns.length > 0) {
    var n = r.navGuns.slice(0, 3).map(function (g) { return g.phrase; });
    return "Marcaste que ya " + joinEs(n) + ". Eso es terreno de Navegantes.";
  }
  var base = "Entre vocabulario, prácticas y usos del último mes sumaste " + r.score + " puntos. ";
  if (r.level === "piloto") return base + "Vas a fondo: construís y experimentás por tu cuenta.";
  if (r.level === "navegante") return base + "La IA ya es parte de tu rutina y tenés tu propio rumbo.";
  return base + "Estás llegando a la IA con curiosidad. El mejor punto de partida.";
}

function selfLevel(a) {
  return a.relacion === "curioso" ? "explorador" : a.relacion === "usuario" ? "navegante" : a.relacion === "avanzado" ? "piloto" : null;
}

/* ---------- Envío a Apps Script webhook ----------
   Apps Script está deployado con access=ANYONE — cualquier usuario con Google
   session puede submitear. Usamos hidden iframe + form POST tradicional:
   el browser manda las cookies como navegación, no se rompe contra el CORS
   preflight que Apps Script no maneja.

   Fire-and-forget optimista: el iframe es cross-origin y el postMessage de
   confirmación se pierde en algún sandbox/wrapping de googleusercontent — pero
   las filas SÍ aterrizan en la sheet. Asumimos éxito inmediatamente al disparar
   el form (modelo Google Forms). Trade-off: alguien sin Google session ve OK
   sin que se haya enviado, pero para el demo audience interno de Allaria
   todos van a tener session activa. */
function buildSubmission(a, r) {
  var vocabCols = {};
  Object.keys(a.vocab || {}).forEach(function (k) { vocabCols["vocab_" + k] = a.vocab[k]; });
  return Object.assign({
    timestamp: new Date().toISOString(),
    level: r.level,
    score: r.score,
    score_vocab: r.vocabScore,
    score_practicas: r.practScore,
    score_usos: r.usageScore,
    via: r.via,
    relacion: a.relacion || "",
    frecuencia: a.frecuencia || "",
    herramientas: (a.herramientas || []).join(", "),
    usos: (a.usos || []).join(", "),
    faltas: (a.faltas || []).join(", "),
    practicas: (a.practicas || []).join(", "),
    ultimoMes: (a.ultimoMes || []).join(", "),
    trabas: a.trabas || "",
    prompts: a.prompts || "",
    compartir: a.compartir || "",
    tiempo: a.tiempo || "",
    fuentes: (a.fuentes || []).join(", "),
    sector_adopcion: a.sectorAdopcion || "",
    sector_usos: (a.sectorUsos || []).join(", "),
    sector_bloqueo: a.sectorBloqueo || "",
    sector_ayuda: (a.sectorAyuda || []).join(", "),
    capacitacion_elegida: a.capacitacionElegida || "",
  }, vocabCols);
}

function sendResults(a, r) {
  var url = D.webhookUrl;
  if (!url) return;
  var data = buildSubmission(a, r);
  var FRAME_NAME = "encuesta-submit-frame-" + Date.now();

  var iframe = document.createElement("iframe");
  iframe.name = FRAME_NAME;
  iframe.style.display = "none";
  document.body.appendChild(iframe);

  var form = document.createElement("form");
  form.action = url;
  form.method = "POST";
  form.target = FRAME_NAME;
  form.acceptCharset = "utf-8";
  form.enctype = "application/x-www-form-urlencoded";
  form.style.display = "none";
  Object.keys(data).forEach(function (k) {
    var input = document.createElement("input");
    input.type = "hidden";
    input.name = k;
    var v = data[k];
    input.value = v == null ? "" : String(v);
    form.appendChild(input);
  });
  document.body.appendChild(form);
  form.submit();

  // Log opcional si llega el postMessage de confirmación (debug)
  function onMsg(e) {
    if (e && e.data && e.data.source === "encuesta-impulsores") {
      console.log("[encuesta] webhook ack:", e.data);
      window.removeEventListener("message", onMsg);
    }
  }
  window.addEventListener("message", onMsg);

  setTimeout(function () {
    if (form.parentNode) form.parentNode.removeChild(form);
    if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
    window.removeEventListener("message", onMsg);
  }, 12000);
}

/* ---------- Persistencia ---------- */
function loadState() {
  try {
    var raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return null;
    var s = JSON.parse(raw);
    if (s && typeof s.step === "number" && s.answers) {
      s.step = Math.max(0, Math.min(s.step, 12));
      return s;
    }
  } catch (e) {}
  return null;
}

/* ---------- Pantallas ---------- */
function Welcome({ onStart, theme, onSetTheme }) {
  return (
    <div className="hero-screen">
      <span className="hero-topline"></span>
      <div className="hero-controls">
        <ThemeToggle theme={theme} onSet={onSetTheme} />
      </div>
      <div className="hero">
        <span className="hero-eyebrow">Encuesta · 2026</span>
        <h1 className="hero-title">Impulsores<br />de Allar.ia</h1>
        <p className="hero-lead">
          Antes del kick-off queremos entender dónde está parado cada sector con la IA.
          Cinco minutos, anónima, sin respuestas correctas.
        </p>
        <button type="button" className="hero-cta" onClick={onStart}>
          Empezar la encuesta <Icon name="arrow-right" size={18} />
        </button>
        <div className="hero-meta">
          <span><Icon name="lock" size={14} /> 100% anónima</span>
          <span><Icon name="clock" size={14} /> Unos 5 minutos</span>
        </div>
      </div>
    </div>
  );
}

function VocabStep({ group, answers, setVocab }) {
  return (
    <div className="vocab-list">
      {D.vocab[group].map(function (t) {
        return <VocabRow key={t.id} term={t} escala={D.vocabEscala}
                         value={answers.vocab[t.id] != null ? answers.vocab[t.id] : null}
                         onChange={function (v) { setVocab(t.id, v); }} />;
      })}
    </div>
  );
}

function PracticasStep({ answers, set }) {
  return (
    <div className="pract-groups">
      {D.practicas.map(function (g) {
        return (
          <div key={g.group} className="pract-group">
            <h6 className="group-label">{g.group}</h6>
            <CheckList options={g.items} values={answers.practicas}
                       onChange={function (v) { set("practicas", v); }} />
          </div>
        );
      })}
    </div>
  );
}

function Resultado({ answers, onNext }) {
  var r = computeResult(answers);
  var nivel = D.niveles[r.level];
  var self = selfLevel(answers);

  return (
    <div className="result">
      <span className="eyebrow">Según tus respuestas…</span>
      <div className="result-hero" style={{ borderColor: nivel.color }}>
        <span className="result-emoji">{nivel.emoji}</span>
        <div>
          <h2 className="result-name" style={{ color: nivel.color }}>Te imaginamos en {nivel.nombre}</h2>
          <p className="result-tagline">{nivel.tagline}</p>
        </div>
      </div>
      <p className="result-reason">{buildReason(answers, r)}</p>
      {self && self !== r.level ? (
        <p className="result-contrast">
          Vos te describiste más cerca de los {D.niveles[self].nombre}. Ese contraste no está mal: es un buen tema para charlar en la primera reunión.
        </p>
      ) : null}
      <div className="result-note">
        La última palabra la tenés vos: en la primera reunión vas a poder elegir dónde sumarte,
        y siempre podés moverte de grupo después.
      </div>
      <div className="result-levels">
        {["explorador", "navegante", "piloto"].map(function (k) {
          var n = D.niveles[k];
          var on = k === r.level;
          return (
            <div key={k} className={"level-mini" + (on ? " on" : "")} style={on ? { borderColor: n.color } : null}>
              <span className="level-mini-emoji">{n.emoji}</span>
              <span className="level-mini-name">{n.nombre}</span>
              <span className="level-mini-foco">{n.foco}</span>
            </div>
          );
        })}
      </div>
      <div className="result-actions">
        <button type="button" className="btn btn-primary btn-lg" onClick={onNext}>
          Anotate a una capacitación <Icon name="arrow-right" size={15} />
        </button>
      </div>
    </div>
  );
}

/* ---------- Pantalla · Anotate a una capacitación ---------- */
function CapacitacionCard({ levelKey, cap, nivel, selected, recomendado, onSelect }) {
  const [open, setOpen] = useState(false);
  var fecha = cap ? new Date(cap.fechaISO) : null;
  var fechaTxt = fecha ? fecha.toLocaleDateString("es-AR", { weekday: "long", day: "numeric", month: "long" }) : "";
  var horaTxt = fecha ? fecha.toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }) : "";

  return (
    <div className={"cap-card" + (selected ? " on" : "")}
         style={selected ? { borderColor: nivel.color } : null}>
      <button type="button" className="cap-card-head" onClick={function () { onSelect(levelKey); }}>
        <span className="cap-radio" style={selected ? { borderColor: nivel.color, background: nivel.color } : null}>
          {selected ? <Icon name="check" size={12} /> : null}
        </span>
        <span className="cap-emoji">{nivel.emoji}</span>
        <span className="cap-card-text">
          <span className="cap-card-name" style={{ color: nivel.color }}>{nivel.nombre}</span>
          <span className="cap-card-foco">{nivel.foco}</span>
        </span>
        {recomendado ? <span className="cap-badge">Te recomendamos este</span> : null}
      </button>

      {cap ? (
        <div className="cap-card-body">
          <button type="button" className="cap-detail-toggle" onClick={function () { setOpen(!open); }}>
            <Icon name={open ? "chevron-up" : "chevron-down"} size={14} />
            {open ? "Ocultar invitación" : "Ver invitación"}
          </button>
          {open ? (
            <div className="cap-detail">
              <div className="cap-detail-row"><Icon name="calendar" size={14} /> <span style={{ textTransform: "capitalize" }}>{fechaTxt}</span></div>
              <div className="cap-detail-row"><Icon name="clock" size={14} /> {horaTxt} hs</div>
              <p className="cap-detail-desc">{cap.descripcion}</p>
            </div>
          ) : null}
          <div className="cap-card-actions">
            <a className="btn btn-ghost btn-sm" href={D.gcalUrl(cap)} target="_blank" rel="noopener noreferrer">
              <Icon name="calendar" size={14} /> Agregar a Google Calendar
            </a>
            <a className="btn btn-primary btn-sm" href={cap.meetUrl} target="_blank" rel="noopener noreferrer">
              <Icon name="video" size={14} /> Unirse al Meet
            </a>
          </div>
        </div>
      ) : null}
    </div>
  );
}

function Capacitacion({ answers, set, onRestart }) {
  const [sent, setSent] = useState(false);
  var r = computeResult(answers);
  var recomendado = r.level;

  if (sent) {
    return (
      <div className="welcome">
        <div className="sent-check"><Icon name="check" size={28} /></div>
        <h1 className="welcome-title">¡Gracias!</h1>
        <p className="welcome-lead">
          Tus respuestas quedaron registradas de forma anónima y te esperamos en la capacitación.
          Si agregaste el evento a tu calendario, ahí tenés el link del Meet. ¡Nos vemos!
        </p>
        <button type="button" className="btn btn-ghost" onClick={onRestart}>
          <Icon name="rotate-ccw" size={15} /> Responder de nuevo
        </button>
      </div>
    );
  }

  var elegida = answers.capacitacionElegida;

  return (
    <div className="result">
      <span className="eyebrow">Antes de enviar…</span>
      <h2 className="cap-title">Anotate a nuestra capacitación</h2>
      <p className="cap-lead">Escogé el nivel que más se adapte a tus conocimientos. Te dejamos pre-seleccionado el que sugiere tu resultado, pero podés elegir el que quieras.</p>

      <div className="cap-list">
        {["explorador", "navegante", "piloto"].map(function (k) {
          return (
            <CapacitacionCard key={k} levelKey={k} cap={D.capacitaciones[k]} nivel={D.niveles[k]}
                              selected={elegida === k} recomendado={k === recomendado}
                              onSelect={function (lv) { set("capacitacionElegida", lv); }} />
          );
        })}
      </div>

      <div className="result-actions">
        <button type="button" className="btn btn-primary btn-lg" disabled={!elegida}
                onClick={function () { sendResults(answers, r); setSent(true); }}>
          <Icon name="send" size={15} /> Enviar respuestas
        </button>
        {!elegida ? <p className="cap-hint">Elegí un nivel para enviar tus respuestas.</p> : null}
      </div>
    </div>
  );
}

/* ---------- App ---------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const saved = useRef(loadState());
  const [step, setStep] = useState(saved.current ? saved.current.step : 0);
  const [answers, setAnswers] = useState(saved.current ? Object.assign({}, EMPTY_ANSWERS, saved.current.answers) : EMPTY_ANSWERS);
  const [theme, setTheme] = useState(function () {
    try {
      var saved = localStorage.getItem(THEME_KEY);
      if (saved === "light" || saved === "dark" || saved === "system") return saved;
    } catch (e) {}
    return "light";
  });

  useEffect(function () {
    document.documentElement.setAttribute("data-brand", t.brand);
  }, [t.brand]);

  /* Theme: aplica light/dark/system + escucha cambios del sistema cuando theme=system */
  useEffect(function () {
    function effective() {
      if (theme === "dark") return "dark";
      if (theme === "light") return "light";
      return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
    }
    function apply() {
      if (effective() === "dark") document.documentElement.setAttribute("data-theme", "dark");
      else document.documentElement.removeAttribute("data-theme");
    }
    apply();
    try { localStorage.setItem(THEME_KEY, theme); } catch (e) {}
    if (theme === "system" && window.matchMedia) {
      var mq = window.matchMedia("(prefers-color-scheme: dark)");
      var handler = function () { apply(); };
      if (mq.addEventListener) mq.addEventListener("change", handler);
      else if (mq.addListener) mq.addListener(handler);
      return function () {
        if (mq.removeEventListener) mq.removeEventListener("change", handler);
        else if (mq.removeListener) mq.removeListener(handler);
      };
    }
  }, [theme]);

  useEffect(function () {
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify({ step: step, answers: answers })); } catch (e) {}
  }, [step, answers]);

  function set(key, value) {
    setAnswers(function (prev) {
      var next = Object.assign({}, prev);
      next[key] = value;
      return next;
    });
  }
  function setVocab(id, v) {
    setAnswers(function (prev) {
      var vocab = Object.assign({}, prev.vocab);
      vocab[id] = v;
      return Object.assign({}, prev, { vocab: vocab });
    });
  }
  function restart() {
    setAnswers(EMPTY_ANSWERS);
    setStep(0);
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify({ step: 0, answers: EMPTY_ANSWERS })); } catch (e) {}
  }

  var steps = [
    { id: "welcome" },
    {
      id: "b1", bloque: "Bloque 1 · Cómo me siento con la IA",
      title: "¿Cómo describirías tu relación con la IA hoy?",
      lead: "Una sola opción: la que más se parezca a tu momento actual.",
      fact: D.facts.b1, valid: function () { return !!answers.relacion; },
      render: function () { return <OptionList options={D.relacion} value={answers.relacion} onChange={function (v) { set("relacion", v); }} />; },
    },
    {
      id: "b2", bloque: "Bloque 2 · Qué hago en la práctica",
      title: "Tu uso real de la IA",
      fact: D.facts.b2, valid: function () { return !!answers.frecuencia; },
      render: function () {
        return (
          <div className="stack">
            <div className="sub-q">
              <h5 className="sub-q-title">¿Con qué frecuencia usás herramientas de IA?</h5>
              <ChipGroup options={D.frecuencia.map(function (o) { return o; })} values={answers.frecuencia ? [answers.frecuencia] : []}
                         onChange={function (v) { set("frecuencia", v.length ? v[v.length - 1] : null); }} />
            </div>
            <div className="sub-q">
              <h5 className="sub-q-title">¿Cuáles usaste? <span className="hint-inline">Todas las que apliquen</span></h5>
              <ChipGroup options={D.herramientas} values={answers.herramientas} onChange={function (v) { set("herramientas", v); }} />
            </div>
            <div className="sub-q">
              <h5 className="sub-q-title">¿Para qué las usás en el trabajo? <span className="hint-inline">Todas las que apliquen</span></h5>
              <ChipGroup options={D.usos} values={answers.usos} onChange={function (v) { set("usos", v); }} />
            </div>
          </div>
        );
      },
    },
    {
      id: "b3", bloque: "Bloque 3 · Qué me falta o me frena",
      title: "¿Qué sentís que te falta para usar mejor la IA en tu sector?",
      lead: "Podés marcar varias.",
      fact: D.facts.b3, valid: function () { return true; },
      render: function () { return <CheckList options={D.faltas} values={answers.faltas} onChange={function (v) { set("faltas", v); }} />; },
    },
    {
      id: "v1", bloque: "Bloque 4 · Vocabulario (1 de 3)",
      title: "¿Qué tan familiares te resultan estos términos?",
      lead: "Lo básico primero. Sin culpa: \u201cni idea\u201d es una respuesta perfectamente válida.",
      fact: D.facts.v1, valid: function () { return true; },
      render: function () { return <VocabStep group="basico" answers={answers} setVocab={setVocab} />; },
    },
    {
      id: "v2", bloque: "Bloque 4 · Vocabulario (2 de 3)",
      title: "Subimos un escalón",
      fact: D.facts.v2, valid: function () { return true; },
      render: function () { return <VocabStep group="intermedio" answers={answers} setVocab={setVocab} />; },
    },
    {
      id: "v3", bloque: "Bloque 4 · Vocabulario (3 de 3)",
      title: "Los términos de quienes construyen",
      fact: D.facts.v3, valid: function () { return true; },
      render: function () { return <VocabStep group="avanzado" answers={answers} setVocab={setVocab} />; },
    },
    {
      id: "b6", bloque: "Bloque 5 · Prácticas concretas",
      title: "Marcá todo lo que hayas hecho alguna vez",
      fact: D.facts.b6, valid: function () { return true; },
      render: function () { return <PracticasStep answers={answers} set={set} />; },
    },
    {
      id: "b7", bloque: "Bloque 6 · Uso del último mes",
      title: "¿Para qué usaste IA en las últimas 4 semanas?",
      lead: "Todas las que apliquen.",
      fact: D.facts.b7, valid: function () { return true; },
      render: function () { return <CheckList columns={2} options={D.ultimoMes} values={answers.ultimoMes} onChange={function (v) { set("ultimoMes", v); }} />; },
    },
    {
      id: "b8", bloque: "Bloque 7 · Comportamiento",
      title: "Últimas cinco, cortitas",
      fact: D.facts.b8,
      valid: function () { return !!(answers.trabas && answers.prompts && answers.compartir && answers.tiempo); },
      render: function () {
        function single(key, options) {
          return <ChipGroup options={options} values={answers[key] ? [answers[key]] : []}
                            onChange={function (v) { set(key, v.length ? v[v.length - 1] : null); }} />;
        }
        return (
          <div className="stack">
            <div className="sub-q"><h5 className="sub-q-title">Cuando te trabás con una herramienta de IA, ¿qué hacés?</h5>{single("trabas", D.comportamiento.trabas)}</div>
            <div className="sub-q"><h5 className="sub-q-title">¿Tenés prompts guardados que reusás?</h5>{single("prompts", D.comportamiento.prompts)}</div>
            <div className="sub-q"><h5 className="sub-q-title">¿Compartís tus hallazgos con compañeros?</h5>{single("compartir", D.comportamiento.compartir)}</div>
            <div className="sub-q"><h5 className="sub-q-title">Tiempo por semana explorando herramientas nuevas</h5>{single("tiempo", D.comportamiento.tiempo)}</div>
            <div className="sub-q">
              <h5 className="sub-q-title">¿De dónde te informás sobre IA? <span className="hint-inline">Todas las que apliquen</span></h5>
              <ChipGroup options={D.comportamiento.fuentes} values={answers.fuentes} onChange={function (v) { set("fuentes", v); }} />
            </div>
          </div>
        );
      },
    },
    {
      id: "b9", bloque: "Bloque 8 · La IA en tu sector",
      title: "Por último: ¿cómo ves a tu sector con la IA?",
      lead: "Cambiamos el foco. No hablamos de vos ahora, sino del área donde trabajás. Es anónimo: no te pedimos el nombre del sector.",
      fact: null, valid: function () { return !!answers.sectorAdopcion; },
      render: function () {
        return (
          <div className="stack">
            <div className="sub-q">
              <h5 className="sub-q-title">¿Cómo describirías el uso de IA en tu sector hoy?</h5>
              <OptionList options={D.sector.adopcion} value={answers.sectorAdopcion}
                          onChange={function (v) { set("sectorAdopcion", v); }} />
            </div>
            <div className="sub-q">
              <h5 className="sub-q-title">¿En qué se usa la IA en tu sector hoy? <span className="hint-inline">Todas las que apliquen</span></h5>
              <ChipGroup options={D.sector.usos} values={answers.sectorUsos}
                         onChange={function (v) { set("sectorUsos", v); }} />
            </div>
            <div className="sub-q">
              <h5 className="sub-q-title">¿Qué es lo que más le cuesta a tu sector para avanzar?</h5>
              <OptionList options={D.sector.bloqueo} value={answers.sectorBloqueo}
                          onChange={function (v) { set("sectorBloqueo", v); }} />
            </div>
            <div className="sub-q">
              <h5 className="sub-q-title">¿Qué ayuda concreta le vendría bien a tu sector? <span className="hint-inline">Todas las que apliquen</span></h5>
              <ChipGroup options={D.sector.ayuda} values={answers.sectorAyuda}
                         onChange={function (v) { set("sectorAyuda", v); }} />
            </div>
          </div>
        );
      },
    },
    { id: "result" },
    { id: "capacitacion" },
  ];

  var current = steps[step];
  var lastQStep = steps.length - 3;       // índice del último bloque de preguntas (b9)
  var qSteps = lastQStep;                  // cantidad de pantallas de preguntas (sin welcome)
  var isTerminal = current.id === "result" || current.id === "capacitacion";
  var progress = step === 0 ? 0 : isTerminal ? 100 : Math.round((step / (qSteps + 1)) * 100);

  var tweaksPanel = (
      <TweaksPanel>
        <TweakSection label="Marca" />
        <TweakRadio label="Producto" value={t.brand} options={["allaria", "allaria-plus"]}
                    onChange={function (v) { setTweak("brand", v); }} />
        <TweakSection label="Contenido" />
        <TweakToggle label="¿Sabías que…?" value={t.mostrarDatos} onChange={function (v) { setTweak("mostrarDatos", v); }} />
        <TweakToggle label="Modo compacto" value={t.compacto} onChange={function (v) { setTweak("compacto", v); }} />
        <TweakSection label="Demo" />
        <TweakButton label="Reiniciar encuesta" onClick={restart} />
      </TweaksPanel>
  );

  if (current.id === "welcome") {
    return (
      <React.Fragment>
        <Welcome onStart={function () { setStep(1); }} theme={theme} onSetTheme={setTheme} />
        {tweaksPanel}
      </React.Fragment>
    );
  }

  return (
    <div className={"shell" + (t.compacto ? " compacto" : "")}>
      <header className="topbar">
        <div className="topbar-left">
          <BrandLogo brand={t.brand} />
          <span className="topbar-divider"></span>
          <span className="topbar-title">Impulsores de Allar.ia</span>
        </div>
        <div className="topbar-right">
          <button type="button" className="topbar-icon-btn"
                  aria-label="Reiniciar encuesta" title="Reiniciar encuesta"
                  onClick={function () {
                    if (window.confirm("¿Querés borrar tus respuestas y empezar de cero?")) restart();
                  }}>
            <Icon name="rotate-ccw" size={15} />
          </button>
          <ThemeToggle theme={theme} onSet={setTheme} />
          <span className="topbar-step">
            {step === 0 ? "Encuesta anónima" : current.id === "result" ? "Resultado" : current.id === "capacitacion" ? "Capacitación" : current.bloque.split(" · ")[0] + " de 8"}
          </span>
        </div>
      </header>
      <div className="progress-track"><div className="progress-fill" style={{ width: progress + "%" }}></div></div>

      <main className="stage">
        <div className="screen" key={current.id} data-screen-label={current.id}>
          {current.id === "result" ? (
            <React.Fragment>
              <Resultado answers={answers} onNext={function () { setStep(step + 1); }} />
              {t.mostrarDatos ? <FactCard fact={D.facts.result} /> : null}
              <div className="nav-row single">
                <button type="button" className="btn btn-ghost" onClick={function () { setStep(step - 1); }}>
                  <Icon name="arrow-left" size={15} /> Revisar mis respuestas
                </button>
              </div>
            </React.Fragment>
          ) : current.id === "capacitacion" ? (
            <React.Fragment>
              <Capacitacion answers={answers} set={set} onRestart={restart} />
              <div className="nav-row single">
                <button type="button" className="btn btn-ghost" onClick={function () { setStep(step - 1); }}>
                  <Icon name="arrow-left" size={15} /> Volver al resultado
                </button>
              </div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <div className="q-card">
                <span className="eyebrow">{current.bloque}</span>
                <h2 className="q-title">{current.title}</h2>
                {current.lead ? <p className="q-lead">{current.lead}</p> : null}
                <div className="q-body">{current.render()}</div>
                <div className="nav-row">
                  <button type="button" className="btn btn-ghost" onClick={function () { setStep(step - 1); }}>
                    <Icon name="arrow-left" size={15} /> Atrás
                  </button>
                  <button type="button" className="btn btn-primary" disabled={!current.valid()}
                          onClick={function () { setStep(step + 1); }}>
                    {step === lastQStep ? "Ver mi resultado" : "Continuar"} <Icon name="arrow-right" size={15} />
                  </button>
                </div>
              </div>
              {t.mostrarDatos ? <FactCard fact={current.fact} /> : null}
            </React.Fragment>
          )}
        </div>
      </main>

      {tweaksPanel}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);