/* Aba Templates — Biblioteca de Templates Oficiais ASCEND.
   Master-detail: lista das 9 ferramentas + render do documento. */
function TemplatesView({ initialId }) {
  const T = window.OE_TPL.TEMPLATES;
  const [sel, setSel] = React.useState(() => {
    const i = T.findIndex((t) => t.id === initialId);
    return i >= 0 ? i : 0;
  });
  React.useEffect(() => {
    const i = T.findIndex((t) => t.id === initialId);
    if (i >= 0) setSel(i);
  }, [initialId]);
  const tpl = T[sel];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {/* contexto */}
      <div style={{ background: "linear-gradient(120deg,#0E1A30,#1b2c4e 52%,#243B66)", borderRadius: 20, padding: "24px 28px", color: "#fff" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
          <LIcon name="library" size={20} /><span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "#EAD08A" }}>Pacote de templates oficiais</span>
        </div>
        <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: "-.01em", lineHeight: 1.4, maxWidth: "64ch" }}>
          As 9 ferramentas que estruturam todo o trabalho: do <span style={{ color: "#EAD08A" }}>diagnóstico humano</span> ao <span style={{ color: "#EAD08A" }}>cronograma de ação</span>. Cada template é um documento pronto para preencher.
        </div>
        <div style={{ fontSize: 13.5, color: "#aeb9d0", marginTop: 8 }}>Selecione um template à esquerda para ver a estrutura completa de preenchimento.</div>
        <div style={{ fontSize: 12.5, color: "#aeb9d0", marginTop: 10, lineHeight: 1.55 }}>Além das 9 ferramentas oficiais, aqui também ficam os documentos de apoio do dia a dia: e-mail de boas-vindas, checklist de admissão, contrato, plano, relatório mensal e formulários de 30 dias.</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 18, alignItems: "start" }} className="guiagrid">
        {/* lista */}
        <Card pad={10}>
          {(() => {
            const oficiais = T.filter((t) => t.num <= 9);
            const apoio = T.filter((t) => t.num > 9);
            const item = (t) => {
              const i = T.indexOf(t);
              const on = i === sel;
              return (
                <button key={t.id} onClick={() => setSel(i)} style={{
                  display: "flex", alignItems: "center", gap: 11, padding: "10px 11px", border: "none", borderRadius: 11,
                  background: on ? C.cobaltSoft : "transparent", cursor: "pointer", textAlign: "left", fontFamily: "inherit", width: "100%",
                }}>
                  <span style={{ width: 30, height: 30, borderRadius: 9, flex: "none", display: "grid", placeItems: "center", background: on ? C.cobalt : C.lineSoft, color: on ? "#fff" : C.ink3, fontWeight: 800, fontSize: 13 }}>
                    {t.num > 9 ? <LIcon name={t.icon} size={15} /> : t.num}
                  </span>
                  <span style={{ flex: 1, minWidth: 0 }}>
                    <span style={{ display: "block", fontSize: 13.5, fontWeight: 700, color: on ? C.cobaltDeep : C.ink, lineHeight: 1.2 }}>{t.nome}</span>
                    <span style={{ display: "block", fontSize: 11, color: C.ink3, marginTop: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.sub}</span>
                  </span>
                  <LIcon name={t.icon} size={15} color={on ? C.cobalt : C.ink3} />
                </button>
              );
            };
            return (
              <>
                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".1em", textTransform: "uppercase", color: C.ink3, padding: "6px 10px 10px" }}>9 templates oficiais</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>{oficiais.map(item)}</div>
                {apoio.length > 0 && (
                  <>
                    <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".1em", textTransform: "uppercase", color: C.ink3, padding: "16px 10px 10px", marginTop: 6, borderTop: `1px solid ${C.lineSoft}` }}>Documentos de apoio</div>
                    <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>{apoio.map(item)}</div>
                  </>
                )}
              </>
            );
          })()}
        </Card>

        {/* documento */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Card pad={22}>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
              <span style={{ width: 46, height: 46, borderRadius: 13, background: C.cobaltSoft, color: C.cobalt, display: "grid", placeItems: "center", flex: "none" }}><LIcon name={tpl.icon} size={24} stroke={2.1} /></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: ".08em", textTransform: "uppercase", color: C.cobalt }}>{tpl.num > 9 ? "Documento de apoio" : `Template ${tpl.num}`}</div>
                <div style={{ fontSize: 21, fontWeight: 800, color: C.ink, letterSpacing: "-.01em", lineHeight: 1.15 }}>{tpl.nome}</div>
                <div style={{ fontSize: 13.5, color: C.ink2, marginTop: 8, lineHeight: 1.55, maxWidth: "62ch" }}>{tpl.objetivo}</div>
                <div style={{ display: "flex", gap: 9, marginTop: 13, flexWrap: "wrap" }}>
                  <Pill tone="cobalt" icon="calendar-check">{tpl.quando}</Pill>
                  <Pill icon="clock">{tpl.tempo}</Pill>
                </div>
              </div>
            </div>
          </Card>

          <Card pad={0} style={{ overflow: "hidden" }}>
            <div style={{ padding: "13px 22px", background: C.bg, borderBottom: `1px solid ${C.line}`, display: "flex", alignItems: "center", gap: 9 }}>
              <LIcon name="file-text" size={16} color={C.ink3} />
              <span style={{ fontSize: 12.5, fontWeight: 800, color: C.ink2, letterSpacing: ".02em" }}>ESTRUTURA DE PREENCHIMENTO</span>
              <span style={{ marginLeft: "auto", fontSize: 11.5, color: C.ink3, fontWeight: 600 }}>modelo · pronto para usar</span>
            </div>
            <div style={{ padding: "22px" }}>
              <TemplateBody tpl={tpl} />
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

/* ---------- corpo do documento por tipo ---------- */
function TemplateBody({ tpl }) {
  if (tpl.tipo === "diario") return <DiarioDoc tpl={tpl} />;
  if (tpl.tipo === "matriz") return <MatrizDoc tpl={tpl} />;
  if (tpl.tipo === "fluxo") return <FluxoDoc tpl={tpl} />;
  if (tpl.tipo === "pop") return <PopDoc tpl={tpl} />;
  if (tpl.tipo === "diag") return <DiagDoc tpl={tpl} />;
  if (tpl.tipo === "slides") return <SlidesDoc tpl={tpl} />;
  if (tpl.tipo === "cronograma") return <CronoDoc tpl={tpl} />;
  if (tpl.tipo === "texto") return <TextoDoc tpl={tpl} />;
  if (tpl.tipo === "checklist") return <ChecklistDoc tpl={tpl} />;
  if (tpl.tipo === "plano-resumo") return <PlanoResumoDoc tpl={tpl} />;
  return <FormDoc tpl={tpl} />;
}

/* campo de formulário */
function Campo({ l, t }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: C.ink, marginBottom: 6, lineHeight: 1.4 }}>{l}</div>
      {t === "yesno" ? (
        <div style={{ display: "flex", gap: 9 }}>
          {["Sim", "Não"].map((o) => (
            <span key={o} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "7px 16px", border: `1.5px solid ${C.line}`, borderRadius: 9, fontSize: 13, color: C.ink2, fontWeight: 600 }}>
              <span style={{ width: 14, height: 14, borderRadius: "50%", border: `1.5px solid ${C.ink3}` }} />{o}
            </span>
          ))}
        </div>
      ) : t === "long" ? (
        <div style={{ height: 64, border: `1.5px dashed ${C.line}`, borderRadius: 10, background: "#fcfcfe" }} />
      ) : t === "num" ? (
        <div style={{ width: 120, height: 38, border: `1.5px solid ${C.line}`, borderRadius: 9, background: "#fff", display: "flex", alignItems: "center", padding: "0 12px", color: C.ink3, fontSize: 13 }}>0</div>
      ) : (
        <div style={{ height: 38, border: `1.5px solid ${C.line}`, borderRadius: 9, background: "#fff" }} />
      )}
    </div>
  );
}

function Secao({ s }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 13 }}>
        <span style={{ width: 6, height: 16, borderRadius: 3, background: C.cobalt, flex: "none" }} />
        <span style={{ fontSize: 13.5, fontWeight: 800, color: C.ink }}>{s.nome}</span>
        {s.hint && <span style={{ fontSize: 11.5, color: C.ink3, fontWeight: 600 }}>· {s.hint}</span>}
      </div>
      <div style={{ paddingLeft: 15 }}>{s.campos.map((c, i) => <Campo key={i} {...c} />)}</div>
    </div>
  );
}

function FormDoc({ tpl }) {
  return <div>{tpl.secoes.map((s, i) => <Secao key={i} s={s} />)}</div>;
}

function DiarioDoc({ tpl }) {
  return (
    <div>
      <div style={{ marginBottom: 18 }}><Campo l={tpl.cabecalho} t="text" /></div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="smgrid">
        {[tpl.manha, tpl.tarde].map((tn, i) => (
          <div key={i} style={{ border: `1px solid ${C.line}`, borderRadius: 13, overflow: "hidden" }}>
            <div style={{ padding: "12px 16px", background: i === 0 ? "#fff4e0" : "#fde9ef", display: "flex", alignItems: "center", gap: 9 }}>
              <span style={{ color: i === 0 ? C.amber : "#db2777" }}><LIcon name={tn.icon} size={17} /></span>
              <span style={{ fontSize: 13.5, fontWeight: 800, color: C.ink }}>{tn.titulo}</span>
            </div>
            <div style={{ padding: "16px" }}>
              {tn.campos.map((c, j) => (
                <div key={j} style={{ marginBottom: 12 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: C.ink, marginBottom: 5 }}>{c}</div>
                  <div style={{ height: 34, border: `1.5px solid ${C.line}`, borderRadius: 8, background: "#fff" }} />
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MatrizDoc({ tpl }) {
  return (
    <div>
      <div style={{ overflowX: "auto", border: `1px solid ${C.line}`, borderRadius: 12 }}>
        <table style={{ borderCollapse: "collapse", width: "100%", minWidth: 760, fontSize: 12 }}>
          <thead>
            <tr>
              {tpl.cols.map((c) => (
                <th key={c.n} style={{ padding: "10px 11px", background: c.flag ? C.amberSoft : C.cobaltSoft, color: c.flag ? C.amber : C.cobaltDeep, fontSize: 11, fontWeight: 800, textAlign: "left", borderBottom: `1px solid ${C.line}`, whiteSpace: "nowrap" }}>
                  <span style={{ opacity: .6, fontSize: 10 }}>{c.n}</span> {c.h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {[0, 1].map((r) => (
              <tr key={r}>
                {tpl.cols.map((c) => (
                  <td key={c.n} style={{ padding: "13px 11px", borderBottom: r === 0 ? `1px solid ${C.lineSoft}` : "none", borderRight: `1px solid ${C.lineSoft}`, color: C.ink3, textAlign: c.flag ? "center" : "left" }}>
                    {c.flag ? <span style={{ width: 15, height: 15, borderRadius: 4, border: `1.5px solid ${C.line}`, display: "inline-block" }} /> : <span style={{ color: "#cbd2de" }}>—</span>}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {/* legenda das colunas */}
      <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(220px,1fr))", gap: 10 }}>
        {tpl.cols.map((c) => (
          <div key={c.n} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
            <span style={{ flex: "none", width: 22, height: 22, borderRadius: 7, background: c.flag ? C.amberSoft : C.cobaltSoft, color: c.flag ? C.amber : C.cobaltDeep, fontSize: 11, fontWeight: 800, display: "grid", placeItems: "center" }}>{c.n}</span>
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: C.ink, display: "flex", alignItems: "center", gap: 7 }}>{c.h} <span style={{ fontSize: 10, color: C.ink3, fontWeight: 700, background: C.lineSoft, padding: "1px 6px", borderRadius: 5 }}>{c.fase}</span></div>
              <div style={{ fontSize: 11.5, color: C.ink3, lineHeight: 1.4, marginTop: 1 }}>{c.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FluxoDoc({ tpl }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 0, flexWrap: "wrap", padding: "14px 0" }}>
      {tpl.blocos.map((b, i) => (
        <React.Fragment key={i}>
          <div style={{ flex: "none", width: 178, border: `1.5px solid ${C.line}`, borderRadius: 13, padding: "18px 16px", textAlign: "center", background: "#fff" }}>
            <span style={{ color: C.cobalt, display: "inline-flex", marginBottom: 8 }}><LIcon name={b.icon} size={22} /></span>
            <div style={{ fontSize: 11, fontWeight: 800, color: C.ink3, letterSpacing: ".06em" }}>{b.l.toUpperCase()}</div>
            <div style={{ fontSize: 13, fontWeight: 700, color: C.ink, marginTop: 3 }}>{b.v}</div>
          </div>
          {i < tpl.blocos.length - 1 && <span style={{ color: C.cobalt, padding: "0 6px" }}><LIcon name="arrow-right" size={26} stroke={2.4} /></span>}
        </React.Fragment>
      ))}
    </div>
  );
}

function PopDoc({ tpl }) {
  return (
    <div>
      {tpl.secoes.map((s, i) => <Secao key={i} s={s} />)}
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 13 }}>
        <span style={{ width: 6, height: 16, borderRadius: 3, background: C.cobalt, flex: "none" }} />
        <span style={{ fontSize: 13.5, fontWeight: 800, color: C.ink }}>Execução passo a passo</span>
      </div>
      <div style={{ paddingLeft: 15, display: "flex", flexDirection: "column", gap: 12 }}>
        {tpl.passos.map((p, i) => (
          <div key={i} style={{ display: "flex", gap: 14, alignItems: "stretch" }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: C.ink, marginBottom: 5 }}>{p.p}</div>
              <div style={{ height: 38, border: `1.5px solid ${C.line}`, borderRadius: 8, background: "#fff" }} />
            </div>
            <div style={{ width: 130, flex: "none" }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: C.ink3, marginBottom: 5 }}>{p.img}</div>
              <div style={{ height: 38, border: `1.5px dashed ${C.line}`, borderRadius: 8, background: "#fcfcfe", display: "grid", placeItems: "center", color: C.ink3 }}><LIcon name="image" size={16} /></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DiagDoc({ tpl }) {
  const toneMap = { green: [C.green, C.greenSoft], cobalt: [C.cobaltDeep, C.cobaltSoft], gray: [C.ink2, C.lineSoft], red: [C.red, C.redSoft] };
  return (
    <div>
      {tpl.secoes.map((s, i) => <Secao key={i} s={s} />)}
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 13 }}>
        <span style={{ width: 6, height: 16, borderRadius: 3, background: C.cobalt, flex: "none" }} />
        <span style={{ fontSize: 13.5, fontWeight: 800, color: C.ink }}>Matriz de prioridade</span>
        <span style={{ fontSize: 11.5, color: C.ink3, fontWeight: 600 }}>· impacto × esforço</span>
      </div>
      <div style={{ paddingLeft: 15, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }} className="smgrid">
        {tpl.matriz.map((m, i) => {
          const [fg, bg] = toneMap[m.tone];
          return (
            <div key={i} style={{ border: `1px solid ${C.line}`, borderRadius: 12, padding: "14px 16px", background: "#fff" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
                <span style={{ fontSize: 13, fontWeight: 800, color: C.ink }}>{m.l}</span>
                <span style={{ fontSize: 11, fontWeight: 800, color: fg, background: bg, padding: "3px 9px", borderRadius: 999 }}>{m.tag}</span>
              </div>
              <div style={{ fontSize: 11.5, color: C.ink3, marginBottom: 9 }}>{m.q}</div>
              <div style={{ height: 32, border: `1.5px dashed ${C.line}`, borderRadius: 8, background: "#fcfcfe" }} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

function SlidesDoc({ tpl }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(180px,1fr))", gap: 14 }}>
      {tpl.slides.map((s) => (
        <div key={s.n} style={{ border: `1px solid ${C.line}`, borderRadius: 12, overflow: "hidden" }}>
          <div style={{ aspectRatio: "16/9", background: "linear-gradient(135deg,#f3f5fa,#e9edf6)", display: "flex", flexDirection: "column", justifyContent: "flex-end", padding: 14, position: "relative" }}>
            <span style={{ position: "absolute", top: 11, left: 13, width: 24, height: 24, borderRadius: 7, background: C.cobalt, color: "#fff", fontSize: 12, fontWeight: 800, display: "grid", placeItems: "center" }}>{s.n}</span>
            <div style={{ fontSize: 14, fontWeight: 800, color: C.ink, lineHeight: 1.2 }}>{s.t}</div>
          </div>
          <div style={{ padding: "11px 14px" }}>
            <div style={{ fontSize: 12, color: C.ink2, lineHeight: 1.4 }}>{s.d}</div>
            <div style={{ fontSize: 11, color: C.cobalt, fontWeight: 700, marginTop: 6, display: "inline-flex", alignItems: "center", gap: 5 }}><LIcon name="link" size={12} />{s.ref}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function CronoDoc({ tpl }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="smgrid">
      {tpl.meses.map((m, i) => (
        <div key={i} style={{ border: `1px solid ${C.line}`, borderRadius: 13, overflow: "hidden" }}>
          <div style={{ padding: "12px 16px", background: C.cobaltSoft, color: C.cobaltDeep, fontSize: 13.5, fontWeight: 800, display: "flex", alignItems: "center", gap: 8 }}>
            <LIcon name="calendar" size={16} />{m.m}
          </div>
          <div style={{ padding: "14px 16px", display: "flex", flexDirection: "column", gap: 10 }}>
            {m.acoes.map((a, j) => (
              <div key={j} style={{ display: "flex", alignItems: "center", gap: 10, border: `1.5px solid ${C.line}`, borderRadius: 9, padding: "10px 12px" }}>
                <span style={{ width: 16, height: 16, borderRadius: 5, border: `1.5px solid ${C.ink3}`, flex: "none" }} />
                <span style={{ fontSize: 12.5, color: C.ink2, fontWeight: 600 }}>{a}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- documentos de apoio (texto, checklist, plano-resumo) ---------- */
function TextoDoc({ tpl }) {
  return (
    <div>
      {tpl.aviso && (
        <div style={{ display: "flex", gap: 9, background: C.amberSoft, border: "1px solid #f3d28a", borderRadius: 10, padding: "11px 13px", marginBottom: 16 }}>
          <span style={{ color: C.amber, flex: "none", marginTop: 1 }}><LIcon name="alert-triangle" size={16} /></span>
          <span style={{ fontSize: 12.5, color: "#92600c", lineHeight: 1.5 }}>{tpl.aviso}</span>
        </div>
      )}
      {tpl.assunto && (
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: ".08em", textTransform: "uppercase", color: C.ink3, marginBottom: 5 }}>Assunto</div>
          <div style={{ fontSize: 14, fontWeight: 700, color: C.ink, background: C.bg, border: `1px solid ${C.line}`, borderRadius: 9, padding: "10px 13px" }}>{tpl.assunto}</div>
        </div>
      )}
      <div style={{ border: `1px solid ${C.line}`, borderRadius: 12, background: "#fff", padding: "18px 20px", display: "flex", flexDirection: "column", gap: 11 }}>
        {tpl.corpo.map((p, i) => (
          <div key={i} style={{ fontSize: 13.5, color: C.ink2, lineHeight: 1.6 }}>{p}</div>
        ))}
      </div>
      {tpl.nota && <div style={{ fontSize: 12, color: C.ink3, marginTop: 12, display: "flex", gap: 7 }}><LIcon name="info" size={14} color={C.ink3} /><span style={{ lineHeight: 1.5 }}>{tpl.nota}</span></div>}
    </div>
  );
}

function ChecklistDoc({ tpl }) {
  return (
    <div>
      {tpl.prazoNota && <div style={{ fontSize: 12.5, color: C.cobaltDeep, fontWeight: 700, background: C.cobaltSoft, borderRadius: 9, padding: "8px 12px", marginBottom: 16, display: "inline-flex", alignItems: "center", gap: 7 }}><LIcon name="calendar-clock" size={14} />{tpl.prazoNota}</div>}
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {tpl.grupos.map((g, i) => (
          <div key={i}>
            <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 11 }}>
              <span style={{ width: 6, height: 16, borderRadius: 3, background: C.cobalt, flex: "none" }} />
              <span style={{ fontSize: 13.5, fontWeight: 800, color: C.ink }}>{g.nome}</span>
            </div>
            <div style={{ paddingLeft: 15, display: "flex", flexDirection: "column", gap: 8 }}>
              {g.itens.map((it, j) => (
                <div key={j} style={{ display: "flex", alignItems: "center", gap: 10, border: `1.5px solid ${C.line}`, borderRadius: 9, padding: "10px 12px", background: "#fff" }}>
                  <span style={{ width: 16, height: 16, borderRadius: 5, border: `1.5px solid ${C.ink3}`, flex: "none" }} />
                  <span style={{ fontSize: 13, color: C.ink2, fontWeight: 600 }}>{it}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      {tpl.nota && <div style={{ fontSize: 12, color: C.ink3, marginTop: 16, display: "flex", gap: 7 }}><LIcon name="info" size={14} color={C.ink3} /><span style={{ lineHeight: 1.5 }}>{tpl.nota}</span></div>}
    </div>
  );
}

function PlanoResumoDoc({ tpl }) {
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }}>
        {tpl.blocos.map((b, i) => (
          <div key={i} style={{ border: `1px solid ${C.line}`, borderRadius: 12, padding: "16px 18px", background: "#fff" }}>
            <div style={{ fontSize: 14, fontWeight: 800, color: C.ink, marginBottom: 6 }}>{b.titulo}</div>
            <div style={{ fontSize: 12.5, color: C.ink2, lineHeight: 1.55 }}>{b.desc}</div>
          </div>
        ))}
      </div>
      {tpl.nota && <div style={{ fontSize: 12, color: C.ink3, marginTop: 16, display: "flex", gap: 7 }}><LIcon name="info" size={14} color={C.ink3} /><span style={{ lineHeight: 1.5 }}>{tpl.nota}</span></div>}
    </div>
  );
}

Object.assign(window, { TemplatesView });