/* Full-Org Impact — the centerpiece: org-wide yield lift, cumulative curve,
   responsibility mix, and why yield matters. All figures are %/ratio, no dollar amounts. */

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

  const COMPONENTS = [
    { name: "Deductible", share: 51.6 },
    { name: "Copay", share: 26.9 },
    { name: "Other patient transfers", share: 17.8 },
    { name: "Coinsurance", share: 3.8 },
  ];
  const maxShare = 51.6;

  const WHY = [
    { t: "Collected, not just billed", s: "A practice can post strong charges and still bleed cash if patient balances never come in. Yield measures dollars in the door against dollars owed." },
    { t: "Fewer balances written off", s: "Balances that miss collection flow into post-visit billing, where 25 to 40% is never recovered. Collecting up front keeps them out of that funnel." },
    { t: "More revenue recovered", s: "At the higher yield, the group collected 1.13× what the prior rate would have returned on the same window, about 13% more patient revenue." },
    { t: "Compounds every cycle", s: "Yield gains repeat on every future cohort of appointments. As volume accrues, the gap between the old rate and the new one widens." },
  ];

  return (
    <Section id="fullorg" num="[04] / FULL-ORG IMPACT"
             title={<>Then it scaled across the <em>whole national virtual care group.</em></>}>

      <p className="body muted" style={{ maxWidth: 760, marginBottom: 48 }}>
        Across knownwell's national virtual care group, overall patient yield over the
        post-go-live window reached 86.8%, up from 76.6% in the prior window. Yield is
        measured as collected against insured patient responsibility, normalized for
        window length, so the two periods compare directly.
      </p>

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

        {/* [A] Headline compare */}
        <div>
          <div className="label label--blue" style={{ marginBottom: 12 }}>[A] OVERALL PATIENT YIELD · ORG-WIDE</div>
          <h3 style={{
            fontFamily: "var(--font-sans)", fontSize: 36, lineHeight: 1.05,
            letterSpacing: "-0.03em", fontWeight: 400, marginBottom: 28, maxWidth: 900
          }}>
            Yield rose <em style={{ color: "var(--ss-blue)", fontStyle: "italic" }}>10.2 points</em> after
            go-live, 1.13× the prior collection rate across the full group.
          </h3>

          <div className="compare">
            <div className="compare__cell">
              <div className="compare__label">Prior window · Jun–Dec 2025</div>
              <div className="compare__big"><OrgNum inView={inView} to={76.6} decimals={1} /><sub>%</sub></div>
              <div className="compare__cap">PRE-SUPERSCRIPT · BASELINE</div>
            </div>
            <div className="compare__cell">
              <div className="compare__label">Post go-live · Jan–May 2026</div>
              <div className="compare__big is-after"><OrgNum inView={inView} to={86.8} decimals={1} /><sub>%</sub></div>
              <div className="compare__cap" style={{ color: "var(--ss-blue)" }}>↗ +10.2 POINTS · MEASURED</div>
            </div>
            <div className="compare__cell">
              <div className="compare__label">Lift in collection rate</div>
              <div className="compare__big is-after"><OrgNum inView={inView} to={1.13} decimals={2} />×</div>
              <div className="compare__cap" style={{ color: "var(--ss-blue)" }}>≈ 13% MORE PATIENT REVENUE COLLECTED</div>
            </div>
          </div>
        </div>

        {/* [B] Cumulative yield curve */}
        <div>
          <div className="label label--blue" style={{ marginBottom: 12 }}>[B] CUMULATIVE PATIENT YIELD · BY MONTH OF CLAIM MATURATION</div>
          <h3 style={{
            fontFamily: "var(--font-sans)", fontSize: 30, lineHeight: 1.08,
            letterSpacing: "-0.03em", fontWeight: 400, marginBottom: 24, maxWidth: 880
          }}>
            The Superscript cohort sits roughly <em style={{ color: "var(--ss-blue)", fontStyle: "italic" }}>ten points
            above</em> the pre-Superscript baseline, and its newest claims are still firming up.
          </h3>
          <YieldCurve inView={inView} />
        </div>

        {/* [C] Responsibility mix */}
        <div className="grid-2" style={{ alignItems: "start" }}>
          <div>
            <div className="label label--blue" style={{ marginBottom: 12 }}>[C] INSURED PATIENT RESPONSIBILITY · BY COMPONENT</div>
            <p className="body muted" style={{ maxWidth: 480, marginBottom: 24 }}>
              The yield above is collected against insured responsibility, the copay,
              coinsurance, deductible, and other balance transfers assigned through
              adjudication. Deductible is the largest slice, which is exactly where
              upfront pricing does the most work.
            </p>
          </div>
          <div className="mix">
            {COMPONENTS.map((c, i) => (
              <div key={i} className="mix__row">
                <span className="mix__name">{c.name}</span>
                <div className="mix__bar">
                  <div className="mix__fill" style={{
                    width: inView ? (c.share / maxShare * 100) + "%" : 0,
                    transitionDelay: (i * 0.12) + "s"
                  }} />
                </div>
                <span className="mix__pct">{c.share}%</span>
              </div>
            ))}
          </div>
        </div>

        {/* [D] Why yield matters */}
        <div>
          <div className="label label--blue" style={{ marginBottom: 18 }}>[D] WHY YIELD MATTERS</div>
          <div className="why-grid">
            {WHY.map((w, i) => (
              <div key={i} className="why-card">
                <div className="why-card__t">{w.t}</div>
                <div className="why-card__s">{w.s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

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

/* ---------- Cumulative yield line chart ---------- */
function smoothPath(pts) {
  if (pts.length < 2) return "";
  let d = "M" + pts[0][0].toFixed(1) + " " + pts[0][1].toFixed(1);
  for (let i = 0; i < pts.length - 1; i++) {
    const p0 = pts[i - 1] || pts[i];
    const p1 = pts[i];
    const p2 = pts[i + 1];
    const p3 = pts[i + 2] || p2;
    const c1x = p1[0] + (p2[0] - p0[0]) / 6;
    const c1y = p1[1] + (p2[1] - p0[1]) / 6;
    const c2x = p2[0] - (p3[0] - p1[0]) / 6;
    const c2y = p2[1] - (p3[1] - p1[1]) / 6;
    d += " C" + c1x.toFixed(1) + " " + c1y.toFixed(1) + " " + c2x.toFixed(1) + " " + c2y.toFixed(1) + " " + p2[0].toFixed(1) + " " + p2[1].toFixed(1);
  }
  return d;
}

function YieldCurve({ inView }) {
  const L = 54, R = 700, T = 24, B = 300, months = 7;
  const xOf = (m) => L + (m - 1) / (months - 1) * (R - L);
  const yOf = (p) => B - (p / 100) * (B - T);

  const withSS = [82, 88, 89, 88, 87].map((p, i) => [xOf(i + 1), yOf(p)]);
  const withoutSS = [77, 70, 66, 72, 73, 77, 80].map((p, i) => [xOf(i + 1), yOf(p)]);

  const blueLine = smoothPath(withSS);
  const greyLine = smoothPath(withoutSS);
  const area = blueLine + " L" + withSS[withSS.length - 1][0].toFixed(1) + " " + B + " L" + withSS[0][0].toFixed(1) + " " + B + " Z";
  const gridVals = [0, 20, 40, 60, 80, 100];

  return (
    <div className="yc">
      <svg viewBox="0 0 720 360" className="yc__svg" preserveAspectRatio="xMidYMid meet">
        {gridVals.map(v => (
          <g key={v}>
            <line x1={L} y1={yOf(v)} x2={R} y2={yOf(v)} stroke="var(--ss-grey-5)" strokeWidth="1" />
            <text x={L - 10} y={yOf(v) + 4} textAnchor="end" className="yc__axis">{v}%</text>
          </g>
        ))}
        {[1, 2, 3, 4, 5, 6, 7].map(m => (
          <text key={m} x={xOf(m)} y="324" textAnchor="middle" className="yc__axis">Mo {m}</text>
        ))}
        <path d={area} className={"yc__area " + (inView ? "is-on" : "")} />
        <path d={greyLine} className={"yc__line yc__line--grey " + (inView ? "is-on" : "")} />
        <path d={blueLine} className={"yc__line yc__line--blue " + (inView ? "is-on" : "")} />
        {withSS.map((pt, i) => (
          <circle key={i} cx={pt[0]} cy={pt[1]} r="3.5" className={"yc__dot " + (inView ? "is-on" : "")} style={{ transitionDelay: (0.9 + i * 0.08) + "s" }} />
        ))}
      </svg>
      <div className="yc__legend">
        <span className="yc__key"><span className="yc__swatch yc__swatch--blue" /> Cumulative yield with Superscript</span>
        <span className="yc__key"><span className="yc__swatch yc__swatch--grey" /> Cumulative yield without Superscript</span>
      </div>
    </div>
  );
}

window.FullOrg = FullOrg;