// scenes-11.jsx — "From one turn to the monthly bill" (scale-up finale)

const fmtBig = (v) => '$' + Math.round(v).toLocaleString('en-US');

function FactorCard({ value, unit, label, color, o = 1, big = false }) {
  return (
    <div style={{ textAlign:'center', opacity:o, transform:`translateY(${(1-o)*18}px)`,
      minWidth: big?260:170, padding:'0 6px' }}>
      <div style={{ fontFamily:FONTS.math, fontSize: big?72:52, fontWeight:700, color, lineHeight:1, fontVariantNumeric:'tabular-nums' }}>{value}</div>
      {unit && <div style={{ fontFamily:FONTS.mono, fontSize:18, color, marginTop:4 }}>{unit}</div>}
      <div style={{ fontFamily:FONTS.sans, fontSize:17, color:COLORS.inkDim, marginTop:6 }}>{label}</div>
    </div>
  );
}
function Op({ children, o = 1 }) {
  return <div style={{ fontFamily:FONTS.math, fontSize:46, color:COLORS.inkFaint, opacity:o, padding:'0 4px', alignSelf:'center', marginBottom:22 }}>{children}</div>;
}

// MAU 10,000 · return 0.20/day → ~6 sessions/mo · 10 turns/session
// turns/mo = 10,000 × 6 × 10 = 600,000 ; $/turn ≈ $0.013 → $7,800/mo
const MAU = 10000, SESS = 6, TPS = 10, PER_TURN = 0.013;
const TURNS_MO = MAU * SESS * TPS;          // 600,000
const MONTHLY = TURNS_MO * PER_TURN;        // 7,800
const OPT_MONTHLY = MONTHLY * 0.25;         // levers → −75%

function SceneMonthly() {
  const { localTime: lt } = useSprite();
  const setup = ramp(lt, 0.2, 1.0);

  // line 1 reveals
  const c1 = ramp(lt, 1.4, 2.0, Easing.easeOutBack);
  const c2 = ramp(lt, 2.4, 3.0, Easing.easeOutBack);
  const c3 = ramp(lt, 3.4, 4.0, Easing.easeOutBack);
  const eq1 = ramp(lt, 4.4, 5.0, Easing.easeOutBack);
  const turnsNow = Math.round(TURNS_MO * ramp(lt, 4.8, 6.4));

  // line 2
  const l2 = pulse(lt, 7.0, 23, 0.4);
  const perTurnIn = ramp(lt, 7.2, 7.8, Easing.easeOutBack);
  const eq2 = ramp(lt, 8.4, 9.0, Easing.easeOutBack);
  const dollarsNow = MONTHLY * ramp(lt, 8.8, 10.6);

  // optimized
  const opt = pulse(lt, 12.6, 23, 0.45);
  const optNow = OPT_MONTHLY * ramp(lt, 13.6, 15.2);

  return (
    <>
      <Bg accent={COLORS.coral} />
      <Eyebrow lt={lt} a={0.4} b={23} n="19" label="From one turn to the monthly bill" color={COLORS.coral} />

      {/* recall chip */}
      <div style={{ position:'absolute', left:'50%', top:150, transform:'translateX(-50%)', opacity:setup, textAlign:'center' }}>
        <div style={{ fontFamily:FONTS.sans, fontSize:30, fontWeight:600, color:COLORS.ink }}>One turn costs fractions of a cent…</div>
        <div style={{ fontFamily:FONTS.math, fontStyle:'italic', fontSize:22, color:COLORS.inkDim, marginTop:6 }}>…then you multiply by how people actually use it.</div>
      </div>

      {/* line 1: usage → turns/month */}
      <div style={{ position:'absolute', left:'50%', top:330, transform:'translateX(-50%)', display:'flex', alignItems:'flex-start', justifyContent:'center', gap:6 }}>
        <FactorCard value={fmtNum(MAU)} label="monthly active users" color={COLORS.blue} o={c1} />
        <Op o={c1}>×</Op>
        <FactorCard value={SESS} label="sessions / user · mo" color={COLORS.blue} o={c2} />
        <Op o={c2}>×</Op>
        <FactorCard value={TPS} label="turns / session" color={COLORS.blue} o={c3} />
        <Op o={eq1}>=</Op>
        <FactorCard value={fmtNum(turnsNow)} unit="turns / month" label="total billed turns" color={COLORS.purple} o={eq1} big />
      </div>

      {/* line 2: turns × $/turn = monthly */}
      {l2 > 0.01 && (
        <div style={{ position:'absolute', left:'50%', top:560, transform:'translateX(-50%)', display:'flex', alignItems:'flex-start', justifyContent:'center', gap:6, opacity:l2 }}>
          <FactorCard value={fmtNum(TURNS_MO)} unit="turns / mo" label="from above" color={COLORS.purple} o={l2} />
          <Op o={perTurnIn}>×</Op>
          <FactorCard value={'$' + PER_TURN.toFixed(3)} unit="per turn" label="avg input + output" color={COLORS.yellow} o={perTurnIn} />
          <Op o={eq2}>=</Op>
          <FactorCard value={fmtBig(dollarsNow)} unit="/ month" label="the bill" color={COLORS.coral} o={eq2} big />
        </div>
      )}

      {/* optimized */}
      {opt > 0.01 && (
        <div style={{ position:'absolute', left:'50%', top:688, transform:'translateX(-50%)', opacity:opt, textAlign:'center', width:1600 }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:28 }}>
            <div style={{ fontFamily:FONTS.math, fontSize:36, color:COLORS.inkDim, textDecoration:'line-through' }}>{fmtBig(MONTHLY)}</div>
            <div style={{ fontFamily:FONTS.math, fontSize:32, color:COLORS.green }}>→</div>
            <div style={{ fontFamily:FONTS.math, fontSize:68, fontWeight:700, color:COLORS.green, lineHeight:1 }}>{fmtBig(optNow)}<span style={{fontSize:30, color:COLORS.inkDim}}>/mo</span></div>
          </div>
          <div style={{ display:'flex', gap:14, justifyContent:'center', marginTop:14 }}>
            {[['caching', COLORS.green],['right-sized model', COLORS.yellow],['leaner retrieval', COLORS.purple],['shorter output', COLORS.blue]].map(([t,c],i)=>(
              <span key={i} style={{ fontFamily:FONTS.mono, fontSize:16, color:c, padding:'5px 12px', borderRadius:999, background:c+'1f', border:`1px solid ${c}55`, whiteSpace:'nowrap' }}>{t}</span>
            ))}
          </div>
        </div>
      )}

      <Caption lt={lt} a={4.6} b={6.8} color={COLORS.purple}>
        Usage alone turns a handful of users into <b>600,000 billed turns a month</b>.
      </Caption>
      <Caption lt={lt} a={8.8} b={12.4} color={COLORS.coral}>
        At a penny-ish per turn, that's <b>~$7,800 / month</b> — from fractions of a cent.
      </Caption>
      <Caption lt={lt} a={12.8} b={17.0} color={COLORS.green}>
        Every lever you've seen multiplies through this — together, often <b>−75%</b>.
      </Caption>
      <Caption lt={lt} a={17.4} b={23}>
        That's the whole game: <b>per-token cost × how much you run it</b>.
      </Caption>
    </>
  );
}

Object.assign(window, { SceneMonthly, FactorCard });