// Modelo único das páginas de ministério (desenho da JUBRAC aplicado a todos).
// Componente de apresentação: recebe o ministério `m` já validado (formato de src/ministerios.js + ministerios-api.js),
// a paleta `p`, a lista dos demais e o estado dos eventos. Não busca nada sozinho. Assim o mesmo componente serve
// ao site e, nas próximas fases, à pré-visualização ao vivo do editor no sistema interno.
//
// Cada bloco só aparece se o ministério tiver o dado:
//   capa      foto de fundo da capa (sem ela, a capa usa a cor do ministério); capaFoco { x, y, zoom } = enquadramento
//   manifesto frase grande depois da capa (sem ela, vale a descrição); *trecho* vira destaque colorido
//   verbos    [[título, descrição], ...] — sem ele, as atividades viram os cards ("Título — descrição" é separado)
//   destaque  { foto, frase } foto grande com frase
//   galeria   [{ src, cap, alt, cls }] mosaico de fotos
//   cta       { titulo, texto } convite final; instagram: usuário sem @
//   blocos    ordem dos blocos do meio (lista de ids; o que não está na lista fica de fora); fonte: classica|moderna|mista;
//             tema: padrao|claro|escuro
// Texto sempre como texto (o React escapa); cor e caminhos já foram validados antes de chegar aqui.

const { useRef: useRefMV, useEffect: useEffectMV } = React;

const ZAP_IGREJA = "https://wa.me/5511972771969";
const MONO = "JetBrains Mono, monospace";
const SERIF = "Fraunces, serif";
const SANS = "Inter, sans-serif";
const T = "var(--mi-titulo)", X = "var(--mi-texto)";

// Pares de fontes (só as que o site já carrega): [títulos, textos]
const FONTES = { classica: [SERIF, SERIF], moderna: [SANS, SANS], mista: [SERIF, SANS] };

// Tema da página: "claro" e "escuro" valem só dentro da página do ministério; "padrao" segue a paleta do visitante.
const ESCURO = { bg: "#0d0a14", surface: "#181221", fg: "#f4eff8", muted: "rgba(244,239,248,0.62)", accent: "#e3d0ff" };
function paletaDoTema(p, tema) {
  if (tema === "escuro") return ESCURO;
  if (tema === "claro") return window.OBPC_PALETTES.marca;
  return p;
}

// Ordem dos blocos do meio. Sem escolha do líder, vale a ordem original; "sobre" (quem somos, agenda e como participar) nunca sai.
const ORDEM_PADRAO = ["manifesto", "verbos", "sobre", "destaque", "galeria", "cta"];
function ordemDe(m) {
  if (!Array.isArray(m.blocos)) return ORDEM_PADRAO;
  const o = m.blocos.filter((b, i) => ORDEM_PADRAO.includes(b) && m.blocos.indexOf(b) === i);
  return o.includes("sobre") ? o : [...o, "sobre"];
}

// "Uma geração que *faz parte* da Obra." -> trechos entre asteriscos em destaque (nunca HTML)
function TextoRico({ texto, cor }) {
  return String(texto).split("*").map((t, i) => (i % 2 ? <em key={i} style={{ color: cor, fontStyle: "italic" }}>{t}</em> : <span key={i}>{t}</span>));
}

// Sigla em duas metades (a segunda em itálico colorido). Siglas longas encolhem para caber sem quebrar.
function Sigla({ sigla, cor }) {
  const meio = Math.ceil(sigla.length / 2);
  const n = sigla.length;
  const vw = Math.min(26, 88 / (n * 0.6));
  const px = Math.min(280, Math.floor(1180 / (n * 0.6)));
  return (
    <h1 aria-label={sigla} style={{ fontFamily: T, fontSize: `clamp(44px, ${vw.toFixed(1)}vw, ${px}px)`, fontWeight: 300, lineHeight: 0.88, letterSpacing: "-0.05em", margin: 0, overflowWrap: "normal", wordBreak: "normal" }}>
      <span aria-hidden="true">{sigla.slice(0, meio)}</span><span aria-hidden="true" style={{ color: cor, fontStyle: "italic" }}>{sigla.slice(meio)}</span>
    </h1>
  );
}

// Enquadramento da capa: ponto (x, y em %) que fica no centro e aproximação. Sem dados, centralizada.
function enquadramento(f) {
  if (!f) return null;
  const x = Math.min(100, Math.max(0, f.x)), y = Math.min(100, Math.max(0, f.y)), z = Math.min(2.5, Math.max(1, f.zoom || 1));
  return { objectPosition: `${x}% ${y}%`, transformOrigin: `${x}% ${y}%`, transform: z > 1 ? `scale(${z})` : undefined };
}

// Cartões de "o que fazemos": os escritos pelo líder (m.verbos); sem eles, as atividades viram cards
// ("Título — descrição" ou "Título: descrição"; sem separador, só o título).
function verbosDe(m) {
  if (m.verbos && m.verbos.length) return m.verbos;
  return (m.atividades || []).map((a) => {
    const i = a.search(/\s[—–-]\s|:\s/);
    if (i < 0) return [a, ""];
    return [a.slice(0, i).trim(), a.slice(i).replace(/^\s?[—–:-]\s?/, "").trim()];
  });
}

const MESES_CURTOS = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];
const DIAS_CURTOS  = ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"];
const fmtHora = (iso) => new Intl.DateTimeFormat("pt-BR", { timeZone: "America/Sao_Paulo", hour: "2-digit", minute: "2-digit" }).format(new Date(iso)).replace(":", "h");
const partesData = (ev) => {
  const d = ev.start.dateTime ? new Date(ev.start.dateTime) : new Date(ev.start.date + "T12:00:00");
  const p = Object.fromEntries(new Intl.DateTimeFormat("en-US", { timeZone: "America/Sao_Paulo", day: "numeric", month: "numeric", weekday: "short" })
    .formatToParts(d).map((x) => [x.type, x.value]));
  return { dia: Number(p.day), mes: Number(p.month) - 1, dow: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"].indexOf(p.weekday) };
};

function MinisterioPagina({ p: pBase, m, lista = [], eventos = { carregando: false, eventos: [] }, parallax = true }) {
  const p = paletaDoTema(pBase, m.tema);
  const [fTitulo, fTexto] = FONTES[m.fonte] || FONTES.classica;
  // Variáveis lidas por src/ministerio-view.css; tema "padrão" segue a paleta que o visitante escolheu no site.
  const raiz = { "--mi-titulo": fTitulo, "--mi-texto": fTexto, ...(m.tema === "claro" || m.tema === "escuro" ? { background: p.bg, color: p.fg } : {}) };
  const ordem = ordemDe(m);
  const { carregando, eventos: evs, erro, previa } = eventos;
  const heroBg = useRefMV(null);
  const cor = m.cor;
  const zap = ZAP_IGREJA + "?text=" + encodeURIComponent(`Paz do Senhor! Quero saber mais sobre a ${m.sigla} (${m.nome}).`);
  const outros = lista.filter((o) => o.pagina && o.id !== m.id);
  const rot = { color: p.accent };
  const verbos = verbosDe(m);

  // Paralaxe suave da foto da capa (desligada com "reduzir movimento")
  useEffectMV(() => {
    const el = heroBg.current;
    if (!el || !parallax) return undefined;
    let mq = null;
    try { mq = window.matchMedia("(prefers-reduced-motion: reduce)"); } catch (e) {}
    if (mq && mq.matches) return undefined;
    let raf = 0;
    const apply = () => {
      raf = 0;
      const y = window.scrollY;
      if (y > window.innerHeight * 1.5) return;
      el.style.transform = `translate3d(0, ${y * 0.3}px, 0) scale(${1 + y * 0.0003})`;
    };
    const on = () => { if (!raf) raf = requestAnimationFrame(apply); };
    window.addEventListener("scroll", on, { passive: true });
    apply();
    return () => { window.removeEventListener("scroll", on); if (raf) cancelAnimationFrame(raf); };
  }, [parallax, m.capa]);

  const pad = "clamp(20px, 4vw, 40px)";
  const secao = { padding: `120px ${pad}` };

  // Blocos do meio da página, na ordem escolhida pelo líder (m.blocos). Cada um só aparece se tiver o dado.
  const BLOCOS = {
    manifesto: () => (
    <section style={{ ...secao, borderTop: `1px solid ${p.fg}15`, borderBottom: `1px solid ${p.fg}15` }}>
      <div style={{ maxWidth: 960, margin: "0 auto" }}>
        <p style={{ fontFamily: T, fontSize: "clamp(26px, 4vw, 52px)", fontWeight: 300, lineHeight: 1.25, letterSpacing: "-0.02em", margin: 0 }}>
          <TextoRico texto={m.manifesto || m.desc} cor={cor}/>
        </p>
      </div>
    </section>
    ),
    verbos: () => verbos.length > 0 && (
      <section style={secao}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: "0.25em", color: cor, textTransform: "uppercase", marginBottom: 40 }}>
            {m.verbos && m.verbos.length ? "Nossos verbos · o que fazemos" : "O que fazemos"}
          </div>
          <div className="obpc-mi-verbos" style={{ background: `${p.fg}12` }}>
            {verbos.map(([t, d], i) => (
              <Reveal key={i} delay={i * 60}>
                <div className="obpc-mi-verbo" style={{ background: p.surface, height: "100%" }}>
                  <div style={{ fontFamily: MONO, fontSize: 11, color: p.muted, marginBottom: 12 }}>{String(i + 1).padStart(2, "0")}</div>
                  <h3>{t}</h3>
                  {d && <p style={{ fontFamily: X, fontSize: 16, fontWeight: 300, lineHeight: 1.5, color: p.muted, margin: 0 }}>{d}</p>}
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    ),
    sobre: () => (
    <section className="obpc-page-section" style={{ paddingTop: 48 }}>
      <div className="obpc-mi-grid" style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div>
          {m.sobre && m.sobre.length > 0 && (<>
            <div className="obpc-mi-rot" style={rot}>Quem somos</div>
            {m.sobre.map((t, i) => <p key={i} className="obpc-mi-texto" style={{ color: p.fg }}>{t}</p>)}
          </>)}

          {m.versiculo && (
            <blockquote className="obpc-mi-texto" style={{ fontStyle: "italic", borderLeft: `3px solid ${cor}`, paddingLeft: 18, margin: "32px 0", color: p.fg }}>
              “{m.versiculo.texto}” <span style={{ color: p.muted }}>— {m.versiculo.ref}</span>
            </blockquote>
          )}

          <div className="obpc-mi-rot" style={{ ...rot, marginTop: m.sobre && m.sobre.length ? 40 : 0 }}>Próximos eventos</div>
          {carregando && <p className="obpc-mi-texto" style={{ color: p.muted }}>Carregando a agenda…</p>}
          {!carregando && evs.length > 0 && (<div>
            {evs.map((ev, i) => {
              const d = partesData(ev);
              return (
                <div key={ev.id || i} className="obpc-mi-ev">
                  <div>
                    <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: "0.16em", color: p.muted, textTransform: "uppercase" }}>{DIAS_CURTOS[d.dow]}</div>
                    <div style={{ fontFamily: T, fontSize: 26, color: cor, lineHeight: 1.1 }}>{String(d.dia).padStart(2, "0")}</div>
                    <div style={{ fontFamily: MONO, fontSize: 10, color: p.muted }}>{MESES_CURTOS[d.mes]}</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: X, fontSize: 19 }}>{ev.summary}</div>
                    <div style={{ fontFamily: MONO, fontSize: 11, color: p.muted, marginTop: 4 }}>
                      {ev.start.dateTime ? fmtHora(ev.start.dateTime) : "Dia todo"}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>)}
          {!carregando && evs.length === 0 && (
            <p className="obpc-mi-texto" style={{ color: p.muted }}>
              {previa ? "Os eventos vêm da agenda da igreja." : erro ? "Não foi possível carregar a agenda agora." : `Nenhum evento da ${m.sigla} na agenda nos próximos meses.`}
            </p>
          )}
          <a href="/agenda" style={{ fontFamily: MONO, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: p.accent, textDecoration: "none" }}>
            Ver a agenda completa →
          </a>
        </div>

        <aside className="obpc-mi-card" style={{ borderColor: `${p.fg}18`, background: p.surface }}>
          <div className="obpc-mi-rot" style={rot}><span className="obpc-mi-cor" style={{ background: cor }}/>Participe</div>
          <div className="obpc-mi-linha"><span style={{ color: p.muted }}>Para</span><span>{m.faixa}</span></div>
          <div className="obpc-mi-linha"><span style={{ color: p.muted }}>Encontros</span><span style={{ textAlign: "right" }}>{m.encontros}</span></div>
          <div className="obpc-mi-linha" style={{ borderBottom: 0 }}><span style={{ color: p.muted }}>Onde</span><span style={{ textAlign: "right" }}>Sede Vila Arens · R. Dante Júlio Spina, 62</span></div>
          <a className="obpc-mi-btn" href={zap} target="_blank" rel="noopener" style={{ background: p.accent, color: p.bg }}
            onClick={() => window.trackInteracao && window.trackInteracao("whatsapp")}>
            Falar com a igreja no WhatsApp
          </a>
        </aside>
      </div>
    </section>
    ),
    destaque: () => m.destaque && m.destaque.foto && (
      <section className="obpc-mi-destaque">
        <img src={m.destaque.foto} alt="" aria-hidden="true" loading="lazy" decoding="async"/>
        {m.destaque.frase && <blockquote><TextoRico texto={m.destaque.frase} cor={cor}/></blockquote>}
      </section>
    ),
    galeria: () => m.galeria && m.galeria.length > 0 && (
      <section style={{ ...secao, background: p.surface }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 20, marginBottom: 48 }}>
            <h2 style={{ fontFamily: T, fontSize: "clamp(36px, 6vw, 80px)", fontWeight: 300, letterSpacing: "-0.03em", margin: 0, lineHeight: 1 }}>
              {m.galeriaTitulo ? <TextoRico texto={m.galeriaTitulo} cor={cor}/> : <>Flashes da <em style={{ color: cor }}>{m.sigla}.</em></>}
            </h2>
            <a href="/galeria" style={{ fontFamily: MONO, fontSize: 11, color: p.accent, textTransform: "uppercase", letterSpacing: "0.2em", textDecoration: "none" }}>
              Galeria completa →
            </a>
          </div>
          <div className="obpc-jub-gallery" style={{ margin: 0 }}>
            {m.galeria.map((g, i) => {
              const cls = g.cls ?? (i % 6 === 0 ? "tall" : i % 6 === 3 ? "wide" : ""); // mosaico: uma alta e uma larga a cada 6
              return (
              <div key={g.src} className={`obpc-jub-gal-item ${cls ? "obpc-jub-gal-" + cls : ""}`}>
                <img src={g.src} alt={g.alt || ""} loading="lazy" decoding="async"/>
                {g.cap && <span className="obpc-jub-gal-cap">{g.cap}</span>}
              </div>
              );
            })}
          </div>
        </div>
      </section>
    ),
    cta: () => (
    <section style={{ ...secao, padding: `140px ${pad}`, textAlign: "center", borderTop: `1px solid ${p.fg}15` }}>
      <div style={{ maxWidth: 800, margin: "0 auto" }}>
        <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: "0.25em", color: cor, textTransform: "uppercase", marginBottom: 24 }}>{m.sigla}</div>
        <h2 style={{ fontFamily: T, fontSize: "clamp(40px, 7vw, 96px)", fontWeight: 300, letterSpacing: "-0.04em", lineHeight: 0.98, margin: "0 0 32px" }}>
          <TextoRico texto={(m.cta && m.cta.titulo) || "Venha *fazer parte.*"} cor={cor}/>
        </h2>
        <p style={{ fontFamily: X, fontSize: 20, fontWeight: 300, lineHeight: 1.6, color: p.muted, margin: "0 0 48px" }}>
          {(m.cta && m.cta.texto) || `${m.encontros}. Fale com a igreja e venha conhecer a ${m.sigla}.`}
        </p>
        <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
          <a href={zap} target="_blank" rel="noopener noreferrer" style={{ background: cor, color: "#fff", padding: "16px 32px", fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 500, textDecoration: "none", borderRadius: 999, letterSpacing: "0.02em" }}>
            Entrar no WhatsApp →
          </a>
          {m.instagram && (
            <a href={`https://instagram.com/${m.instagram}`} target="_blank" rel="noopener noreferrer" style={{ border: `1px solid ${p.fg}55`, color: p.fg, padding: "16px 32px", fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 500, textDecoration: "none", borderRadius: 999 }}>
              @{m.instagram}
            </a>
          )}
        </div>
      </div>
    </section>
    ),
  };

  return (
    <div className="obpc-mi-raiz" style={raiz}>
    {/* Capa */}
    <section className={`obpc-mi-hero ${m.capa ? "obpc-mi-hero--foto" : "obpc-mi-hero--cor"}`}>
      <div ref={heroBg} aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0, willChange: "transform" }}>
        {m.capa
          ? <img src={m.capa} alt="" fetchpriority="high" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.85) contrast(1.05)", ...enquadramento(m.capaFoco) }}/>
          : <div style={{ position: "absolute", inset: 0, background: `radial-gradient(120% 90% at 85% 10%, ${cor}55 0%, transparent 60%)` }}/>}
        <div style={{ position: "absolute", inset: 0, background: m.capa ? `linear-gradient(180deg, ${p.bg}cc 0%, ${p.bg}33 40%, ${p.bg}ee 100%)` : "none" }}/>
      </div>
      <div style={{ position: "relative", zIndex: 1, padding: `200px ${pad} 80px`, width: "100%", maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ fontFamily: MONO, fontSize: 12, letterSpacing: "0.3em", color: cor, marginBottom: 32, textTransform: "uppercase" }}>
          Ministério · {m.faixa}
        </div>
        <Sigla sigla={m.sigla} cor={cor}/>
        <div style={{ display: "flex", gap: "8px 24px", marginTop: 40, fontFamily: "Inter, sans-serif", fontSize: 13, flexWrap: "wrap" }}>
          <span>{m.nome}</span>
          <span style={{ color: p.muted }}>·</span>
          <span style={{ color: p.muted }}>{m.faixa}</span>
          {m.instagram && <><span style={{ color: p.muted }}>·</span><span style={{ color: p.muted }}>@{m.instagram}</span></>}
        </div>
      </div>
    </section>

    {ordem.map((id) => <React.Fragment key={id}>{BLOCOS[id]()}</React.Fragment>)}
    {/* Outros ministérios */}
    <section className="obpc-page-section" style={{ paddingTop: 0 }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", borderTop: `1px solid ${p.fg}15`, paddingTop: 40 }}>
        <div className="obpc-mi-rot" style={{ color: p.muted }}>Outros ministérios</div>
        <div className="obpc-mi-outros">
          {outros.map((o) => <a key={o.id} href={o.pagina} style={{ borderColor: `${p.fg}30`, color: p.fg }}>
            <span className="obpc-mi-cor" style={{ background: o.cor }}/>{o.sigla}
          </a>)}
          <a href="/ministerios" style={{ borderColor: `${p.accent}66`, color: p.accent }}>Todos os ministérios →</a>
        </div>
      </div>
    </section>
    </div>
  );
}

Object.assign(window, { MinisterioPagina });