// scenes-4.jsx — Act III finale: model comparison + cost levers + outro recap

const TIERS = [
  { name: 'Frontier', sub: 'in $3 · out $15',     pin: 3.00, pout: 15.00, col: COLORS.coral },
  { name: 'Mid',      sub: 'in $0.80 · out $4',    pin: 0.80, pout: 4.00,  col: COLORS.yellow },
  { name: 'Small',    sub: 'in $0.15 · out $0.60', pin: 0.15, pout: 0.60,  col: COLORS.green },
];
const TOT_IN = RUN.reduce((s,r)=>s+r.in,0);   // 16,600
const TOT_OUT = RUN.reduce((s,r)=>s+r.out,0); // 980

// ════════════════════════════════════════════════════════════════════════════
// SCENE 8 — MODEL COMPARISON  (length 12s)
// ════════════════════════════════════════════════════════════════════════════
function SceneCompare() {
  const { localTime: lt } = useSprite();
  const setup = ramp(lt, 0.2, 1.0);

  const costs = TIERS.map(t => TOT_IN/1e6*t.pin + TOT_OUT/1e6*t.pout);
  const maxC = costs[0];
  const baseY = 690, maxH = 360;
  const xs = [620, 960, 1300];

  return (
    <>
      <Bg accent={COLORS.green} />
      <Eyebrow lt={lt} a={0.4} b={12} n="16" label="Same run, different model" color={COLORS.green} />

      <div style={{ position:'absolute', left:'50%', top: 150, transform:'translateX(-50%)', opacity: setup, textAlign:'center' }}>
        <div style={{ fontFamily: FONTS.sans, fontSize: 40, fontWeight:700, color: COLORS.ink }}>The identical agent run…</div>
        <div style={{ fontFamily: FONTS.math, fontStyle:'italic', fontSize: 25, color: COLORS.inkDim, marginTop: 6 }}>
          {fmtNum(TOT_IN)} input + {fmtNum(TOT_OUT)} output tokens, billed three ways
        </div>
      </div>

      {/* baseline */}
      <div style={{ position:'absolute', left: 480, top: baseY, width: 1000, height: 2, background: COLORS.inkFaint, opacity: setup }} />

      {TIERS.map((t, i) => {
        const rise = ramp(lt, 1.6 + i*0.7, 2.8 + i*0.7, Easing.easeOutCubic);
        const h = (costs[i] / maxC) * maxH * rise;
        const labelO = pulse(lt, 2.6 + i*0.7, 12, 0.4);
        const mult = (costs[0] / costs[i]);
        return (
          <div key={i}>
            <div style={{
              position:'absolute', left: xs[i], top: baseY - h, width: 150, height: h,
              transform:'translateX(-50%)',
              background:`linear-gradient(180deg, ${t.col}, ${t.col}aa)`,
              borderRadius:'10px 10px 0 0', boxShadow:`0 0 30px ${t.col}44`,
            }} />
            {/* value on top */}
            <div style={{ position:'absolute', left: xs[i], top: baseY - h - 56, transform:'translateX(-50%)', opacity: labelO, textAlign:'center', width: 240 }}>
              <div style={{ fontFamily: FONTS.math, fontSize: 44, fontWeight:700, color: t.col, fontVariantNumeric:'tabular-nums' }}>{fmtUSD(costs[i])}</div>
            </div>
            {/* name below */}
            <div style={{ position:'absolute', left: xs[i], top: baseY + 22, transform:'translateX(-50%)', opacity: setup, textAlign:'center', width: 240 }}>
              <div style={{ fontFamily: FONTS.sans, fontSize: 28, fontWeight:700, color: COLORS.ink }}>{t.name}</div>
              <div style={{ fontFamily: FONTS.mono, fontSize: 17, color: COLORS.inkDim, marginTop: 2 }}>{t.sub}</div>
              {i>0 && labelO>0.2 && <div style={{ fontFamily: FONTS.sans, fontSize: 20, color: t.col, marginTop: 8 }}>{mult.toFixed(0)}× cheaper</div>}
            </div>
          </div>
        );
      })}

      <Caption lt={lt} a={1.0} b={5.0}>
        Same tokens, same work — only the <b>price tier</b> changes.
      </Caption>
      <Caption lt={lt} a={5.4} b={12} color={COLORS.green}>
        That's a <b>~20× swing</b>. Model choice is the single biggest lever.
      </Caption>
    </>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// SCENE 9 — LEVERS + OUTRO  (length 18s)
// ════════════════════════════════════════════════════════════════════════════
const LEVERS = [
  { ic:'⟳', t:'Loop length',   d:'fewer turns = fewer re-sends', col: COLORS.purple },
  { ic:'▦', t:'Context size',  d:'trim history & tool results',  col: COLORS.blue },
  { ic:'↧', t:'Output length',  d:'cap max_tokens; be concise',   col: COLORS.yellow },
  { ic:'≡', t:'Cache hit-rate', d:'reuse the stable prefix',      col: COLORS.green },
  { ic:'$', t:'Model tier',     d:'right model for the job',      col: COLORS.coral },
];
function SceneOutro() {
  const { localTime: lt } = useSprite();

  const titleO = pulse(lt, 0.4, 9.4, 0.45);
  const recapIn = ramp(lt, 9.6, 10.4, Easing.easeOutBack);
  const recapO = pulse(lt, 9.6, 18, 0.5);

  const recap = [
    { lbl:'TOOLS',  d:'functions the model can call',  col: COLORS.yellow },
    { lbl:'MEMORY', d:'context, re-sent every loop',   col: COLORS.purple },
    { lbl:'COST',   d:'tokens × price, summed up',     col: COLORS.coral },
  ];

  return (
    <>
      <Bg accent={COLORS.blue} />

      {/* levers grid (first ~9s) */}
      {titleO > 0.01 && (
        <div style={{ opacity: titleO }}>
          <div style={{ position:'absolute', left:'50%', top: 120, transform:'translateX(-50%)', textAlign:'center' }}>
            <div style={{ fontFamily: FONTS.sans, fontSize: 50, fontWeight:700, color: COLORS.ink }}>The levers you control</div>
            <div style={{ fontFamily: FONTS.math, fontStyle:'italic', fontSize: 26, color: COLORS.inkDim, marginTop: 8 }}>five parameters that move the bill</div>
          </div>
          <div style={{ position:'absolute', left:'50%', top: 560, transform:'translate(-50%,-50%)', display:'flex', gap: 22 }}>
            {LEVERS.map((l, i) => {
              const o = ramp(lt, 1.4 + i*0.5, 2.2 + i*0.5, Easing.easeOutBack);
              return (
                <div key={i} style={{
                  width: 300, opacity:o, transform:`translateY(${(1-o)*24}px)`,
                  background: COLORS.bgPanel, border:`1.5px solid ${l.col}66`, borderRadius:18,
                  padding:'26px 22px', boxShadow:`0 0 26px ${l.col}1f`,
                }}>
                  <div style={{ width: 56, height:56, borderRadius:13, background:l.col+'22', border:`1px solid ${l.col}`,
                    display:'flex', alignItems:'center', justifyContent:'center', fontSize: 30, color:l.col, marginBottom: 18, fontFamily: FONTS.math }}>{l.ic}</div>
                  <div style={{ fontFamily: FONTS.sans, fontSize: 27, fontWeight:700, color: COLORS.ink, marginBottom: 8 }}>{l.t}</div>
                  <div style={{ fontFamily: FONTS.sans, fontSize: 20, color: COLORS.inkDim, lineHeight:1.35 }}>{l.d}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* final recap card */}
      {recapO > 0.01 && (
        <div style={{ position:'absolute', inset:0, opacity: recapO }}>
          <div style={{ position:'absolute', left:'50%', top: 230, transform:`translateX(-50%) scale(${recapIn})`, textAlign:'center' }}>
            <div style={{ fontFamily: FONTS.sans, fontSize: 72, fontWeight:700, color: COLORS.ink, letterSpacing:'-0.02em' }}>It all comes down to tokens.</div>
          </div>
          <div style={{ position:'absolute', left:'50%', top: 500, transform:'translate(-50%,0)', display:'flex', gap: 40 }}>
            {recap.map((r,i) => {
              const o = ramp(lt, 10.4 + i*0.35, 11.1 + i*0.35, Easing.easeOutBack);
              return (
                <div key={i} style={{ width: 340, textAlign:'center', opacity:o, transform:`translateY(${(1-o)*20}px)` }}>
                  <div style={{ width: 22, height:22, borderRadius:'50%', background:r.col, margin:'0 auto 16px', boxShadow:`0 0 22px ${r.col}` }} />
                  <div style={{ fontFamily: FONTS.mono, fontSize: 28, letterSpacing:'0.14em', color: r.col, marginBottom: 8 }}>{r.lbl}</div>
                  <div style={{ fontFamily: FONTS.sans, fontSize: 23, color: COLORS.inkDim, lineHeight:1.35 }}>{r.d}</div>
                </div>
              );
            })}
          </div>
          <div style={{ position:'absolute', left:'50%', bottom: 90, transform:'translateX(-50%)',
            fontFamily: FONTS.math, fontStyle:'italic', fontSize: 30, color: COLORS.inkDim, opacity: pulse(lt, 12.6, 18, 0.6) }}>
            understand the loop → control the cost.
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { SceneCompare, SceneOutro, TIERS, LEVERS, TOT_IN, TOT_OUT });