/* Pilot — brief: the telehealth pilot result + accelerated rollout ask */

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

  return (
    <Section id="pilot" num="[03] / THE PILOT"
             title={<>A telehealth pilot proved the model <em>in weeks.</em></>}>

      <p className="body muted" style={{ maxWidth: 720, marginBottom: 40 }}>
        Superscript went live in knownwell's telehealth department in December 2025. Within
        weeks, one-month patient yield more than doubled, and knownwell asked to accelerate
        rollout across every location before the pilot window even closed.
      </p>

      <div className="grid-2" ref={ref} style={{ alignItems: "start" }}>
        <div>
          <div className="pilot-stats">
            <div className="pilot-stat">
              <div className="pilot-stat__val">
                <ComparedNumber inView={inView} to={40} />% <span className="pilot-stat__arrow">→</span> <span className="is-blue"><ComparedNumber inView={inView} to={84} />%</span>
              </div>
              <div className="label" style={{ color: "var(--ss-grey-3)", marginTop: 6 }}>ONE-MONTH PATIENT YIELD · VS. SAME PERIOD LAST YEAR</div>
            </div>
            <div className="pilot-stat">
              <div className="pilot-stat__val is-blue"><ComparedNumber inView={inView} to={75} />%</div>
              <div className="label" style={{ color: "var(--ss-grey-3)", marginTop: 6 }}>HIGHER COLLECTIONS THAN NON-PILOT DEPARTMENTS (48%)</div>
            </div>
            <div className="pilot-stat">
              <div className="pilot-stat__val is-blue"><ComparedNumber inView={inView} to={9.6} decimals={1} />%</div>
              <div className="label" style={{ color: "var(--ss-grey-3)", marginTop: 6 }}>FEWER CANCELLATIONS · UPFRONT GUARANTEED PRICES</div>
            </div>
          </div>

          <div style={{ marginTop: 28, padding: "20px 24px", border: "1px solid var(--ss-black)", background: "var(--ss-white)" }}>
            <div className="label label--blue" style={{ marginBottom: 8 }}>THE ASK</div>
            <div style={{ fontSize: 20, lineHeight: 1.18, letterSpacing: "-0.02em" }}>
              knownwell asked Superscript to <em style={{ color: "var(--ss-blue)", fontStyle: "italic" }}>accelerate
              rollout across all locations</em> before the pilot ended.
            </div>
          </div>
        </div>

        <BellChart inView={inView} />
      </div>
    </Section>
  );
}

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

/* ---------- Bell-curve comparison chart (pilot: 48% vs 84%) ---------- */
function bellPath(cx, peak, { sigma = 74, x0 = 56, x1 = 600, yBase = 300, yTop = 40, span = 100 } = {}) {
  const yOf = (p) => yBase - (p / span) * (yBase - yTop);
  const pts = [];
  for (let x = x0; x <= x1; x += 6) {
    const p = peak * Math.exp(-((x - cx) * (x - cx)) / (2 * sigma * sigma));
    pts.push([x, yOf(p)]);
  }
  return pts.map((pt, i) => (i === 0 ? "M" : "L") + pt[0].toFixed(1) + " " + pt[1].toFixed(1)).join(" ");
}

function BellChart({ inView }) {
  const grey = bellPath(216, 48);
  const blue = bellPath(440, 84);
  const yOf = (p) => 300 - (p / 100) * 260;
  const gridVals = [0, 20, 40, 60, 80, 100];

  return (
    <div className="bell">
      <div className="bell__title">PILOT · PATIENT YIELD IN ONE MONTH</div>
      <svg viewBox="0 0 640 340" className="bell__svg" preserveAspectRatio="xMidYMid meet">
        {gridVals.map(v => (
          <g key={v}>
            <line x1="50" y1={yOf(v)} x2="612" y2={yOf(v)} stroke="var(--ss-grey-5)" strokeWidth="1" />
            <text x="40" y={yOf(v) + 4} textAnchor="end" className="bell__axis">{v}</text>
          </g>
        ))}
        <path d={grey} className={"bell__curve bell__curve--grey " + (inView ? "is-on" : "")} />
        <path d={blue} className={"bell__curve bell__curve--blue " + (inView ? "is-on" : "")} />
        <g className={"bell__bubble " + (inView ? "is-on" : "")}>
          <rect x="180" y={yOf(48) - 44} width="72" height="30" rx="15" fill="var(--ss-white)" stroke="var(--ss-grey-4)" />
          <text x="216" y={yOf(48) - 24} textAnchor="middle" className="bell__bubble-txt">48%</text>
        </g>
        <g className={"bell__bubble bell__bubble--blue " + (inView ? "is-on" : "")}>
          <rect x="404" y={yOf(84) - 44} width="72" height="30" rx="15" fill="var(--ss-white)" stroke="var(--ss-blue)" />
          <text x="440" y={yOf(84) - 24} textAnchor="middle" className="bell__bubble-txt" fill="var(--ss-blue)">84%</text>
        </g>
        <text x="216" y="328" textAnchor="middle" className="bell__xlabel">NON-SUPERSCRIPT</text>
        <text x="440" y="328" textAnchor="middle" className="bell__xlabel" fill="var(--ss-blue)">SUPERSCRIPT</text>
      </svg>
    </div>
  );
}

window.Pilot = Pilot;