/* Challenge — animated bars + body copy */

function Challenge() {
  const [ref, inView] = useInView({ threshold: 0.3, once: true });
  return (
    <Section id="challenge" num="[01] / CHALLENGE" title={<>Before Superscript, cash arrived months late, <em>or not at all.</em></>}>
      <div className="grid-2" ref={ref}>
        <div>
          <p className="body" style={{ maxWidth: 520, marginBottom: 28 }}>
            knownwell is a fast-growing, multi-state primary care group dedicated to
            treating obesity, delivering ongoing care through in-person and virtual visits.
            The practice eventually collected about 87% of patient responsibility, but the
            cash took months to come in, and the rest never did.
          </p>
          <p className="body muted" style={{ maxWidth: 520, marginBottom: 36 }}>
            Reaching that lifetime rate took 6 to 8 months per balance. Staff spent that
            time chasing patient payments and checking eligibility by hand, with most of
            the revenue sitting in A/R long after the visit.
          </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" }}>
              Collect faster, with <em style={{ color:"var(--ss-blue)", fontStyle:"italic" }}>zero</em> added admin time.
            </div>
          </div>
        </div>

        <div>
          <div className="label" style={{ marginBottom: 18 }}>[A] PRE-SUPERSCRIPT · STATE OF COLLECTIONS</div>

          <ChallengeStat
            label="Patient revenue collected within 1 month of service"
            target={40}
            cap="60¢ of every dollar still outstanding a month after the visit"
            inView={inView}
            color="red"
          />
          <ChallengeStat
            label="Lifetime collections — reached only after 6–8 months"
            target={87}
            cap="A strong end state, but cash arrived months late"
            inView={inView}
            color="black"
          />
        </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;