// Paradigm shift: current management vs Nephros (sourced from proposal)

const PARADIGM_ROWS = [
{
  old: { tag: "Standard of care",
    h: "Indirect, volume-driven correction",
    p: "Bypass primes, cardioplegia solutions, and various blood products flood the circuit with deleterious electrolytes like potassium. Conventional practice dilutes the patient's blood with several liters of potassium-free crystalloid, volumes that in some cases exceed the patient's native blood volume, then attempts partial removal via hemoconcentration." },
  nu: { tag: "Nephros",
    h: "Direct, volume-neutral electrolyte transfer",
    p: "A dedicated extracorporeal interface enables targeted correction of specific ions without altering total circulating volume. Direct intervention on blood chemistry, not indirect correction through dilution." }
},
{
  old: { tag: "Standard of care",
    h: "One correction induces secondary derangements",
    p: "Large volumes of 0.9% NaCl lower pH, calcium, magnesium, and bicarbonate while raising sodium and chloride. Dilution of plasma proteins disrupts oncotic balance, driving plasma water into the interstitial space." },
  nu: { tag: "Nephros",
    h: "Coordinated physiologic balance",
    p: "Electrolyte composition, acid\u2013base status, and fluid balance are managed simultaneously. Coordinated stability across parameters, rather than sequential trade-offs between them." }
},
{
  old: { tag: "Standard of care",
    h: "Slow, imprecise volume removal",
    p: "Hemoconcentration removes excess fluid slowly and incompletely; removal does not match volume introduced. Residual fluid produces interstitial edema, prolonged ventilation, and delayed recovery." },
  nu: { tag: "Nephros",
    h: "Targeted ultrafiltration on demand",
    p: "Three integrated modes (zero-balance, ultrafiltration, and combination) decouple volume management from electrolyte chemistry. Free plasma water is removed precisely when, and to the extent, clinically indicated." }
},
{
  old: { tag: "Standard of care",
    h: "Disturbance compounds with time on bypass",
    p: "Physiologic disruption worsens with time on bypass and is associated with increased morbidity and mortality. Surgical teams prioritize speed to limit exposure to a non-physiologic state." },
  nu: { tag: "Nephros",
    h: "Sustained physiologic control across the run",
    p: "Validated for both rapid front-end correction and ongoing maintenance. Works with CPB, ECLS and ex vivo organ-perfusion configurations. Physiology is actively remediated and preserved." }
}];


function StatGraphic() {
  return (
    <div className="stat-graphic" aria-label="Cardiac-surgery-associated acute kidney injury statistics">
      <div className="stat-graphic__row">
        <div className="stat-graphic__num">
          <span className="stat-graphic__big">20–30<span className="stat-graphic__pct">%</span></span>
          <span className="stat-graphic__rule" aria-hidden="true"></span>
        </div>
        <div className="stat-graphic__copy">
          <span className="stat-graphic__label">of cardiac surgery patients</span>
          <span className="stat-graphic__sub">develop acute kidney injury after bypass</span>
        </div>
      </div>

      <div className="stat-graphic__divider" aria-hidden="true">
        <span>which drives a</span>
      </div>

      <div className="stat-graphic__row stat-graphic__row--alarm">
        <div className="stat-graphic__num">
          <span className="stat-graphic__big">600<span className="stat-graphic__pct">%</span></span>
          <span className="stat-graphic__rule stat-graphic__rule--alarm" aria-hidden="true"></span>
        </div>
        <div className="stat-graphic__copy">
          <span className="stat-graphic__label">increase in mortality</span>
          <span className="stat-graphic__sub">vs. patients who do not develop CSA-AKI (Cardiac-Surgery-Associated Acute Kidney Injury)</span>
        </div>
      </div>
    </div>
  );
}


function Paradigm() {
  return (
    <section className="section" id="paradigm">
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__label">
            <span className="eyebrow">
              <span className="dot" aria-hidden="true"></span>
              <span className="num">01</span>
              <span>The shift</span>
            </span>
          </div>
          <div>
            <h2 className="h2 section-head__title">
              Blood chemistry on bypass still relies on a <em style={{ color: 'rgb(200, 43, 16)' }}>dilution-based paradigm</em> that has not fundamentally changed in over sixty years.
            </h2>
            <p className="body" style={{ marginTop: 20 }}>Each year, approximately 300,000 U.S. adults depend on cardiopulmonary bypass. Nephros addresses the mechanism that drives the complications: indirect, volume-driven correction of blood chemistry inside the extracorporeal circuit.</p>

            <StatGraphic/>

            <p className="body" style={{ marginTop: 28 }}>Bypass primes, cardioplegia solutions, and various blood products flood the circuit with deleterious electrolytes. To compensate, clinicians dilute the patient's blood with several liters of crystalloid, volumes that in some cases exceed the patient's native blood volume, then attempt partial removal through hemoconcentration. The result is extreme electrolyte derangement, acid-base disruption, large fluid shifts, and interstitial edema that drives prolonged ventilation, organ injury, and delayed recovery. Severity scales with time on bypass, and current management offers no way out of the trade-off.</p>
          </div>
        </div>

        <div className="paradigm">
          {PARADIGM_ROWS.map((r, i) =>
          <React.Fragment key={i}>
              <div className="paradigm__col paradigm__col--old">
                <div className="tag">{r.old.tag}</div>
                <h4>{r.old.h}</h4>
                <p>{r.old.p}</p>
              </div>
              <div className="paradigm__col paradigm__col--new">
                <div className="tag">{r.nu.tag}</div>
                <h4>{r.nu.h}</h4>
                <p>{r.nu.p}</p>
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

}

window.Paradigm = Paradigm;