// OBPC — Section Versículos
const { useState: useStateV, useEffect: useEffectV } = React;

const VERSICULOS = [
  { ref: "Marcos 16:15", tema: "A Grande Comissão", texto: "Ide por todo o mundo e pregai o evangelho a toda criatura." },
  { ref: "Atos 1:8", tema: "Poder do Espírito", texto: "Recebereis a virtude do Espírito Santo e ser-me-eis testemunhas até os confins da terra." },
  { ref: "João 14:6", tema: "O Caminho", texto: "Eu sou o caminho, e a verdade, e a vida; ninguém vem ao Pai, senão por mim." },
  { ref: "Salmos 133:1", tema: "Unidade", texto: "Oh! quão bom e quão suave é que os irmãos vivam em união!" },
  { ref: "Isaías 61:1", tema: "Unção", texto: "O Espírito do Senhor Deus está sobre mim, porque o Senhor me ungiu." },
  { ref: "2 Crônicas 7:14", tema: "Avivamento", texto: "Se o meu povo se humilhar... eu ouvirei dos céus e sararei a sua terra." },
];

const SectionVersiculos = ({ palette }) => {
  const [active, setActive] = useStateV(0);
  const [userPaused, setUserPaused] = useStateV(() => {
    try { return window.matchMedia("(prefers-reduced-motion: reduce)").matches; } catch (e) { return false; }
  });
  const [hovering, setHovering] = useStateV(false);
  const [focusing, setFocusing] = useStateV(false);
  const running = !userPaused && !hovering && !focusing;
  useEffectV(() => {
    if (!running) return undefined;
    const t = setInterval(() => setActive(a => (a + 1) % VERSICULOS.length), 6000);
    return () => clearInterval(t);
  }, [running]);
  const v = VERSICULOS[active];
  return (
    <section id="versiculos" className="obpc-section obpc-section--verses" style={{ background: palette.bg, color: palette.fg, position: "relative", overflow: "hidden" }}>
      <div className="obpc-sec-head">
        <span className="obpc-sec-kicker" style={{ color: palette.muted }}>Versículos que nos sustentam</span>
      </div>

      <div
        className="obpc-verses-wrap"
        onMouseEnter={() => setHovering(true)}
        onMouseLeave={() => setHovering(false)}
        onFocus={(e) => { try { if (e.target.matches(":focus-visible")) setFocusing(true); } catch (err) { setFocusing(true); } }}
        onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setFocusing(false); }}
      >
        <div className="obpc-verses-stage">
          <div className="obpc-verses-quote-mark" style={{ color: `${palette.accent}22` }}>"</div>
          <div className="obpc-verses-tema" style={{ color: palette.accent }}>{v.tema}</div>
          <blockquote key={active} className="obpc-verses-text" aria-live={running ? "off" : "polite"}>
            {v.texto}
          </blockquote>
          <div className="obpc-verses-ref" style={{ borderColor: `${palette.accent}44` }}>
            <span style={{ color: palette.muted }}>—</span>
            <strong>{v.ref}</strong>
          </div>
        </div>

        <div className="obpc-verses-list">
          {VERSICULOS.map((vv, i) => (
            <button
              key={i}
              type="button"
              aria-pressed={active === i}
              className={`obpc-verses-chip ${active === i ? "is-active" : ""}`}
              onClick={() => setActive(i)}
              style={{
                borderColor: active === i ? palette.accent : `${palette.fg}22`,
                color: active === i ? palette.fg : palette.muted,
                background: active === i ? `${palette.accent}12` : "transparent",
              }}
            >
              <span className="obpc-verses-chip-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="obpc-verses-chip-ref">{vv.ref}</span>
            </button>
          ))}
        </div>
      </div>

      <button
        type="button"
        className="obpc-verses-pause"
        onClick={() => setUserPaused(p => !p)}
        aria-pressed={userPaused}
        style={{ color: palette.muted, borderColor: `${palette.fg}33` }}
      >
        {userPaused ? "Retomar troca automática" : "Pausar troca automática"}
      </button>
    </section>
  );
};

Object.assign(window, { SectionVersiculos });