/* Challenge — animated bars + body copy */

function Challenge() {
  const [ref, inView] = useInView({ threshold: 0.3, once: true });
  return (
    <Section id="challenge" num="[01] / CHALLENGE" title={<>Patient revenue was leaking, and <em>front desk teams were stretched.</em></>}>
      <div className="grid-2" ref={ref}>
        <div>
          <p className="body" style={{ maxWidth: 520, marginBottom: 28 }}>
            Medrite is a high-volume urgent care with 25+ locations across NYC, NJ, and FL.
            Despite growing brand and geographic footprint, the front desk was overloaded
            and patient revenue was leaking, driven by the rise of HDHPs and
            coinsurance plans where copay collection no longer covers the bill.
          </p>
          <p className="body muted" style={{ maxWidth: 520, marginBottom: 36 }}>
            Check-in bottlenecks delayed care, lost capacity, and pushed thousands of dollars
            of patient responsibility into A/R every day.
          </p>

          <div style={{
            padding: "20px 24px",
            border: "1px solid var(--ss-black)",
            background: "var(--ss-white)",
            maxWidth: 520,
          }}>
            <div className="label label--blue" style={{ marginBottom: 8 }}>THE GOAL</div>
            <div style={{ fontSize: 22, lineHeight: 1.15, letterSpacing: "-0.02em" }}>
              Increase total collections while <em style={{ color:"var(--ss-blue)", fontStyle:"italic" }}>reducing</em> front-desk time.
            </div>
          </div>
        </div>

        <div>
          <div className="label" style={{ marginBottom: 18 }}>[A] STATE OF COLLECTIONS AT THE 3 PILOT SITES</div>

          <ChallengeStat
            label="Patient yield, same window prior year"
            target={71}
            cap="29¢ on every dollar of patient responsibility lost"
            inView={inView}
            color="black"
          />
          <ChallengeStat
            label="Patients with no card on file"
            target={44}
            cap="No way to collect post-visit balance"
            inView={inView}
            color="red"
          />
        </div>
      </div>
    </Section>
  );
}

function ChallengeStat({ label, target, cap, inView, color }) {
  const v = useCountUp(target, { duration: 1400, active: inView });
  return (
    <div style={{ marginBottom: 28 }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom: 8 }}>
        <span className="label" style={{ color:"var(--ss-grey-2)" }}>{label}</span>
        <span style={{ fontFamily:"var(--font-sans)", fontSize: 32, letterSpacing:"-0.03em" }}>
          {Math.round(v)}%
        </span>
      </div>
      <div className="bar">
        <div className={"bar__fill" + (color === "red" ? " bar__fill--red" : "")}
             style={{ width: (inView ? target : 0) + "%" }} />
      </div>
      <div className="label" style={{ marginTop: 6, color:"var(--ss-grey-3)" }}>{cap}</div>
    </div>
  );
}

window.Challenge = Challenge;