// Scene 04 — Chip EV math
function Scene04_ChipEV({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground />
          <ChromeFrame scene={4} label="Chip EV" />

          <div style={{ position: 'absolute', left: 96, top: 180, width: 900 }}>
            <Reveal from={0} to={0.08}><Eyebrow text="Capítulo 03 · Matemática base" /></Reveal>
            <div style={{ height: 24 }} />
            <Reveal from={0.04} to={0.16}>
              <SerifTitle size={86}>
                Equity necesaria<br/>para <span style={{ fontStyle: 'italic', color: APG.gold }}>break-even</span>.
              </SerifTitle>
            </Reveal>
            <div style={{ height: 28 }} />
            <Reveal from={0.10} to={0.22}>
              <div style={{ maxWidth: 620, fontSize: 19, lineHeight: 1.55, color: APG.inkMute }}>
                Ignoramos la burbuja un momento. Tratamos las fichas como dinero
                lineal y calculamos la ecuación de pot odds.
              </div>
            </Reveal>

            {/* Equation */}
            <div style={{ marginTop: 60 }}>
              <Reveal from={0.22} to={0.34}>
                <div style={{
                  fontFamily: APG.mono, fontSize: 12,
                  letterSpacing: '0.20em', color: APG.gold,
                  textTransform: 'uppercase', marginBottom: 18,
                }}>Ecuación pot odds</div>
              </Reveal>
              <Reveal from={0.26} to={0.40}>
                <div style={{
                  fontFamily: APG.serif, fontSize: 80, lineHeight: 1.1,
                  color: APG.ink, fontStyle: 'italic',
                  fontVariantNumeric: 'tabular-nums',
                }}>
                  18 / 40 = <span style={{ color: APG.gold, fontStyle: 'normal' }}>45%</span>
                </div>
              </Reveal>
              <Reveal from={0.34} to={0.46}>
                <div style={{
                  marginTop: 20,
                  fontFamily: APG.sans, fontSize: 16, color: APG.inkMute,
                  maxWidth: 520, lineHeight: 1.55,
                }}>
                  Hero paga 18bb para ganar un bote total de 40bb.<br/>
                  Necesita ≥ 45% de equity para que el call sea breakeven en fichas.
                </div>
              </Reveal>
            </div>
          </div>

          {/* Right: equity bars vs ranges */}
          <div style={{ position: 'absolute', right: 96, top: 200, width: 720 }}>
            <Reveal from={0.30} to={0.44}>
              <div style={{
                fontFamily: APG.mono, fontSize: 11,
                letterSpacing: '0.20em', color: APG.gold,
                textTransform: 'uppercase', marginBottom: 24,
              }}>Equity de A♠K♦ vs rango BTN</div>
            </Reveal>

            {[
              { label: 'Rango amplio (~25%)', eq: 52, p: 0.40 },
              { label: 'Rango GTO estándar (~15%)', eq: 48, p: 0.50 },
              { label: 'Rango tight (TT+, AQs+, AKo)', eq: 43, p: 0.60 },
              { label: 'Rango nit premium (QQ+, AKs)', eq: 38, p: 0.70 },
            ].map((r, i) => (
              <EquityBar key={i} {...r} />
            ))}

            <Reveal from={0.86} to={0.95}>
              <div style={{
                marginTop: 32,
                padding: '18px 22px',
                background: 'rgba(228,200,120,0.06)',
                border: `1px solid ${APG.border}`,
                borderRadius: 4,
                fontFamily: APG.sans, fontSize: 15, lineHeight: 1.55,
                color: APG.ink,
              }}>
                <span style={{ color: APG.gold, fontWeight: 600 }}>Conclusión chip EV: </span>
                contra rango amplio o estándar, AKo tiene equity para pagar.
              </div>
            </Reveal>
          </div>
        </div>
      )}
    </Sprite>
  );
}

function EquityBar({ label, eq, p }) {
  return (
    <Reveal from={p} to={p + 0.12} dy={10}>
      <div style={{ marginBottom: 26 }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          marginBottom: 10,
          fontFamily: APG.sans, fontSize: 14, color: APG.inkMute,
        }}>
          <span>{label}</span>
          <span style={{
            fontFamily: APG.mono, color: eq >= 45 ? APG.green : APG.red,
            fontWeight: 600,
          }}><CountUp from={0} to={eq} suffix="%" startP={p} endP={p + 0.18} /></span>
        </div>
        <div style={{
          position: 'relative', height: 10, background: 'rgba(255,255,255,0.06)',
          borderRadius: 999, overflow: 'hidden',
        }}>
          {/* 45% threshold marker */}
          <div style={{
            position: 'absolute', left: '45%', top: -4, bottom: -4,
            width: 1, background: APG.goldDeep, opacity: 0.6,
          }}/>
          <BarFill targetEq={eq} p={p} />
        </div>
      </div>
    </Reveal>
  );
}
function BarFill({ targetEq, p }) {
  const { progress } = useSprite();
  const t = clamp((progress - p) / 0.18, 0, 1);
  const w = Easing.easeOutCubic(t) * targetEq;
  const passes = targetEq >= 45;
  return (
    <div style={{
      width: `${w}%`, height: '100%',
      background: passes
        ? `linear-gradient(90deg, ${APG.green}, #88D2A8)`
        : `linear-gradient(90deg, ${APG.red}, #E37876)`,
      borderRadius: 999,
    }}/>
  );
}

window.Scene04_ChipEV = Scene04_ChipEV;