/* global React */ /* ============================================================ The Matrix: 4 fronts × 4 stages, one domain. Three diagrammatic directions: A heatmap grid · B staircase · C progress tracks. Exported to window. ============================================================ */ /* ---- Shared data ------------------------------------------ */ const STAGES = [ { n: "01", name: "Manual", gloss: "Runs on memory" }, { n: "02", name: "Digital but scattered", gloss: "Tools, no standard" }, { n: "03", name: "Standardized", gloss: "One way to work" }, { n: "04", name: "AI-augmented", gloss: "The standard runs itself" }, ]; const ICONS = { doc: "M14 3v5h5M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM8 13h8M8 17h6", grid: "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z", layers: "M12 2l9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5", users: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.87M16 3.13A4 4 0 0 1 16 11", }; const FRONTS = [ { name: "Information & documentation", icon: "doc", cells: [ "In people’s heads, WhatsApp, paper on-site", "Digital but scattered; no naming, versions unclear", "One folder standard, one source of truth, found in minutes", "Ask in plain language, get the answer and its source", ], }, { name: "Process standardization", icon: "grid", cells: [ "However each engineer prefers; nothing written down", "Templates float around, mutated per project; each starts from scratch", "Same skeleton, formats & review cadence on every project", "Partly runs itself: AI drafts recurring reports, flags gaps", ], }, { name: "Tools & technology", icon: "layers", cells: [ "Paper, calls, WhatsApp; maybe Excel for the budget", "Drive, Excel, email, WhatsApp as disconnected islands", "One shared stack, used the same way; first AI assists", "AI on top of the stack, integrated into daily work", ], }, { name: "People & culture", icon: "users", cells: [ "Owner is the only one who understands the site; knowledge walks out", "A few digital-comfortable people, but personal not shared", "Internal champion; team trained; new hires onboard into a system", "AI is a normal teammate; the owner is off the critical path", ], }, ]; /* ---- Spanish parallels (used by MatrixHybrid, the embedded one) ---- */ const STAGES_ES = [ { n: "01", name: "Manual", gloss: "Depende de la memoria" }, { n: "02", name: "Digital pero disperso", gloss: "Herramientas, sin estándar" }, { n: "03", name: "Estandarizado", gloss: "Una sola forma de trabajar" }, { n: "04", name: "Asistida por IA", gloss: "El estándar se lleva solo" }, ]; const FRONTS_ES = [ { name: "Información y documentación", icon: "doc", cells: [ "En la cabeza de la gente, WhatsApp, papel en obra", "Digital pero disperso; sin nombramiento, versiones confusas", "Un estándar de carpetas, una fuente de verdad, se encuentra en minutos", "Pregunte en lenguaje natural, reciba la respuesta y su fuente", ] }, { name: "Estandarización de procesos", icon: "grid", cells: [ "Como cada residente prefiere; nada escrito", "Plantillas sueltas, mutadas por obra; cada una arranca de cero", "Mismo esqueleto, formatos y cadencia de revisión en cada obra", "En parte se lleva solo: la IA redacta informes recurrentes, marca vacíos", ] }, { name: "Herramientas y tecnología", icon: "layers", cells: [ "Papel, llamadas, WhatsApp; quizá Excel para el presupuesto", "Drive, Excel, correo, WhatsApp como islas desconectadas", "Un solo conjunto compartido, usado igual; primeros apoyos de IA", "IA sobre el conjunto, integrada al trabajo diario", ] }, { name: "Personas y cultura", icon: "users", cells: [ "El dueño es el único que entiende la obra; el conocimiento se va con la gente", "Unas pocas personas cómodas con lo digital, pero personal, no compartido", "Referente interno; equipo formado; los nuevos entran a un sistema", "La IA es un compañero más; el dueño sale de la ruta crítica", ] }, ]; const tr1 = (en, es) => (window.cecLang === "es" ? es : en); function Ico({ d, size = 22, sw = 1.85, color = "currentColor", style }) { return ( {d.split("M").filter(Boolean).map((s, i) => )} ); } /* Logo + wordmark lockup */ function Lockup({ dark }) { return (
CecropAI
); } /* ============================================================ HYBRID: Warm heatmap (A's grid clarity, C's paper + serif) ============================================================ */ function MatrixHybrid({ embed }) { const headBg = ["#E1D7C4", "#C3D9BE", "#73B795", "#00603C"]; const headFg = ["var(--ink-soft)", "#1f4a36", "#0a3322", "#F4EEE2"]; const cellBg = ["#EADFCC", "#DCE7D5", "#A9CDB5", "#00603C"]; const cellFg = ["var(--ink-soft)", "#3a4d3e", "#123829", "rgba(244,238,226,.95)"]; const cellBd = ["rgba(120,100,60,.16)", "rgba(60,100,70,.14)", "rgba(20,80,50,.16)", "transparent"]; const LS = window.cecLang === "es" ? STAGES_ES : STAGES; const LF = window.cecLang === "es" ? FRONTS_ES : FRONTS; return (
{/* header */} {!embed && (

The maturity matrix

From running on memory to running on a system

Project information & day-to-day management: the four fronts a firm climbs on, stage by stage.

)} {/* grid */}
{/* corner */}
{tr1("Four fronts ↓", "Cuatro frentes ↓")}
{/* stage headers */} {LS.map((s, i) => (
{i === 1 && ( {tr1("Most firms are here", "Aquí está la mayoría")} )}
{s.n} {s.name}
{s.gloss}
))} {/* rows */} {LF.map((f) => (
{f.name}
{f.cells.map((c, i) => (
{c}
))} ))}
{/* footnote */} {!embed && (

Few firms sit cleanly in one column, most straddle two, further along on some fronts than others. The greener the column, the more the work runs on a system rather than a person.

)}
); } /* ============================================================ DIRECTION A: Saturation heatmap grid ============================================================ */ function MatrixA() { const headBg = ["#E7E9EB", "#DCEEE4", "#9FD2B9", "#00603C"]; const headFg = ["var(--grey-700)", "var(--green-deep)", "#0c3826", "#fff"]; const cellBg = ["#EFF0F1", "#F1F8F4", "#DCEEE4", "#00603C"]; const cellFg = ["var(--grey-700)", "#2a4d3e", "#133b2b", "rgba(255,255,255,.94)"]; return (
{/* header */}

The maturity matrix

Project information & day-to-day management

Find the column that sounds most like your firm. Each row is a front; each column, a stage.

{/* grid */}
{/* corner */}
Four fronts ↓
{/* stage headers */} {STAGES.map((s, i) => (
{i === 1 && ( Most firms are here )}
{s.n} {s.name}
{s.gloss}
))} {/* rows */} {FRONTS.map((f) => (
{f.name}
{f.cells.map((c, i) => (
{c}
))} ))}
{/* footnote */}

A firm can sit between columns, place it where most of its answers cluster, then name the nearest gap. The greener the column, the more the work runs on a system instead of a person.

); } /* ============================================================ DIRECTION B: Staircase: the matrix that climbs ============================================================ */ function MatrixB() { const riserH = [58, 92, 128, 168]; const riserBg = ["#C7CDD2", "#9FD2B9", "#2F9E72", "#00603C"]; const riserFg = ["var(--grey-800)", "#0c3826", "#fff", "#fff"]; const topRule = ["#C7CDD2", "#9FD2B9", "#2F9E72", "#00603C"]; return (

The maturity matrix · a climb

Project information & day-to-day management

Beyond · Scaled
{/* corner */}
The four fronts
a firm climbs on
{/* risers */} {STAGES.map((s, i) => (
{s.n} {s.name}
{s.gloss}
))} {/* rows */} {FRONTS.map((f, ri) => (
{f.name}
{f.cells.map((c, i) => (
{c}
))} ))}

Each step is higher than the last, and you can’t skip one to reach the next. Most of the relief arrives at Standardized, before any heavy AI.

); } /* ============================================================ DIRECTION C: Progress tracks (editorial / paper) ============================================================ */ function NodeC({ level }) { // level 0..3 → ring → solid const fillScale = [0, 0.5, 0.78, 1][level]; const solid = level === 3; return ( {fillScale > 0 && ( )} {solid && ( )} ); } function MatrixC() { return (

The maturity matrix

Project information & day-to-day management

{/* stage column headers */}
Front ↓ · Stage → {STAGES.map((s, i) => (
{s.n}
{s.name}
))}
{/* tracks */}
{FRONTS.map((f, fi) => (
{/* label */}
{f.name}
{/* nodes with connecting line */} {f.cells.map((c, i) => (
{/* connecting line segments */} {i < 3 && } {c}
))}
))}

Read one front at a time: a firm fills in nodes left to right as it matures, and rarely sits at the same stage on every front.

); } Object.assign(window, { MatrixHybrid, MatrixA, MatrixB, MatrixC });