// projection.jsx — with Superscript uplift section + insights

const Projection = () => {
  const D = window.ROI_DATA;
  const W = D.with_superscript;
  const H = D.headline;
  const ref = React.useRef(null);
  const seen = useInView(ref, 0);
  const p = useProgress(900, seen);

  // animated counters (run on dark bg)
  const projCol = useCounter(W.projected_collections, 800, seen);
  const addCol  = useCounter(W.additional_collections, 800, seen);
  const upliftR = useCounter(W.projected_rate_pct, 700, seen, 1);
  const days    = useCounter(W.avg_days_to_payment, 650, seen, 1);
  const gross   = useCounter(W.gross_annual_uplift, 900, seen);
  const opsSaved = useCounter(H.operational_cost_est, 800, seen);

  // diff bar: practice rate (75.8) → projected (90.8) with industry markers
  const X0 = 60, X1 = 100;
  const xS = (v) => ((v - X0) / (X1 - X0)) * 100;

  return (
    <div ref={ref}>
      {/* Big animated comparison bar */}
      <div style={{ background: "#fff", border: "1px solid rgba(255,255,255,0.2)", padding: "32px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 24 }}>
          <Mono color="#00A3FF" size={11}>COLLECTION RATE · TODAY VS WITH SUPERSCRIPT</Mono>
          <Mono color="#666" size={11}>SCALE 60% — 100%</Mono>
        </div>

        {/* current state row */}
        <div style={{ display: "grid", gridTemplateColumns: "200px 1fr 100px", gap: 16, alignItems: "center", marginBottom: 18 }}>
          <Mono color="#000" size={12}>TODAY</Mono>
          <div style={{ position: "relative", height: 32, border: "1px solid #000" }}>
            <div style={{
              position: "absolute", left: 0, top: 0, bottom: 0,
              width: `${xS(H.collection_rate_pct) * Math.min(p * 1.5, 1)}%`,
              background: "#000", transition: "width 200ms linear",
            }} />
            <div style={{
              position: "absolute", left: `${xS(80.3)}%`, top: -4, bottom: -4, width: 1,
              background: "#64C5FD",
            }} />
          </div>
          <div style={{ fontFamily: "Suisse Intl", fontSize: 28, fontWeight: 400, letterSpacing: "-0.02em", textAlign: "right" }}>
            {H.collection_rate_pct}%
          </div>
        </div>

        {/* projected row */}
        <div style={{ display: "grid", gridTemplateColumns: "200px 1fr 100px", gap: 16, alignItems: "center" }}>
          <Mono color="#00A3FF" size={12}>WITH SUPERSCRIPT</Mono>
          <div style={{ position: "relative", height: 32, border: "1px solid #00A3FF" }}>
            <div style={{
              position: "absolute", left: 0, top: 0, bottom: 0,
              width: `${xS(W.projected_rate_pct) * p}%`,
              background: "#00A3FF", transition: "width 240ms linear",
            }} />
            <div style={{
              position: "absolute", left: `${xS(80.3)}%`, top: -4, bottom: -4, width: 1,
              background: "#64C5FD",
            }} />
          </div>
          <div style={{ fontFamily: "Suisse Intl", fontSize: 28, fontWeight: 400, letterSpacing: "-0.02em", color: "#00A3FF", textAlign: "right" }}>
            {upliftR.toFixed(1)}%
          </div>
        </div>

        {/* axis */}
        <div style={{ display: "grid", gridTemplateColumns: "200px 1fr 100px", gap: 16, marginTop: 12 }}>
          <div />
          <div style={{ position: "relative", height: 24 }}>
            {[60, 70, 80, 90, 100].map(v => (
              <div key={v} style={{
                position: "absolute", left: `${xS(v)}%`, top: 0, transform: "translateX(-50%)",
              }}>
                <div style={{ width: 1, height: 6, background: "#666" }} />
                <Mono size={9} color="#666" style={{ display: "block", marginTop: 4 }}>{v}%</Mono>
              </div>
            ))}
            <div style={{
              position: "absolute", left: `${xS(80.3)}%`, top: 0, transform: "translateX(-50%)",
            }}>
              <div style={{ width: 1, height: 6, background: "#64C5FD" }} />
              <Mono size={9} color="#64C5FD" style={{ display: "block", marginTop: 4, whiteSpace: "nowrap" }}>P50</Mono>
            </div>
            <div style={{
              position: "absolute", left: `${xS(87)}%`, top: 0, transform: "translateX(-50%)",
            }}>
              <div style={{ width: 1, height: 6, background: "#64C5FD" }} />
              <Mono size={9} color="#64C5FD" style={{ display: "block", marginTop: 4, whiteSpace: "nowrap" }}>P75</Mono>
            </div>
          </div>
          <div />
        </div>
      </div>

      {/* big projected total */}
      <div style={{
        marginTop: 24, padding: "40px 32px",
        background: "#00A3FF", color: "#fff",
        display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 48, alignItems: "center",
      }}>
        <div>
          <Mono color="rgba(255,255,255,0.7)" size={11}>GROSS ANNUAL UPLIFT</Mono>
          <div style={{
            fontFamily: "Suisse Intl", fontWeight: 300, fontSize: 110, lineHeight: 0.9,
            letterSpacing: "-0.04em", marginTop: 12,
          }}>
            +{fmt.usdAbbr(gross)}
          </div>
          <div style={{ fontSize: 16, marginTop: 16, maxWidth: 480, lineHeight: 1.4, opacity: 0.9 }}>
            Additional collections plus eliminated operations cost. Based on observed +15pp uplift in live Superscript accounts.
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "rgba(255,255,255,0.3)", border: "1px solid rgba(255,255,255,0.3)" }}>
          <UpStat label="ADDITIONAL COLLECTIONS" value={"+" + fmt.usdAbbr(addCol)} />
          <UpStat label="OPS COST ELIMINATED" value={"+" + fmt.usdAbbr(opsSaved)} />
          <UpStat label="PROJECTED COLLECTED" value={fmt.usdAbbr(projCol)} />
          <UpStat label="AVG DAYS TO PAY" value={days.toFixed(1) + "d"} sub={"from " + H.avg_days_to_payment + "d"} />
        </div>
      </div>

      <Mono size={10} color="rgba(255,255,255,0.5)" style={{ display: "block", marginTop: 16, textAlign: "right" }}>
        FOOTNOTE — UPLIFT MODELED FROM LIVE SUPERSCRIPT CUSTOMER PERFORMANCE (+15PP). OPS COST ELIMINATED AS SUPERSCRIPT HANDLES COLLECTION OPERATIONS END-TO-END.
      </Mono>
    </div>
  );
};

const UpStat = ({ label, value, sub }) => (
  <div style={{ background: "#00A3FF", padding: "20px 22px", minHeight: 100 }}>
    <Mono color="rgba(255,255,255,0.7)" size={9}>{label}</Mono>
    <div style={{
      fontFamily: "Suisse Intl", fontWeight: 500, fontSize: 28,
      letterSpacing: "-0.02em", marginTop: 12, color: "#fff",
    }}>{value}</div>
    {sub && <Mono color="rgba(255,255,255,0.7)" size={10} style={{ display: "block", marginTop: 6 }}>{sub}</Mono>}
  </div>
);

// -------- Insights index cards --------
const Insights = () => {
  const items = window.ROI_DATA.insights;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid #000" }}>
      {items.map((it, i) => (
        <article key={it.idx} style={{
          padding: "20px 22px 24px",
          minHeight: 220,
          background: i % 2 ? "#000" : "#fff",
          color: i % 2 ? "#fff" : "#000",
          borderRight: (i + 1) % 3 ? "1px solid #000" : "none",
          borderBottom: i < items.length - 3 ? "1px solid #000" : "none",
          display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 16,
          transition: "background 200ms",
        }}>
          <Mono color={i % 2 ? "#00A3FF" : "#00A3FF"} size={11}>[{it.idx}]</Mono>
          <div>
            <h3 style={{
              fontFamily: "Suisse Intl", fontWeight: 400, fontSize: 22, lineHeight: 1.1,
              letterSpacing: "-0.02em", margin: 0, color: i % 2 ? "#fff" : "#000",
            }}>{it.title}</h3>
            <p style={{
              marginTop: 12, fontSize: 14, lineHeight: 1.45, letterSpacing: "-0.005em",
              color: i % 2 ? "rgba(255,255,255,0.7)" : "#333",
            }}>{it.body}</p>
          </div>
        </article>
      ))}
    </div>
  );
};

window.Projection = Projection;
window.Insights = Insights;