// Hero — editorial split (variant: 'studio' default | 'or' full-bleed scene)

function Hero({ variant = 'studio' }) {
  const isOR = variant === 'or';
  return (
    <section className={`section section--hero ${isOR ? 'section--hero-or' : ''}`} id="top">
      {isOR && (
        <div className="hero-or-bg" aria-hidden="true">
          <img src="assets/nephros-or.png" alt="" />
          <div className="hero-or-bg__veil"></div>
        </div>
      )}
      <div className="hero">
        <div className="hero__copy">
          <div className="hero__top">
            <div className="eyebrow">
              <span className="dot" aria-hidden="true"></span>
              <span className="num">001 / Introducing</span>
              <span>Nephros</span>
            </div>

            <h1 className="display hero__title">
              A new paradigm<br />
              in cardiac surgery. <em>A kidney<br />
              for the heart-lung machine.</em>
            </h1>

            <p className="lede">Nephros is the first device to clean the blood and restore electrolyte balance during cardiac surgery without dilution.</p>
          </div>

          <div className="hero__bottom">
            <div className="hero__ctas">
              <a href="#contact" className="btn btn--primary">
                Request a demo <span className="arrow">→</span>
              </a>
              <a href="#mechanism" className="btn btn--ghost">
                See how it works
              </a>
            </div>

            <dl className="hero__meta">
              <div>
                <dt>Indication</dt>
                <dd>Cardiopulmonary bypass, ECMO and Organ Procurement</dd>
              </div>
              <div>
                <dt>Mechanism</dt>
                <dd>Rapid volume-neutral electrolyte transfer</dd>
              </div>
              <div>
                <dt>Regulatory</dt>
                <dd>Class II · 510(k) pathway</dd>
              </div>
            </dl>
          </div>
        </div>

        {!isOR && (
          <div className="hero__visual" aria-hidden="true">
            <div className="hero__halo"></div>
            <div className="hero__rings">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <img className="hero__photo" src="assets/nephros-studio.png" alt="Nephros device with controller" />
          </div>
        )}
      </div>
    </section>
  );
}

window.Hero = Hero;