/* Hero — full-org headline with animated stat strip */

function Hero() {
  return (
    <header className="hero" data-screen-label="00 Hero">
      <div className="hero__client hero__client--center">
        <img src="assets/knownwell-logo.png" alt="knownwell" style={{ height: 26, width: "auto", display: "block" }} />
        <span style={{ color: "var(--ss-grey-4)", fontSize: 18 }}>×</span>
        <img src="assets/superscript-logo.svg" alt="Superscript" style={{ height: 30, width: "auto", display: "block" }} />
      </div>

      <h1 className="hero__title">
        Across knownwell's national virtual care group, patient yield rose
        <em> from 76.6% to 86.8%</em> after go-live, with zero added admin hours.
      </h1>

      <div className="label" style={{ color: "var(--ss-grey-3)", marginBottom: 32, letterSpacing: "-0.01em" }}>
        NATIONAL VIRTUAL CARE · PROVIDER GROUP · JAN–MAY 2026 VS. JUN–DEC 2025
      </div>

      <div className="hero__strip">
        <div className="hero__stat">
          <span className="hero__stat-value">
            <CountStat to={86.8} decimals={1} suffix="%" duration={1700} />
          </span>
          <span className="hero__stat-label">Overall patient yield</span>
          <span className="hero__stat-delta">↗ FROM 76.6% · MEASURED, ORG-WIDE</span>
        </div>
        <div className="hero__stat">
          <span className="hero__stat-value">
            +<CountStat to={10.2} decimals={1} duration={1700} /> pts
          </span>
          <span className="hero__stat-label">Yield lift after go-live</span>
          <span className="hero__stat-delta">1.13× THE PRIOR COLLECTION RATE</span>
        </div>
        <div className="hero__stat">
          <span className="hero__stat-value">
            <CountStat to={0} duration={1200} />
          </span>
          <span className="hero__stat-label">Added admin hours</span>
          <span className="hero__stat-delta">NO-TOUCH COLLECTION FLOW</span>
        </div>
      </div>

      <div style={{ marginTop: 24, padding: "16px 24px", border: "1px solid var(--ss-black)",
                    background: "var(--ss-white)", display: "inline-block" }}>
        <div className="label" style={{ color: "var(--ss-grey-3)", marginBottom: 6 }}>OUTCOME</div>
        <div style={{ fontSize: 15, letterSpacing: "-0.01em", color: "var(--ss-grey-2)" }}>
          A telehealth pilot proved the model, and knownwell rolled Superscript out
          <strong style={{ color: "var(--ss-black)" }}> across the national virtual care group before the pilot even ended.</strong>
        </div>
      </div>
    </header>
  );
}

window.Hero = Hero;