// ============================================================
// OBPC — Main content sections
// ============================================================

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ---------- Section: O que é a Obra ----------
const SectionObra = ({ palette }) => {
  // Textos editados pelo sistema (página inicial); o que estava escrito aqui é o padrão de fábrica em src/site-padrao.js.
  const S = window.OBPC_SITE;
  const o = S.useSite().inicio.obra;
  const ministerios = window.OBPC_MINISTERIOS_API.useMinisterios(); // null enquanto carrega; só conta o número "ministérios ativos"
  const estadoMinisterios = window.OBPC_MINISTERIOS_API.useEstado();
  const cores = { acento: palette.accent, forte: palette.fg };
  return (
    <section id="obra" className="obpc-section obpc-section--obra" style={{ background: palette.surface, color: palette.fg }}>
      <div className="obpc-sec-head">
        <span className="obpc-sec-num" style={{ color: palette.accent }}>01 /</span>
        <span className="obpc-sec-kicker" style={{ color: palette.muted }}>{o.kicker}</span>
      </div>

      <Reveal>
        <h2 className="obpc-sec-title">
          {S.marcas(o.titulo, cores)}
        </h2>
      </Reveal>

      <div className="obpc-obra-grid">
        <Reveal delay={80}>
          <div className="obpc-obra-col">
            {o.paragrafos.map((p, i) => (
              <p key={i} className="obpc-body" style={{ color: palette.muted }}>{S.marcas(p, cores)}</p>
            ))}
          </div>
        </Reveal>
        <Reveal delay={160}>
          <div className="obpc-obra-quote" style={{ borderColor: palette.accent }}>
            <span className="obpc-quote-mark" style={{ color: palette.accent }}>"</span>
            <p style={{ color: palette.fg }}>
              {S.marcas(o.citacao, cores)}
            </p>
          </div>
        </Reveal>
      </div>

      <Reveal delay={240}>
        <div className="obpc-obra-stats">
          {o.numeros.map((e, i) => (
            <div key={i} className="obpc-stat">
              <div className="obpc-stat-num" style={{ color: i === 0 ? palette.accent : palette.fg }}>{S.numeroDe(e, ministerios, window.OBPC_MOBILE_APP && estadoMinisterios.erro)}</div>
              <div className="obpc-stat-label" style={{ color: palette.muted }}>{e.rotulo}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
};

// ---------- Section: Fundamentos ----------
const FUNDAMENTOS = [
  {
    id: "salvacao",
    title: "Salvação em Jesus Cristo",
    desc: "O evangelho como centro. A cruz como caminho. A graça como fundamento de toda vida cristã.",
    verse: "João 14:6",
  },
  {
    id: "espirito",
    title: "Batismo com o Espírito Santo",
    desc: "Poder do alto para viver, servir e anunciar. A marca pentecostal que acompanha a Obra desde 1955.",
    verse: "Atos 1:8",
  },
  {
    id: "oracao",
    title: "Oração constante",
    desc: "Diálogo íntimo com o Pai. O primeiro movimento antes de qualquer obra, culto ou decisão.",
    verse: "1 Tessalonicenses 5:17",
  },
  {
    id: "palavra",
    title: "Ensino da Palavra",
    desc: "A Bíblia como autoridade. O ensino como prática. Discipulado como compromisso com o crescimento.",
    verse: "2 Timóteo 3:16",
  },
  {
    id: "amor",
    title: "Amor ao próximo",
    desc: "Fé que se manifesta em cuidado. Ações sociais, acolhimento, restauração de famílias e comunidades.",
    verse: "João 13:34",
  },
];

const SectionFundamentos = ({ palette }) => {
  const [active, setActive] = useStateS(0);
  return (
    <section id="fundamentos" className="obpc-section obpc-section--fund" style={{ background: palette.bg, color: palette.fg }}>
      <div className="obpc-sec-head">
        <span className="obpc-sec-num" style={{ color: palette.accent }}>02 /</span>
        <span className="obpc-sec-kicker" style={{ color: palette.muted }}>Fundamentos</span>
      </div>

      <Reveal>
        <h2 className="obpc-sec-title">
          Firmados em princípios bíblicos<br/>
          e na fé <span style={{ color: palette.accent, fontStyle: "italic" }}>pentecostal</span>.
        </h2>
      </Reveal>

      <div className="obpc-fund-wrap">
        <div className="obpc-fund-list">
          {FUNDAMENTOS.map((f, i) => (
            <button
              key={f.id}
              className={`obpc-fund-item ${active === i ? "is-active" : ""}`}
              onClick={() => setActive(i)}
              onMouseEnter={() => setActive(i)}
              style={{
                borderColor: active === i ? palette.accent : `${palette.fg}22`,
                color: active === i ? palette.fg : palette.muted,
              }}
            >
              <span className="obpc-fund-num" style={{ color: active === i ? palette.accent : palette.muted }}>
                {String(i + 1).padStart(2, "0")}
              </span>
              <span className="obpc-fund-title">{f.title}</span>
              <span className="obpc-fund-arrow" style={{ color: active === i ? palette.accent : `${palette.muted}88` }}>
                {active === i ? "●" : "○"}
              </span>
            </button>
          ))}
        </div>
        <div className="obpc-fund-detail" style={{ background: palette.surface, borderColor: `${palette.accent}33` }}>
          <div className="obpc-fund-detail-num" style={{ color: palette.accent }}>
            {String(active + 1).padStart(2, "0")}
          </div>
          <h3 className="obpc-fund-detail-title">{FUNDAMENTOS[active].title}</h3>
          <p className="obpc-fund-detail-desc" style={{ color: palette.muted }}>
            {FUNDAMENTOS[active].desc}
          </p>
          <div className="obpc-fund-verse" style={{ color: palette.accent, borderColor: `${palette.accent}44` }}>
            <span>Referência</span>
            <strong>{FUNDAMENTOS[active].verse}</strong>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Section: Ministérios ----------
// Cards da home: os ministérios marcados com "home", na ordem do cadastro. Vêm do que foi publicado pelo sistema
// interno, com src/ministerios.js como reserva (src/ministerios-api.js)
// Cartão derivado do que o ministério já tem: nome de exibição, "para quem" e apresentação. O campo "home" (se existir) vale por cima, para quem
// quiser um texto próprio ("Mulheres", "Jovens"). Entram os que têm "home" e os que estão com a página no ar.
const cardsDaHome = (lista) => lista.filter((m) => m.home || (m.pagina && m.paginaAtiva !== false)).map((m) => ({
  href: m.pagina && m.paginaAtiva !== false ? m.pagina : `/ministerios#${m.id}`, sigla: m.sigla,
  nome: m.exibicao || m.nome, desc: m.desc, idade: m.faixa, tone: "warm", ...(m.home || {}),
}));

const SectionMinisterios = ({ palette }) => {
  const [hover, setHover] = useStateS(null);
  const inicio = window.OBPC_SITE.useSite().inicio; // título da seção, editado pelo sistema
  const carregada = window.OBPC_MINISTERIOS_API.useMinisterios(); // null enquanto carrega: não se desenha a reserva antes da resposta
  const estadoMinisterios = window.OBPC_MINISTERIOS_API.useEstado();
  const MINISTERIOS = cardsDaHome(carregada || []);
  return (
    <section id="ministerios" className="obpc-section obpc-section--min" style={{ background: palette.surface, color: palette.fg }}>
      <div className="obpc-sec-head">
        <span className="obpc-sec-num" style={{ color: palette.accent }}>02 /</span>
        <span className="obpc-sec-kicker" style={{ color: palette.muted }}>Ministérios</span>
      </div>

      <Reveal>
        <h2 className="obpc-sec-title">
          {window.OBPC_SITE.marcas(inicio.ministerios_titulo, { acento: palette.accent })}
        </h2>
      </Reveal>

      <div className="obpc-min-grid" aria-busy={carregada === null} style={carregada === null ? { minHeight: 420 } : undefined}>
        {MINISTERIOS.map((m, i) => (
          <Reveal key={m.sigla} delay={i * 60}>
            <a
              href={m.href}
              aria-label={`${m.sigla} — ${m.nome}: conhecer o ministério`}
              className={`obpc-min-card ${hover === i ? "is-hover" : ""} ${m.highlight ? "is-featured" : ""}`}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(null)}
              style={{
                background: hover === i ? palette.accent : palette.bg,
                color: hover === i ? palette.bg : palette.fg,
                borderColor: m.highlight ? palette.accent : `${palette.fg}18`,
              }}
            >
              <div className="obpc-min-idx" style={{ color: hover === i ? palette.bg : palette.muted }}>
                {String(i + 1).padStart(2, "0")} / {String(MINISTERIOS.length).padStart(2, "0")}
              </div>
              <div className="obpc-min-sigla">{m.sigla}</div>
              <div className="obpc-min-nome" style={{ color: hover === i ? palette.bg : palette.accent, fontStyle: "italic" }}>
                {m.nome}
              </div>
              <p className="obpc-min-desc" style={{ color: hover === i ? palette.bg : palette.muted, opacity: hover === i ? 0.85 : 1 }}>
                <TextoRico texto={m.desc} cor={hover === i ? palette.bg : palette.accent}/>
              </p>
              <div className="obpc-min-foot" style={{ borderColor: hover === i ? `${palette.bg}33` : `${palette.fg}18` }}>
                <span style={{ color: hover === i ? palette.bg : palette.muted }}>{m.idade}</span>
                <span className="obpc-min-arrow">→</span>
              </div>
            </a>
          </Reveal>
        ))}
      </div>

      {window.OBPC_MOBILE_APP && estadoMinisterios.erro && (
        <p role="status" style={{ color: palette.muted, marginTop: 24 }}>
          Não foi possível atualizar a lista de ministérios agora. Conecte-se à internet para ver as novidades.
        </p>
      )}

      <Reveal delay={200}>
        <div className="obpc-min-aux" style={{ borderColor: `${palette.fg}18`, color: palette.muted }}>
          <span className="obpc-min-aux-label">Além disso, ministérios locais:</span>
          <span className="obpc-min-aux-items">
            <em>Louvor</em> · <em>Intercessão</em> · <em>Evangelismo</em> · <em>Ensino</em>
          </span>
          <a href="/ministerios" style={{ marginLeft: "auto", color: palette.accent }}>Ver todos os ministérios →</a>
        </div>
      </Reveal>
    </section>
  );
};

Object.assign(window, { SectionObra, SectionFundamentos, SectionMinisterios });
