{s.date}

{rows.map((p, i) => (

{p.img ?

: null}

{parseRich(p.name)}

{p.role}

))}

); } return null; } /* ─── Clause editor modal ──────────────────────────────── */ function ClauseEditor({ open, title, value, onSave, onCancel, onReset, canReset }) { const [draft, setDraft] = React.useState(value || ""); React.useEffect(() => { setDraft(value || ""); }, [value, open]); if (!open) return null; const node = (

e.stopPropagation()}>

Editar cláusula

{title}

setDraft(e.target.value)}
          spellCheck={true}
        />
        <div className="clause-editor-hint">
          Usa <b>**texto**</b> para negritas · una línea en blanco separa párrafos ·
          líneas con “- ” forman viñetas · “1. ” forman lista numerada.
        </div>
        <div className="clause-editor-actions">
          {canReset && (
            <button type="button" className="ce-btn ce-reset" onClick={onReset}>
              Restablecer original
            </button>
          )}
          <div className="ce-spacer" />
          <button type="button" className="ce-btn ce-cancel" onClick={onCancel}>Cancelar</button>
          <button type="button" className="ce-btn ce-save" onClick={() => onSave(draft)}>Guardar</button>
        </div>
      </div>
    </div>
  );
  return ReactDOM.createPortal(node, document.body);
}

/* ─── Paginated contract ───────────────────────────────── */
function PaginatedContract({ contract, edits, onEdit, onReset }) {
  const editable = typeof onEdit === "function";
  const effective = React.useMemo(() => applyEdits(contract, edits), [contract, edits]);
  const sig = JSON.stringify(effective);
  const blocks = React.useMemo(() => flattenContract(effective), [sig]);
  const [pages, setPages] = React.useState(null);
  const measRef = React.useRef(null);
  const titleRef = React.useRef(null);

// Modal state
  const [modal, setModal] = React.useState({ open: false, key: null, title: "" });

const openEditor = (key, title) => setModal({ open: true, key, title });
  const closeEditor = () => setModal({ open: false, key: null, title: "" });

/* Publica las secciones editables para el panel izquierdo. */
  React.useEffect(() => {
    if (!editable) return;
    const secciones = [];
    if (contract.intro) secciones.push({ key: "intro", title: "Introducción" });
    if (contract.body && contract.body.length) secciones.push({ key: "cuerpo", title: "Cuerpo de la carta" });
    (contract.clauses || []).forEach((c) => secciones.push({ key: c.ord, title: `${c.ord}. ${c.label || ""}`.trim() }));
    window.__saSections = { secciones: secciones, abrir: openEditor };
    window.dispatchEvent(new Event("sa-sections"));
    return () => { window.__saSections = null; };
  }, [sig, editable]);

// Serialized raw text for the unit currently being edited
  const currentRaw = React.useMemo(() => {
    if (!modal.open) return "";
    const key = modal.key;
    if (edits && edits[key] != null) return edits[key];
    if (key === "intro") return contract.intro || "";
    if (key === "cuerpo") return serializeBlocks(contract.body);
    const cl = (contract.clauses || []).find((c) => c.ord === key);
    return cl ? serializeBlocks(cl.blocks) : "";
  }, [modal, edits, contract]);

React.useLayoutEffect(() => {
    let cancelled = false;
    const doMeasure = () => {
      if (cancelled || !measRef.current) return;
      const nodes = [...measRef.current.querySelectorAll("[data-blk]")];
      if (nodes.length !== blocks.length) return;
      const heights = nodes.map((n) => n.offsetHeight);
      const titleH = titleRef.current ? titleRef.current.offsetHeight : 0;

const out = [];
      let cur = [];
      let acc = 0;
      for (let i = 0; i < blocks.length; i++) {
        const cap = out.length === 0 ? CONTENT_H - titleH : CONTENT_H;
        const h = heights[i] || 0;
        const need = blocks[i].k === "head" ? h + (heights[i + 1] || 0) : h;
        if (acc + need > cap && cur.length) {
          out.push(cur);
          cur = [];
          acc = 0;
        }
        cur.push(i);
        acc += h;
      }
      if (cur.length) out.push(cur);
      if (!cancelled) setPages(out);
    };

const kick = () => setTimeout(doMeasure, 0);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(kick);
    kick();
    return () => { cancelled = true; };
  }, [sig]);

const pageList = pages || [blocks.map((_, i) => i)];

return (
    <div className="paginated-doc">
      {/* Hidden measurer — identical typography & column width */}
      <div className="measure-col" ref={measRef} aria-hidden="true">
        <div ref={titleRef} className="sheet-title">{effective.title}</div>
        {blocks.map((b, i) => (
          <div data-blk key={i}><Block b={b} /></div>
        ))}
      </div>

{/* Real sheets */}
      {pages && pageList.map((idxs, p) => (
        <div className="sheet" key={p}>
          <img className="sheet-bg" src={MEMBRETE} alt="" crossOrigin="anonymous" />
          <div className="sheet-col">
            {p === 0 && <div className="sheet-title">{effective.title}</div>}
            {idxs.map((i) => (
              blocks[i] ? <Block key={i} b={blocks[i]} editable={editable} onEdit={openEditor} /> : null
            ))}
          </div>
        </div>
      ))}

<ClauseEditor
        open={modal.open}
        title={modal.title}
        value={currentRaw}
        canReset={!!(edits && edits[modal.key] != null)}
        onSave={(v) => { onEdit(modal.key, v); closeEditor(); }}
        onReset={() => { onReset && onReset(modal.key); closeEditor(); }}
        onCancel={closeEditor}
      />
    </div>
  );
}

Object.assign(window, {
  PaginatedContract, parseRich, flattenContract, serializeBlocks, parseRaw, applyEdits,
  SHEET_W, SHEET_H, FirmasCtx, buildSigRows, normNombre,
});