// Device showcase — proposal-sourced content

const DEVICE_BULLETS = [
{ idx: "01", h: "Three integrated modes", link: "#mechanism",
  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: "Patented electrolyte transfer system",
  p: "Rapidly equilibrates blood chemistry to physiologic targets, without the fluid burden that drives edema." },
{ idx: "03", h: "Modular, mast-mounted system",
  p: "A compact controller mounts directly to the bypass mast and pairs with a single-use sterile cartridge. Minimal integration footprint, no rearrangement of your current configuration." },
{ idx: "04", h: "Seamless integration into existing circuits",
  p: "Designed as an incremental addition to existing extracorporeal systems. Familiar interfaces, terms 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="assets/nephros-studio.png" alt="Nephros RH01Z housing render" />
            </div>
          </div>

          <div className="device__copy">
            <p className="lede" style={{ marginTop: 0 }}>Nephros is a durable device and 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>
                    {b.link ? (
                      <a href={b.link} className="device__bullet-link">
                        <h5>{b.h} <span className="device__bullet-arrow" aria-hidden="true">↓</span></h5>
                      </a>
                    ) : (
                      <h5>{b.h}</h5>
                    )}
                    <p>{b.p}</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

window.Device = Device;