// Device showcase — proposal-sourced content

const DEVICE_BULLETS = [
{ idx: "01", h: "Three integrated modes",
  p: "Zero-balance for volume-neutral electrolyte and acid-base correction. Ultrafiltration for controlled removal of free plasma water. Combination mode for both, in parallel." },
{ idx: "02", h: "Countercurrent electrolyte transfer",
  p: "A patented transfer interface diffuses specific ions across the circuit without bulk fluid exchange direct correction, not dilution." },
{ idx: "03", h: "Durable platform + sterile cartridge",
  p: "A reusable controller paired with a single-use disposable cartridge. Established procurement model. Recurring revenue. Scales like a hemofilter, not a capital install." },
{ idx: "04", h: "Seamless integration into existing circuits",
  p: "Designed as an incremental addition to existing extracorporeal systems. Familiar interfaces and connections. No workflow rewrite for surgeons or perfusionists." }];


function Device() {
  return (
    <section className="section" id="device">
      <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">003</span>
              <span>The device</span>
            </span>
          </div>
          <div>
            <h2 className="h2 section-head__title">
              One platform. <em>Three modes.</em><br />
              Coordinated physiology, not competing tradeoffs.
            </h2>
          </div>
        </div>

        <div className="device">
          <div className="device__visual">
            <span className="device__corner device__corner--tl"></span>
            <span className="device__corner device__corner--bl"></span>
            <span className="device__corner device__corner--br"></span>
            <div className="device__render">
              <img src="nephros-studio.png" alt="Nephros RH01Z housing render" />
            </div>
          </div>

          <div className="device__copy">
            <p className="lede" style={{ marginTop: 0 }}>Nephros is a durable, modular controller paired with a sterile, single-use cartridge. Together they replace dilution-based management with direct, real-time control of blood chemistry inside the bypass circuit.</p>

            <div className="device__bullets">
              {DEVICE_BULLETS.map((b) =>
              <div className="device__bullet" key={b.idx}>
                  <div className="idx">{b.idx}</div>
                  <div>
                    <h5>{b.h}</h5>
                    <p>{b.p}</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

window.Device = Device;