// Mechanism — three modes (zero-balance, ultrafiltration, combination)

const MECH_STEPS = [
  { n: "Mode 01", h: "Zero balance",
    p: "Volume-neutral correction of electrolyte and acid-base disturbances. Specific ions transferred across the circuit without changing total circulating volume." },
  { n: "Mode 02", h: "Ultrafiltration",
    p: "Controlled removal of free plasma water. Targeted volume management, decoupled from electrolyte chemistry." },
  { n: "Mode 03", h: "Combination",
    p: "Simultaneous electrolyte correction and fluid removal. Address metabolic and volume derangements in parallel, not as serial tradeoffs." },
  { n: "Result", h: "Coordinated stability",
    p: "Potassium, pH, lactate, sodium, glucose, hematocrit and volume status normalize together. Holistic remediation, not isolated manipulation." }
];

function Mechanism() {
  return (
    <section className="section" id="mechanism">
      <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">004</span>
              <span>How it works</span>
            </span>
          </div>
          <div>
            <h2 className="h2 section-head__title">
              Three modes, <em>one circuit,</em> the whole physiology on target.
            </h2>
          </div>
        </div>

        <div className="mech">
          {MECH_STEPS.map((s, i) => (
            <div className="mech__step" key={i}>
              <div className="mech__num">{s.n}</div>
              <h5>{s.h}</h5>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Mechanism = Mechanism;