// 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);
  const isMobile = useIsMobile();

  // 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: 0 → 100 scale so bar proportions are honest
  const X0 = 0, X1 = 100;
  const xS = (v) => ((v - X0) / (X1 - X0)) * 100;
  const cmpCols = isMobile ? "70px 1fr 50px" : "200px 1fr 100px";

  return (
    <div ref={ref}>
      {/* Big animated comparison bar */}
      <div style={{
        background: "#fff", border: "1px solid rgba(255,255,255,0.2)",
        padding: isMobile ? "20px 16px" : "32px"
      }}>
        <div style={{
          display: "flex",
          flexDirection: isMobile ? "column" : "row",
          justifyContent: "space-between",
          gap: isMobile ? 4 : 16,
          marginBottom: isMobile ? 18 : 24
        }}>
          <Mono color={THEME.primary} size={11}>COLLECTION RATE · TODAY VS WITH SUPERSCRIPT</Mono>
          <Mono color="#666" size={11}>SCALE 0% TO 100%</Mono>
        </div>

        {/* current state row */}
        <div style={{ display: "grid", gridTemplateColumns: cmpCols, gap: isMobile ? 8 : 16, alignItems: "center", marginBottom: 18 }}>
          <Mono color="#000" size={isMobile ? 10 : 12}>TODAY</Mono>
          <div style={{ position: "relative", height: isMobile ? 26 : 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>
          <div style={{
            fontFamily: "Suisse Intl",
            fontSize: isMobile ? 18 : 28,
            fontWeight: 400, letterSpacing: "-0.02em", textAlign: "right"
          }}>
            {H.collection_rate_pct}%
          </div>
        </div>

        {/* projected row */}
        <div style={{ display: "grid", gridTemplateColumns: cmpCols, gap: isMobile ? 8 : 16, alignItems: "center" }}>
          <Mono color={THEME.primary} size={isMobile ? 10 : 12}>{isMobile ? "W/ SS" : "WITH SUPERSCRIPT"}</Mono>
          <div style={{ position: "relative", height: isMobile ? 26 : 32, border: `1px solid ${THEME.primary}` }}>
            <div style={{
              position: "absolute", left: 0, top: 0, bottom: 0,
              width: `${xS(W.projected_rate_pct) * p}%`,
              background: THEME.primary, transition: "width 240ms linear",
            }} />
          </div>
          <div style={{
            fontFamily: "Suisse Intl",
            fontSize: isMobile ? 18 : 28,
            fontWeight: 400, letterSpacing: "-0.02em", color: THEME.primary, textAlign: "right"
          }}>
            {upliftR.toFixed(1)}%
          </div>
        </div>

        {/* axis */}
        <div style={{ display: "grid", gridTemplateColumns: cmpCols, gap: isMobile ? 8 : 16, marginTop: 12 }}>
          <div />
          <div style={{ position: "relative", height: 20 }}>
            {(isMobile ? [0, 50, 100] : [0, 20, 40, 60, 80, 100]).map(v => (
              <div key={v} style={{
                position: "absolute", left: `${xS(v)}%`, top: 0, transform: "translateX(-50%)",
              }}>
                <div style={{ width: 1, height: 6, background: "#CCC" }} />
                <Mono size={9} color="#999" style={{ display: "block", marginTop: 4 }}>{v}%</Mono>
              </div>
            ))}
          </div>
          <div />
        </div>
      </div>

      {/* big projected total. plain dark background, no card. */}
      <div style={{
        marginTop: isMobile ? 32 : 48,
        textAlign: "center",
      }}>
        <Mono color={THEME.primary} size={11}>GROSS ANNUAL UPLIFT</Mono>
        <div style={{
          fontFamily: "Suisse Intl", fontWeight: 300,
          fontSize: isMobile ? 64 : 128,
          lineHeight: 0.9,
          letterSpacing: "-0.04em", marginTop: isMobile ? 12 : 16,
          color: THEME.primary,
        }}>
          +{fmt.usdAbbr(gross)}
        </div>
        <div style={{
          fontSize: isMobile ? 14 : 17,
          marginTop: isMobile ? 16 : 20,
          maxWidth: 560,
          marginLeft: "auto", marginRight: "auto",
          lineHeight: 1.5, color: "rgba(255,255,255,0.75)"
        }}>
          {H.operational_cost_est > 0
            ? "Additional collections plus eliminated operations cost, modeled on this practice's 2025 actuals using a 15pp uplift observed in live Superscript accounts."
            : "Additional collections modeled on this practice's 2025 actuals using a 15pp uplift observed in live Superscript accounts."}
        </div>
      </div>

      <Mono size={10} color="rgba(255,255,255,0.5)" style={{
        display: "block", marginTop: 24,
        textAlign: "center",
        maxWidth: 480,
        marginLeft: "auto", marginRight: "auto",
        lineHeight: 1.5,
        whiteSpace: "normal",
      }}>
        {H.operational_cost_est > 0
          ? "FOOTNOTE: UPLIFT MODELED FROM LIVE SUPERSCRIPT CUSTOMER PERFORMANCE (+15PP). OPS COST ELIMINATED AS SUPERSCRIPT HANDLES COLLECTION OPERATIONS END-TO-END."
          : "FOOTNOTE: UPLIFT MODELED FROM LIVE SUPERSCRIPT CUSTOMER PERFORMANCE (+15PP), APPLIED TO THIS PRACTICE'S 2025 ACTUALS."}
      </Mono>
    </div>
  );
};

const UpStat = ({ label, value, sub }) => {
  const isMobile = useIsMobile();
  return (
    <div style={{
      background: THEME.primary,
      padding: isMobile ? "14px 14px" : "20px 22px",
      minHeight: isMobile ? 80 : 100
    }}>
      <Mono color="rgba(255,255,255,0.7)" size={9}>{label}</Mono>
      <div style={{
        fontFamily: "Suisse Intl", fontWeight: 500,
        fontSize: isMobile ? 22 : 28,
        letterSpacing: "-0.02em", marginTop: isMobile ? 8 : 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;
  const isMobile = useIsMobile();
  const cols = isMobile ? 1 : 3;
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: `repeat(${cols}, 1fr)`,
      gap: 0,
      border: "1px solid #000"
    }}>
      {items.map((it, i) => {
        const colPos = i % cols;
        const rowPos = Math.floor(i / cols);
        const totalRows = Math.ceil(items.length / cols);
        return (
          <article key={it.idx} style={{
            padding: isMobile ? "18px 18px 22px" : "20px 22px 24px",
            minHeight: isMobile ? "auto" : 220,
            background: i % 2 ? "#000" : "#fff",
            color: i % 2 ? "#fff" : "#000",
            borderRight: colPos < cols - 1 ? "1px solid #000" : "none",
            borderBottom: rowPos < totalRows - 1 ? "1px solid #000" : "none",
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            gap: isMobile ? 12 : 16,
            transition: "background 200ms",
          }}>
            <Mono color={THEME.primary} size={11}>[{it.idx}]</Mono>
            <div>
              <h3 style={{
                fontFamily: "Suisse Intl", fontWeight: 400,
                fontSize: isMobile ? 19 : 22,
                lineHeight: 1.15,
                letterSpacing: "-0.02em", margin: 0, color: i % 2 ? "#fff" : "#000",
              }}>{it.title}</h3>
              <p style={{
                marginTop: 12,
                fontSize: isMobile ? 13 : 14,
                lineHeight: 1.5, 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;