// Scene 08 — Tabla comparativa por rango BTN
function Scene08_Table({ start, end }) {
  const rows = [
    { range: '3% (QQ+, AKs)',          eq: 38, decision: 'Fold',           note: 'Rango nit, solo premium',         color: APG.red,  p: 0.20 },
    { range: '8% (TT+, AQs+, AKo)',    eq: 43, decision: 'Marginal fold',  note: 'Tight pero pagable sin ICM',     color: APG.warn, p: 0.30 },
    { range: '15% estándar GTO',       eq: 48, decision: 'Call',           note: 'Rango óptimo 18bb BTN',          color: APG.green,p: 0.40, highlight: true },
    { range: '25% amplio',             eq: 52, decision: 'Call claro',     note: 'Incluye KQo, AJo, 66+',          color: APG.green,p: 0.50 },
    { range: '40% extremo',            eq: 55, decision: 'Call instantáneo', note: 'Maníaco, muchos bluffs',       color: APG.green,p: 0.60 },
  ];
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground />
          <ChromeFrame scene={8} label="Tabla comparativa" />

          <div style={{ position: 'absolute', left: 96, top: 180, width: 1200 }}>
            <Reveal from={0} to={0.08}><Eyebrow text="Capítulo 07 · Decisión por rango" /></Reveal>
            <div style={{ height: 22 }} />
            <Reveal from={0.04} to={0.16}>
              <SerifTitle size={80}>
                La decisión depende del <span style={{ fontStyle: 'italic', color: APG.gold }}>rango de BTN</span>.
              </SerifTitle>
            </Reveal>
          </div>

          <div style={{
            position: 'absolute', left: 96, right: 96, top: 440,
            border: `1px solid ${APG.borderSoft}`,
            borderRadius: 4,
            background: 'rgba(15,42,28,0.4)',
          }}>
            {/* Header */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: '320px 220px 240px 1fr',
              padding: '18px 32px',
              borderBottom: `1px solid ${APG.borderSoft}`,
              fontFamily: APG.mono, fontSize: 11,
              letterSpacing: '0.2em', textTransform: 'uppercase',
              color: APG.inkDim,
            }}>
              <div>Rango shove BTN</div>
              <div>Equity A♠K♦</div>
              <div>Decisión ICM</div>
              <div>Notas</div>
            </div>
            {rows.map((r, i) => (
              <Reveal key={i} from={r.p} to={r.p + 0.10} dy={14}>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: '320px 220px 240px 1fr',
                  padding: '20px 32px',
                  borderBottom: i === rows.length - 1 ? 'none' : `1px solid ${APG.borderSoft}`,
                  background: r.highlight ? 'rgba(228,200,120,0.06)' : 'transparent',
                  alignItems: 'center',
                }}>
                  <div style={{
                    fontFamily: APG.sans, fontSize: 17,
                    color: r.highlight ? APG.gold : APG.ink,
                    fontWeight: r.highlight ? 600 : 500,
                  }}>{r.range}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <EquityMini eq={r.eq} p={r.p} />
                    <span style={{
                      fontFamily: APG.mono, fontSize: 16,
                      color: r.eq >= 45 ? APG.green : APG.red,
                      fontVariantNumeric: 'tabular-nums', fontWeight: 600,
                    }}>~{r.eq}%</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{
                      width: 8, height: 8, borderRadius: 999, background: r.color,
                    }}/>
                    <span style={{
                      fontFamily: APG.sans, fontSize: 16, fontWeight: 600,
                      color: r.color,
                    }}>{r.decision}</span>
                  </div>
                  <div style={{ fontSize: 14, color: APG.inkMute }}>{r.note}</div>
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal from={0.80} to={0.92}>
            <div style={{
              position: 'absolute', left: 96, right: 96, bottom: 80,
              fontFamily: APG.sans, fontSize: 17,
              lineHeight: 1.55, color: APG.inkMute, textAlign: 'center',
            }}>
              Solo contra rangos ultra-premium (3% o menos) el fold es correcto.
              Contra cualquier rango amplio o estándar, <span style={{ color: APG.ink }}>A♠K♦ tiene equity para pagar</span>.
            </div>
          </Reveal>
        </div>
      )}
    </Sprite>
  );
}
function EquityMini({ eq, p }) {
  const { progress } = useSprite();
  const t = clamp((progress - p) / 0.18, 0, 1);
  const w = Easing.easeOutCubic(t) * eq;
  return (
    <div style={{
      width: 100, height: 6, borderRadius: 999,
      background: 'rgba(255,255,255,0.06)', overflow: 'hidden',
      position: 'relative',
    }}>
      <div style={{
        position: 'absolute', left: '45%', top: 0, bottom: 0,
        width: 1, background: APG.goldDeep, opacity: 0.5,
      }}/>
      <div style={{
        width: w + '%', height: '100%',
        background: eq >= 45 ? APG.green : APG.red,
        borderRadius: 999,
      }}/>
    </div>
  );
}

window.Scene08_Table = Scene08_Table;