/* Results — animated big-number comparisons + wait-time chart */

function Results() {
  const [ref, inView] = useInView({ threshold: 0.25, once: true });

  return (
    <Section id="results" num="[03] / RESULTS"
             title={<>Across three pilot sites, yield rose from 71% to 89% in <em>two weeks.</em></>}>

      <p className="body muted" style={{ maxWidth: 720, marginBottom: 48 }}>
        Pilot KPIs measured at three high-volume Medrite locations (Lenox, East Village, Myrtle Ave)
        against the same window the prior year. Annualized dollar impacts are projections
        across the full 25+ location network.
      </p>

      <div ref={ref} style={{ display:"flex", flexDirection:"column", gap: 64 }}>

        {/* Row 1: Patient yield */}
        <ResultRow
          tag="[A] PATIENT YIELD"
          headline={<>Yield jumped 18 points at the pilot sites. Applied to the full-year 2025 network baseline of 81%, that projects to <em style={{ color:"var(--ss-blue)", fontStyle:"italic" }}>$1.1M in recovered patient revenue.</em></>}
          before={{ label: "Pilot sites, same window 2025", value: 71, cap: "3-SITE PILOT · BASELINE" }}
          after={{ label: "Pilot sites, Feb to Apr 2026", value: 89, cap: "PILOT MEASURED" }}
          delta={{ label: "Projected recovered revenue", value: "$1.1M", cap: "NETWORK PROJECTION · FULL YEAR" }}
          inView={inView}
          suffix="%"
        />

        {/* Row 2: Wait time / minutes saved */}
        <div>
          <div className="label label--blue" style={{ marginBottom: 12 }}>[B] FRONT-DESK THROUGHPUT</div>
          <h3 style={{
            fontFamily:"var(--font-sans)", fontSize: 36, lineHeight: 1.05,
            letterSpacing:"-0.03em", fontWeight: 400, marginBottom: 28,
            maxWidth: 880
          }}>
            <em style={{ color:"var(--ss-blue)", fontStyle:"italic" }}>2.5 minutes</em> saved per encounter at the pilot sites. Across the network, that's <strong>2,400+ staff-minutes per day</strong>, or 4+ FTEs without a single new hire.
          </h3>

          <div className="wait">
            <div className="wait__row">
              <div className="wait__row-label">PATIENT WAIT · PRE-SUPERSCRIPT</div>
              <div className="wait__row-bar">
                <div className="wait__row-fill" style={{ width: inView ? "100%" : 0 }} />
              </div>
              <div className="wait__row-val">12.2 min</div>
            </div>
            <div className="wait__row">
              <div className="wait__row-label">PATIENT WAIT · WITH SUPERSCRIPT</div>
              <div className="wait__row-bar">
                <div className="wait__row-fill wait__row-fill--blue"
                     style={{ width: inView ? (9.7 / 12.2 * 100) + "%" : 0 }} />
              </div>
              <div className="wait__row-val">9.7 min</div>
            </div>
          </div>

          <div style={{
            marginTop: 16,
            padding: "28px 40px",
            border: "1px solid var(--ss-grey-5)",
            background: "var(--ss-white)",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            gap: 32,
            flexWrap: "wrap"
          }}>
            <div>
              <div className="label" style={{ color: "var(--ss-grey-3)", marginBottom: 6 }}>UNLOCKED ANNUAL THROUGHPUT</div>
              <div style={{ fontSize: 14, color: "var(--ss-grey-2)" }}>
                4 additional patient slots per location per day, across 24 locations
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 56,
                            letterSpacing: "-0.02em", lineHeight: 1, color: "var(--ss-blue)" }}>
                $<CountStat to={5.3} duration={1700} decimals={1} />M
              </div>
              <div className="label" style={{ color: "var(--ss-blue)", marginTop: 6 }}>
                NETWORK PROJECTION · FULL YEAR
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

function ResultRow({ tag, headline, before, after, delta, inView, suffix }) {
  const diff = after.value - before.value;
  return (
    <div>
      <div className="label label--blue" style={{ marginBottom: 12 }}>{tag}</div>
      <h3 style={{
        fontFamily:"var(--font-sans)", fontSize: 36, lineHeight: 1.05,
        letterSpacing:"-0.03em", fontWeight: 400, marginBottom: 28,
        maxWidth: 880
      }}>
        {headline}
      </h3>

      <div className="compare">
        <div className="compare__cell">
          <div className="compare__label">{before.label}</div>
          <div className="compare__big">
            <ComparedNumber inView={inView} to={before.value} />
            <sub>{suffix}</sub>
          </div>
          <div className="compare__cap">{before.cap || "BASELINE · PRE-PILOT"}</div>
        </div>
        <div className="compare__cell">
          <div className="compare__label">{after.label}</div>
          <div className="compare__big is-after">
            <ComparedNumber inView={inView} to={after.value} />
            <sub>{suffix}</sub>
          </div>
          <div className="compare__cap" style={{ color:"var(--ss-blue)" }}>
            ↗ +{diff} POINTS{after.cap ? " · " + after.cap : ""}
          </div>
        </div>
        <div className="compare__cell">
          <div className="compare__label">{delta.label}</div>
          <div className="compare__big is-after">{delta.value}</div>
          <div className="compare__cap" style={{ color:"var(--ss-blue)" }}>{delta.cap || "ANNUALIZED IMPACT"}</div>
        </div>
      </div>
    </div>
  );
}

function ComparedNumber({ to, inView }) {
  const v = useCountUp(to, { duration: 1600, active: inView });
  return <>{Math.round(v)}</>;
}

window.Results = Results;