/* Hero — banner with animated stat strip */

function Hero() {
  return (
    <header className="hero" data-screen-label="00 Hero">
      <div className="hero__client">
        <img src="assets/medrite-logo.png" alt="Medrite Urgent Care" style={{ height: 26 }} />
        <span style={{ color: "var(--ss-grey-4)", fontSize: 18 }}>×</span>
        <img src="assets/superscript-logo.svg" alt="Superscript" style={{ height: 22, width: "auto", display: "block" }} />
        <span style={{ marginLeft: "auto" }}>NYC · NJ · FL · 25+ LOCATIONS</span>
      </div>

      <h1 className="hero__title">
        From payment bottlenecks to <em>89% patient yield</em><br/>
        in two weeks.
      </h1>

      <div className="hero__strip">
        <div className="hero__stat">
          <span className="hero__stat-label">[01] PATIENT YIELD</span>
          <span className="hero__stat-value">
            <CountStat to={89} suffix="%" duration={1700} />
          </span>
          <span className="hero__stat-delta">↗ FROM 71% · PILOT (3 SITES)</span>
        </div>
        <div className="hero__stat">
          <span className="hero__stat-label">[02] RECOVERED REVENUE</span>
          <span className="hero__stat-value">
            $<CountStat to={1.1} duration={1700} decimals={1} />M
          </span>
          <span className="hero__stat-delta">NETWORK PROJECTION · FULL YEAR</span>
        </div>
        <div className="hero__stat">
          <span className="hero__stat-label">[03] MIN SAVED / ENCOUNTER</span>
          <span className="hero__stat-value">
            <CountStat to={2.5} suffix="" duration={1700} decimals={1} />
          </span>
          <span className="hero__stat-delta">PILOT (3 SITES)</span>
        </div>
        <div className="hero__stat">
          <span className="hero__stat-label">[04] UNLOCKED ANNUAL THROUGHPUT</span>
          <span className="hero__stat-value">
            $<CountStat to={5.3} duration={1700} decimals={1} />M
          </span>
          <span className="hero__stat-delta">NETWORK PROJECTION · 24 SITES</span>
        </div>
      </div>
    </header>
  );
}

window.Hero = Hero;