/* Challenge — animated bars + body copy */

function Challenge() {
  const [ref, inView] = useInView({ threshold: 0.3, once: true });
  return (
    <Section id="challenge" num="[01] / PRE-SUPERSCRIPT" title={<>They were hitting 86% lifetime collections, but it was taking 8 to 10 months to get there.</>}>
      <div ref={ref} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, maxWidth: 980 }}>
        <div>
          <p className="body muted" style={{ marginBottom: 18, fontSize: 15, lineHeight: 1.55 }}>
            A 25-provider neurology practice in Arizona. The headline number was healthy, but the front desk was chasing patient balances by phone and a backlog of older balances had no scalable recovery path.
          </p>

          <div style={{
            padding: "14px 16px",
            borderLeft: "2px solid var(--ss-blue)",
            background: "transparent",
          }}>
            <div className="label" style={{ color: "var(--ss-blue)", marginBottom: 4 }}>THE GOAL</div>
            <div style={{ fontSize: 15, lineHeight: 1.4, letterSpacing: "-0.01em", color: "var(--ss-black)" }}>
              Faster collections with zero added admin time.
            </div>
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <MiniStat
            label="Revenue uncollected 1 month post-DOS"
            value="54%"
            cap="A/R tail dragged 8 to 10 months to clear"
          />
          <MiniStat
            label="Patient yield, same window prior year"
            value="40%"
            cap="60¢ per dollar of patient responsibility unpaid at 30 days"
          />
          <MiniStat
            label="Outstanding patient balances"
            value="$77K+"
            cap="Backlog with no scalable recovery path"
          />
        </div>
      </div>
    </Section>
  );
}

function MiniStat({ label, value, cap }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "1fr auto",
      alignItems: "baseline",
      gap: 12,
      padding: "10px 0",
      borderBottom: "1px solid var(--ss-grey-5)"
    }}>
      <div>
        <div className="label" style={{ color: "var(--ss-black)", marginBottom: 2 }}>{label}</div>
        <div style={{ fontSize: 12, color: "var(--ss-black)", lineHeight: 1.35 }}>{cap}</div>
      </div>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 22, letterSpacing: "-0.025em", color: "var(--ss-black)" }}>
        {value}
      </div>
    </div>
  );
}

window.Challenge = Challenge;