/* global React */
/* ============================================================
   Inline accents: between-paragraph figures that restate &
   amplify. Unique names (own babel scope shares globals).
   ============================================================ */

const LIFECYCLE = [
  { num: "01", phase: "Win the work", sub: "Pre-construction",
    domains: ["Bidding & tendering", "Cost estimation & takeoff", "Proposal generation", "Permitting & approvals"] },
  { num: "02", phase: "Run the work", sub: "Execution",
    domains: ["Project information & day-to-day management", "Scheduling & planning", "Cost control & cash flow", "Procurement & logistics", "Quality control", "Health & safety", "Subcontractor management", "RFIs, submittals & change orders", "Progress reporting & deliverables"] },
  { num: "03", phase: "Close & learn", sub: "Handover & memory",
    domains: ["Closeout & handover", "Knowledge across projects", "Forecasting & risk anticipation"] },
];
const ACROSS = ["Client & owner communication", "Compliance & control"];
const FOUNDATION = "Project information & day-to-day management";
const tr3 = (en, es) => (window.cecLang === "es" ? es : en);

/* illustrative maturity (0–4 of 4) a typical firm sits at today */
const LEVELS = {
  "Project information & day-to-day management": 2,
  "Scheduling & planning": 1, "Cost control & cash flow": 1, "Procurement & logistics": 1,
  "Quality control": 1, "Health & safety": 1, "Subcontractor management": 1,
  "RFIs, submittals & change orders": 1, "Progress reporting & deliverables": 1,
  "Bidding & tendering": 1, "Cost estimation & takeoff": 1, "Proposal generation": 1, "Permitting & approvals": 1,
  "Closeout & handover": 0, "Knowledge across projects": 0, "Forecasting & risk anticipation": 0,
  "Client & owner communication": 1, "Compliance & control": 1,
};

function AccHead({ eyebrow, title, sub }) {
  return (
    <div style={{ marginBottom: 24 }}>
      <p style={{ font: "700 13px var(--font-sans)", letterSpacing: ".15em", textTransform: "uppercase", color: "var(--green-deep)", margin: 0 }}>{eyebrow}</p>
      <h2 style={{ font: "500 36px/1.04 var(--font-serif)", letterSpacing: "-.01em", color: "var(--ink)", margin: "9px 0 0" }}>{title}</h2>
      {sub && <p style={{ font: "400 14px/1.45 var(--font-sans)", color: "var(--ink-mute)", margin: "8px 0 0", maxWidth: 880 }}>{sub}</p>}
    </div>
  );
}

function AccLock() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <img src="assets/logo-mark.png" alt="" style={{ height: 22 }} />
      <span style={{ font: "300 16px/1 var(--font-sans)", letterSpacing: "-.01em", color: "var(--ink)" }}>Cecrop<b style={{ fontWeight: 700 }}>AI</b></span>
    </div>
  );
}

function AccFoot({ children, embed }) {
  if (embed) return null;
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 18, borderTop: "1.5px solid var(--stone)", paddingTop: 14 }}>
      <p style={{ font: "400 13px/1.42 var(--font-sans)", color: "var(--ink-soft)", margin: 0, maxWidth: 880 }}>{children}</p>
      <AccLock />
    </div>
  );
}

/* Stage ramp: same language as the matrix's four stages */
const SEG = ["#A9CDB5", "#5FA980", "#2F9E72", "#00603C"];
const STAGE_NAMES = ["Manual", "Digital", "Standardized", "AI-augmented"];

function Meter({ level, mode, onDark }) {
  const empty = onDark ? "rgba(255,255,255,.26)" : "var(--stone)";
  if (mode === "segments" || mode === "dots") {
    return (
      <span style={{ display: "inline-flex", gap: 3, flexShrink: 0 }}>
        {[0, 1, 2, 3].map((i) => (
          <span key={i} style={{
            width: mode === "dots" ? 7 : 13, height: 7, borderRadius: mode === "dots" ? "50%" : 2,
            background: i < level ? (onDark ? "#fff" : SEG[i]) : empty,
          }}></span>
        ))}
      </span>
    );
  }
  // 'word': explicit stage label
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
      <span style={{ width: 7, height: 7, borderRadius: "50%", background: level ? (onDark ? "#fff" : SEG[level - 1]) : empty }}></span>
      <span style={{ font: "600 11.5px var(--font-sans)", color: onDark ? "rgba(255,255,255,.85)" : "var(--ink-mute)", whiteSpace: "nowrap" }}>
        {level ? `0${level} ${STAGE_NAMES[level - 1]}` : "not started"}
      </span>
    </span>
  );
}

function StageLegend() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap", marginBottom: 18, padding: "12px 16px", background: "var(--paper-card)", border: "1px solid var(--stone)", borderRadius: 8 }}>
      <span style={{ font: "700 11px var(--font-sans)", letterSpacing: ".1em", textTransform: "uppercase", color: "var(--ink-mute)" }}>Where a typical firm sits today</span>
      <span style={{ display: "flex", gap: 16 }}>
        {STAGE_NAMES.map((n, i) => (
          <span key={n} style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
            <span style={{ width: 13, height: 7, borderRadius: 2, background: SEG[i] }}></span>
            <span style={{ font: "500 12.5px var(--font-sans)", color: "var(--ink)" }}><b style={{ fontWeight: 700, color: "var(--ink-mute)" }}>{`0${i + 1}`}</b> {n}</span>
          </span>
        ))}
      </span>
      <span style={{ font: "500 12px var(--font-sans)", color: "var(--ink-mute)", marginLeft: "auto", fontStyle: "italic" }}>illustrative · the same four stages as the matrix</span>
    </div>
  );
}

function Chip({ label, meterMode }) {
  const found = label === FOUNDATION;
  const lvl = LEVELS[label] || 0;
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10,
      background: found ? "var(--green-700)" : "var(--paper-card)",
      border: "1px solid " + (found ? "var(--green-700)" : "var(--stone)"),
      borderRadius: 7, padding: found ? "10px 13px" : "9px 13px",
    }}>
      <span style={{ display: "flex", alignItems: "center", gap: 9, minWidth: 0 }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: found ? "#fff" : "var(--green-300)", flexShrink: 0 }}></span>
        <span style={{ font: (found ? "700 " : "500 ") + "13px/1.25 var(--font-sans)", color: found ? "#fff" : "var(--ink)" }}>{label}</span>
      </span>
      {meterMode && meterMode !== "none" && <Meter level={lvl} mode={meterMode} onDark={found} />}
    </div>
  );
}

function PhaseCol({ p, meterMode }) {
  const twoCol = p.domains.length > 5;
  const found = p.domains.includes(FOUNDATION);
  const rest = p.domains.filter((d) => d !== FOUNDATION);
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 9, paddingBottom: 11, marginBottom: 13, borderBottom: "2px solid var(--ink)" }}>
        <span style={{ font: "300 22px var(--font-sans)", color: "var(--green-deep)" }}>{p.num}</span>
        <span style={{ font: "700 17px var(--font-sans)", color: "var(--ink)", letterSpacing: "-.01em" }}>{p.phase}</span>
        <span style={{ font: "500 12.5px var(--font-sans)", color: "var(--ink-mute)", marginLeft: "auto" }}>{p.sub}</span>
      </div>
      {found && <div style={{ marginBottom: 8 }}><Chip label={FOUNDATION} meterMode={meterMode} /></div>}
      <div style={{ display: "grid", gridTemplateColumns: twoCol ? "1fr 1fr" : "1fr", gap: 8, alignContent: "start" }}>
        {rest.map((d) => <Chip key={d} label={d} meterMode={meterMode} />)}
      </div>
    </div>
  );
}

function Arrow() {
  return (
    <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "center", paddingTop: 8 }}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--stone)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
    </div>
  );
}

function LifecycleBase({ meterMode, legend, title, sub, embed }) {
  return (
    <div style={{ width: "100%", height: embed ? "auto" : "100%", background: "var(--paper)", padding: embed ? 0 : "44px 56px 38px", display: "flex", flexDirection: "column", fontFamily: "var(--font-sans)" }}>
      {!embed && <AccHead eyebrow="The wider map · beyond the first domain" title={title} sub={sub} />}
      {legend && <StageLegend />}
      <div style={{ flex: embed ? "none" : 1, display: "grid", gridTemplateColumns: "1fr 28px 1.85fr 28px 1fr", gap: 0, columnGap: 18 }}>
        <PhaseCol p={LIFECYCLE[0]} meterMode={meterMode} />
        <Arrow />
        <PhaseCol p={LIFECYCLE[1]} meterMode={meterMode} />
        <Arrow />
        <PhaseCol p={LIFECYCLE[2]} meterMode={meterMode} />
      </div>
      {/* across band */}
      <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 16, background: "var(--paper-deep)", border: "1px solid var(--stone)", borderRadius: 8, padding: "13px 18px" }}>
        <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.15, flexShrink: 0 }}>
          <span style={{ font: "300 18px var(--font-sans)", color: "var(--green-deep)" }}>04</span>
          <span style={{ font: "700 15px var(--font-sans)", color: "var(--ink)" }}>Across the whole project</span>
        </span>
        <span style={{ width: 1, height: 30, background: "var(--stone)" }}></span>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {ACROSS.map((d) => (
            <span key={d} style={{ display: "flex", alignItems: "center", gap: 9, background: "var(--paper-card)", border: "1px solid var(--stone)", borderRadius: 7, padding: "8px 13px" }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--green-300)" }}></span>
              <span style={{ font: "500 13px var(--font-sans)", color: "var(--ink)" }}>{d}</span>
              {meterMode && meterMode !== "none" && <Meter level={LEVELS[d] || 0} mode={meterMode} />}
            </span>
          ))}
        </div>
        <span style={{ font: "500 12.5px/1.35 var(--font-sans)", color: "var(--ink-mute)", marginLeft: "auto", maxWidth: 230, textAlign: "right" }}>These run through every phase, not after it.</span>
      </div>
      <AccFoot embed={embed}>
        A firm sits at a different stage in each domain, and most of the territory is still low on the ladder. Get the <em style={{ fontStyle: "italic", color: "var(--green-deep)" }}>information foundation</em> solid first, then expand where the win is fastest: usually the early, document-heavy lifecycle.
      </AccFoot>
    </div>
  );
}

const L_TITLE = "The same four stages, across the whole business";
const L_SUB = "Project information is one domain among many. The four stages from the matrix apply to every part of construction management, and a firm sits at a different one in each.";

function LifecycleClean() {
  return <LifecycleBase meterMode="none" legend={false}
    title="Solve one domain: the same climb maps the rest"
    sub="Every part of construction management is its own climb, grouped here by where it sits in the life of a project. Project information is the foundation the rest builds on." />;
}
/* A: segmented meter + explicit stage legend */
function LifecycleStagesA({ embed }) { return <LifecycleBase embed={embed} meterMode="segments" legend={true} title={L_TITLE} sub={L_SUB} />; }
/* B: explicit stage word on every domain */
function LifecycleStagesB({ embed }) { return <LifecycleBase embed={embed} meterMode="word" legend={false} title="Most of the business is still on the first rungs" sub={L_SUB} />; }

/* ============================================================
   BONUS: a stat accent (a different accent type for the
   opening "where firms start" section).
   ============================================================ */
function StatBar() {
  return (
    <div style={{ width: "100%", fontFamily: "var(--font-sans)" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 28, flexWrap: "wrap" }}>
        <span style={{ font: "700 112px/0.86 var(--font-sans)", letterSpacing: "-.03em", color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>{tr3("95.5", "95,5")}<span style={{ fontSize: 52, color: "var(--ink-mute)" }}>%</span></span>
        <span style={{ font: "400 22px/1.45 var(--font-serif)", fontStyle: "italic", color: "var(--ink-soft)", maxWidth: 430, marginBottom: 12 }}>{tr3("of the data construction generates is never used.", "de los datos que genera la construcción nunca se usa.")}</span>
      </div>
      <div style={{ marginTop: 26, display: "flex", height: 18, borderRadius: 4, overflow: "hidden", border: "1px solid var(--stone)" }}>
        <div style={{ width: "4.5%", background: "var(--green-600)" }}></div>
        <div style={{ flex: 1, background: "var(--paper-deep)" }}></div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 9 }}>
        <span style={{ font: "600 12.5px var(--font-sans)", color: "var(--green-deep)" }}>{tr3("4.5% put to use", "4,5% se usa")}</span>
        <span style={{ font: "600 12.5px var(--font-sans)", color: "var(--ink-mute)" }}>{tr3("95.5% never used", "95,5% nunca se usa")}</span>
      </div>
    </div>
  );
}

function StatAccent({ embed }) {
  if (embed) return <StatBar />;
  return (
    <div style={{ width: "100%", height: "100%", background: "var(--paper)", padding: "52px 60px 44px", display: "flex", flexDirection: "column", justifyContent: "center", fontFamily: "var(--font-sans)" }}>
      <AccHead eyebrow="Where firms start · the cost of disorder" title="The information exists. It just can’t be found when it matters." />
      <StatBar />
      <AccFoot>
        Construction is among the least digitized sectors in the world, which is precisely why the ground gained by getting organized is so large, and so rarely contested.
      </AccFoot>
    </div>
  );
}

/* ============================================================
   FOUNDATION: project information is the base every job draws on.
   A simple "before the map" accent. Two takes: pillars · strata.
   ============================================================ */
const JOBS = [
  { num: "01", name: "Win the work", note: "Bidding, estimating & proposals: priced from your own past projects." },
  { num: "02", name: "Run the work", note: "Scheduling, costs & quality: steered by the live project record." },
  { num: "03", name: "Close & learn", note: "Handover & memory: feeds what worked back into the next bid." },
];
const FOUND_LABEL = "Project information & day-to-day management";
const FOUND_SUB = "Your firm’s own data on how it actually works";
const JOBS_ES = [
  { num: "01", name: "Ganar el trabajo", note: "Licitación, presupuesto y propuestas: con precios de sus propias obras pasadas." },
  { num: "02", name: "Ejecutar el trabajo", note: "Programación, costos y calidad: guiados por el registro vivo de la obra." },
  { num: "03", name: "Cerrar y aprender", note: "Entrega y memoria: lo que funcionó alimenta la siguiente oferta." },
];
const FOUND_LABEL_ES = "Información de obra y gestión del día a día";

/* A: three pillars standing on a foundation slab */
function FoundationPillars() {
  return (
    <div style={{ width: "100%", height: "100%", background: "var(--paper)", padding: "48px 58px 40px", display: "flex", flexDirection: "column", fontFamily: "var(--font-sans)" }}>
      <AccHead eyebrow="Why start here · the foundation"
        title="Every job runs on your own data"
        sub="Winning, running and closing all draw on the same thing: your firm’s record of how it works. That’s why project information is the first domain to get right." />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
        {/* pillars */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }}>
          {JOBS.map((j) => (
            <div key={j.num} style={{ background: "var(--paper-card)", border: "1px solid var(--stone)", borderRadius: "8px 8px 0 0", borderBottom: "none", padding: "18px 20px" }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ font: "300 20px var(--font-sans)", color: "var(--green-deep)" }}>{j.num}</span>
                <span style={{ font: "700 18px var(--font-sans)", color: "var(--ink)", letterSpacing: "-.01em" }}>{j.name}</span>
              </div>
              <p style={{ font: "400 13.5px/1.45 var(--font-sans)", color: "var(--ink-soft)", margin: "8px 0 0" }}>{j.note}</p>
            </div>
          ))}
        </div>
        {/* arrows */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, padding: "9px 0" }}>
          {JOBS.map((j, i) => (
            <div key={i} style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 7 }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-600)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M6 11l6-6 6 6" /></svg>
              <span style={{ font: "600 11px var(--font-sans)", letterSpacing: ".04em", textTransform: "uppercase", color: "var(--ink-mute)" }}>{i === 2 ? "draws on · feeds back" : "draws on"}</span>
            </div>
          ))}
        </div>
        {/* foundation slab */}
        <div style={{ background: "var(--green-700)", borderRadius: 10, padding: "22px 26px", display: "flex", alignItems: "center", gap: 18 }}>
          <span style={{ flexShrink: 0, width: 46, height: 46, borderRadius: 10, background: "rgba(255,255,255,.13)", display: "grid", placeItems: "center", color: "#fff" }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5" /></svg>
          </span>
          <div style={{ display: "flex", flexDirection: "column" }}>
            <span style={{ font: "700 11px var(--font-sans)", letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(255,255,255,.6)" }}>The foundation</span>
            <span style={{ font: "700 21px var(--font-sans)", color: "#fff", letterSpacing: "-.01em", marginTop: 3 }}>{FOUND_LABEL}</span>
            <span style={{ font: "400 14px var(--font-sans)", color: "rgba(255,255,255,.82)", marginTop: 2 }}>{FOUND_SUB}.</span>
          </div>
        </div>
      </div>
      <AccFoot>
        The advanced domains lean on the basics being in place first, so the firm that organizes its own data doesn’t just run cleaner projects, it <em style={{ fontStyle: "italic", color: "var(--green-deep)" }}>bids, builds and learns</em> from a stronger base than its competitors.
      </AccFoot>
    </div>
  );
}

/* B: strata: visible work sits on the data bedrock */
function FoundationStrata({ embed }) {
  const LJ = window.cecLang === "es" ? JOBS_ES : JOBS;
  return (
    <div style={{ width: "100%", height: embed ? "auto" : "100%", background: "var(--paper)", padding: embed ? 0 : "48px 58px 40px", display: "flex", flexDirection: "column", fontFamily: "var(--font-sans)" }}>
      {!embed && <AccHead eyebrow="Why start here · the foundation"
        title="Why the climb starts with project information"
        sub="Win, run, close: what a client sees. Every layer draws on your firm’s own record, and what you learn closing one job feeds the next." />}
      <div style={{ flex: embed ? "none" : 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: 0 }}>
        {/* top stratum: the visible work */}
        <div style={{ border: "1px solid var(--stone)", background: "var(--paper-card)", borderRadius: "10px 10px 0 0", padding: "16px 22px", display: "flex", alignItems: "stretch", gap: 16 }}>
          <span style={{ font: "700 11px var(--font-sans)", letterSpacing: ".12em", textTransform: "uppercase", color: "var(--ink-mute)", flexShrink: 0, width: 86, alignSelf: "center" }}>The visible work</span>
          <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 9 }}>
            {/* the flywheel loop: close & learn curls back to win the work */}
            <div style={{ position: "relative", height: 26 }}>
              {/* bracket — up from Close & learn, across, down into Win the work */}
              <div style={{ position: "absolute", left: "9%", right: "9%", top: 7, height: 13, borderTop: "1.5px solid var(--green-600)", borderLeft: "1.5px solid var(--green-600)", borderRight: "1.5px solid var(--green-600)", borderRadius: "9px 9px 0 0" }}></div>
              {/* origin tick at Close & learn */}
              <span style={{ position: "absolute", right: "9%", top: 16, width: 5, height: 5, borderRadius: "50%", background: "var(--green-600)", transform: "translateX(50%)" }}></span>
              {/* arrowhead into Win the work */}
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--green-600)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" style={{ position: "absolute", left: "9%", top: 14, transform: "translateX(-50%)" }}><path d="M6 9l6 6 6-6" /></svg>
              {/* label */}
              <span style={{ position: "absolute", left: "50%", top: 1, transform: "translateX(-50%)", background: "var(--paper-card)", padding: "0 9px", font: "600 10.5px var(--font-sans)", letterSpacing: ".07em", textTransform: "uppercase", color: "var(--green-deep)", whiteSpace: "nowrap" }}>{tr3("What you learn closing feeds the next bid", "Lo que aprende al cerrar alimenta la siguiente oferta")}</span>
            </div>
            {/* the three jobs */}
            <div style={{ display: "flex", gap: 12 }}>
              {LJ.map((j) => (
                <div key={j.num} style={{ flex: 1, display: "flex", flexDirection: "column", background: "var(--paper)", border: "1px solid var(--stone-soft)", borderRadius: 7, padding: "13px 16px" }}>
                  <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                    <span style={{ font: "300 17px var(--font-sans)", color: "var(--green-deep)" }}>{j.num}</span>
                    <span style={{ font: "700 16px var(--font-sans)", color: "var(--ink)", letterSpacing: "-.01em" }}>{j.name}</span>
                  </span>
                  <span style={{ font: "400 12.5px/1.4 var(--font-sans)", color: "var(--ink-soft)", marginTop: 6 }}>{j.note}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        {/* seam */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "10px 0" }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--green-600)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M6 11l6-6 6 6" /></svg>
          <span style={{ font: "600 11.5px var(--font-sans)", letterSpacing: ".06em", textTransform: "uppercase", color: "var(--ink-mute)" }}>{tr3("every layer draws on the record below · and feeds back into it", "cada capa se apoya en el registro de abajo · y lo retroalimenta")}</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--green-600)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M6 13l6 6 6-6" /></svg>
        </div>
        {/* bedrock stratum: the data */}
        <div style={{ background: "var(--green-700)", borderRadius: 10, padding: "24px 26px", display: "flex", alignItems: "center", gap: 18 }}>
          <span style={{ font: "700 11px var(--font-sans)", letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(255,255,255,.6)", flexShrink: 0, width: 86 }}>The bedrock</span>
          <span style={{ flexShrink: 0, width: 44, height: 44, borderRadius: 10, background: "rgba(255,255,255,.13)", display: "grid", placeItems: "center", color: "#fff" }}>
            <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5" /></svg>
          </span>
          <div style={{ display: "flex", flexDirection: "column" }}>
            <span style={{ font: "700 21px var(--font-sans)", color: "#fff", letterSpacing: "-.01em" }}>{tr3(FOUND_LABEL, FOUND_LABEL_ES)}</span>
            <span style={{ font: "400 14px var(--font-sans)", color: "rgba(255,255,255,.82)", marginTop: 3 }}>{tr3("The firm’s own record of how it actually works.", "El registro propio de la empresa sobre cómo trabaja de verdad.")}</span>
            <span style={{ font: "400 12.5px/1.4 var(--font-sans)", color: "rgba(255,255,255,.62)", marginTop: 4 }}>{tr3("When this layer is scattered, everything above it runs on memory and guesswork.", "Cuando esta capa está dispersa, todo lo de encima corre sobre memoria y conjeturas.")}</span>
          </div>
        </div>
      </div>
      <AccFoot embed={embed}>
        Fix the bedrock first and every domain above it climbs faster.
      </AccFoot>
    </div>
  );
}

Object.assign(window, { LifecycleClean, LifecycleStagesA, LifecycleStagesB, StatAccent, FoundationPillars, FoundationStrata });
