/* Hero — banner with animated stat strip */

function Hero() {
  return (
    <header className="hero" data-screen-label="00 Hero">
      <div className="hero__client">
        <img src="assets/foothills-logo.webp" alt="Foothills Neurology" style={{ height: 48, width: "auto", display: "block" }} />
        <span style={{ marginLeft: "auto" }}>ARIZONA · NEUROLOGY · 25 PROVIDERS</span>
      </div>

      <h1 className="hero__title">
        Foothills saw patient yield increase by 92.5% and asked to <em style={{ color: "var(--ss-blue)" }}>accelerate expansion before the pilot ended</em>.
      </h1>

      <div className="hero__strip">
        <div className="hero__stat">
          <span className="hero__stat-value">
            <CountStat to={77} suffix="%" duration={1700} />
          </span>
          <span className="hero__stat-label">PATIENT YIELD · ONE MONTH</span>
          <span className="hero__stat-delta">↗ FROM 40% · PRIOR-YEAR SAME WINDOW</span>
        </div>
        <div className="hero__stat">
          <span className="hero__stat-value">
            <CountStat to={97} suffix="%" duration={1700} />
          </span>
          <span className="hero__stat-label">A/R REDUCTION</span>
          <span className="hero__stat-delta">FROM 4-5 MONTHS TO ROUGHLY ONE DAY</span>
        </div>
        <div className="hero__stat">
          <span className="hero__stat-value">
            <CountStat to={36} suffix="%" duration={1700} />
          </span>
          <span className="hero__stat-label">DOLLARS PAID PRE-VISIT</span>
          <span className="hero__stat-delta">VIA AUTOMATED TEXT-TO-PAY</span>
        </div>
        <div className="hero__stat">
          <span className="hero__stat-value">
            <CountStat to={3} suffix=" hrs" duration={1700} />
          </span>
          <span className="hero__stat-label">TO FULLY TRAIN THE ADMIN TEAM</span>
        </div>
      </div>
    </header>
  );
}

window.Hero = Hero;