/* global React */ /* ============================================================ What each step pays: TWO KINDS OF PAYOFF. Relief (defensive, saturates) → Leverage (offensive, compounds), handed off at Standardized. Two forms: curves · ledger. Warm paper + serif. Green = relief, ochre = leverage (the remark). ============================================================ */ const PSTAGES = ["Manual", "Digital", "Standardized", "AI-augmented", "Scaled"]; const tr2 = (en, es) => (window.cecLang === "es" ? es : en); const STEPS = [ { fnum: "01", tnum: "02", from: "Manual", to: "Digital", type: "Relief", asks: "Get information out of heads and paper into shared digital files.", pays: "Work stops disappearing.", rest: "Files exist: searchable, shareable, backed up.", }, { fnum: "02", tnum: "03", from: "Digital", to: "Standardized", type: "Relief", big: true, asks: "One standard on every project: same folders, naming, and review cadence.", pays: "Most of the daily relief lands here.", rest: "Every project starts organized; anyone finds anything in minutes; new hires onboard into a system.", }, { fnum: "03", tnum: "04", from: "Standardized", to: "AI-augmented", type: "Leverage", asks: "Put AI on the standard: search, drafting, flagging; and train the team.", pays: "The standard starts working for you.", rest: "Answers with their source, reports draft themselves, errors caught, owner off the critical path.", }, { fnum: "04", tnum: "05", from: "AI-augmented", to: "Scaled", type: "Leverage", horizon: true, asks: "AI works across functions and carries learning from one project to the next.", pays: "Take on more work without more of the owner.", rest: "Capability compounds: the horizon the climb points at.", }, ]; /* Catmull-Rom → bezier smoothing */ function smooth(pts) { if (pts.length < 2) return ""; let d = `M ${pts[0][0]} ${pts[0][1]}`; for (let i = 0; i < pts.length - 1; i++) { const p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || p2; const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6; const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6; d += ` C ${c1x} ${c1y}, ${c2x} ${c2y}, ${p2[0]} ${p2[1]}`; } return d; } function PHeader({ eyebrow, title, sub }) { return (

{eyebrow}

{title}

{sub}

); } function Lock() { return (

CecropAI

); } function PFoot({ children, embed }) { if (embed) return null; return (

{children}

); } /* ============================================================ ① TWO CURVES: relief saturates, leverage compounds ============================================================ */ function PayoffCurves() { const VW = 1164, VH = 470; const L = 58, R = 48, T = 66, B = 64; const x = (i) => L + i * (VW - L - R) / 4; const yBot = VH - B, yTop = T; const y = (v) => yBot - v * (yBot - yTop); const relief = [0.06, 0.32, 0.84, 0.91, 0.93]; const leverage = [0.02, 0.05, 0.17, 0.54, 0.99]; const rPts = relief.map((v, i) => [x(i), y(v)]); const lPts = leverage.map((v, i) => [x(i), y(v)]); const rArea = smooth(rPts) + ` L ${x(4)} ${yBot} L ${x(0)} ${yBot} Z`; return (

By Standardized a firm has banked nearly all the relief, which is why a cautious firm can stop there. It’s also the platform the leverage needs: the AI layer is upside, not the price of entry.

); } /* ============================================================ ② THE LEDGER: what each step asks, and what it pays ============================================================ */ function TypeTag({ type }) { const relief = type === "Relief"; return ( {type} ); } function PayoffLedger() { return (

{/* column headers */}

{["The move", "What it asks", "What it pays back", "Kind"].map((h) => ( {h} ))}

{/* rows */}

{STEPS.map((s, i) => (

{/* move */}

{s.fnum} {s.from} {s.tnum} {s.to}

{/* asks */}

{s.asks}

{/* pays */}

{s.pays}{s.big && ★ the big one}
{s.rest}

{/* kind */}

{s.horizon &&

horizon

}

))}

The first moves return relief: pain removed, big and finite. The later moves return leverage: capability that compounds. Each pays before the next begins, so the climb is safe to start and safe to pause.

); } /* ============================================================ ③ THE DIPTYCH: two words, two ideas, one hinge ============================================================ */ function PayoffDiptych({ embed }) { return (

{!embed && (

Moving up · what each step pays

First the climb removes pain. Then it compounds.

)}

{/* RELIEF */}

{tr2("Stages 1 → 3", "Etapas 1 → 3")}

{tr2("Relief", "Alivio")}

{window.cecLang === "es" ? (<>Archivos perdidos, caos, el dueño como cuello de botella: eliminados. La ganancia es grande y rápida, y es finita. Una vez despejado el desorden, queda despejado.) : (<>Lost files, chaos, the owner as the bottleneck: removed. The gain is big and fast, and it is finite. Once the mess is cleared, it’s cleared.)}

{tr2("Mostly banked by stage 3. A cautious firm can stop here and keep it.", "Casi todo asegurado para la etapa 3. Una empresa cautelosa puede parar aquí y conservarlo.")}

{/* LEVERAGE */}

{tr2("Stages 3 → 5", "Etapas 3 → 5")}

{tr2("Leverage", "Palanca")}

{window.cecLang === "es" ? (<>El estándar se vuelve una plataforma. La IA multiplica la producción, y la empresa crece sin que crezca el dueño. Lento al principio, luego sin techo.) : (<>The standard becomes a platform. AI compounds output, and the firm grows without growing the owner. Slow to start, then open-ended.)}

{tr2("Begins at AI-augmented. The upside a firm climbs toward once the relief is banked.", "Empieza en Asistida por IA. El potencial hacia el que sube una empresa una vez asegurado el alivio.")}

{/* hinge divider */}

{tr2("The standard", "El estándar")}

The same climb pays two different ways. The first half buys peace; the second half buys scale, and the standard in the middle is what turns one into the other.

); } /* ============================================================ ④ THE HINGE LINE: one line, one pivot ============================================================ */ function PayoffHinge() { return (

Moving up · what each step pays

One climb, two kinds of payoff

Everything to the left of the standard is relief a firm can bank and keep. Everything to the right is leverage that compounds, which is why the climb is safe to start, and worth continuing.

); } Object.assign(window, { PayoffCurves, PayoffLedger, PayoffDiptych, PayoffHinge });