// Scene 03 — La pregunta central (Hero MP2 vs BTN shove)
function Scene03_Question({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground />
          <ChromeFrame scene={3} label="La pregunta" />

          <div style={{
            position: 'absolute', left: 96, top: 200, width: 1728,
          }}>
            <Reveal from={0} to={0.08}><Eyebrow text="Capítulo 02 · Decisión" /></Reveal>
            <div style={{ height: 24 }} />
            <Reveal from={0.04} to={0.16}>
              <SerifTitle size={92}>
                Hero abre con A♠K♦ a 2.5bb.<br/>BTN <span style={{ color: APG.red, fontStyle: 'italic' }}>shovea 18bb</span>.
              </SerifTitle>
            </Reveal>
          </div>

          {/* Three action chips: Hero open, BTN shove, decision */}
          <div style={{
            position: 'absolute', left: 96, top: 580, right: 96,
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32,
          }}>
            {[
              {
                step: '01', actor: 'Hero · MP2', action: 'Open 2.5bb',
                detail: 'Stack 28bb · Mano A♠K♦ · Posición media-tardía',
                color: APG.gold,
                p: 0.18,
              },
              {
                step: '02', actor: 'BTN · 18bb', action: 'Shove all-in',
                detail: 'Rango GTO de re-shove con 18bb vs MP2 open',
                color: APG.red,
                p: 0.32,
              },
              {
                step: '03', actor: 'Hero · decisión', action: '¿ Call ó Fold ?',
                detail: 'Necesita pagar 18bb para ganar bote de 22bb',
                color: APG.ink,
                p: 0.50,
                final: true,
              },
            ].map((c, i) => (
              <Reveal key={i} from={c.p} to={c.p + 0.14} dy={26}>
                <div style={{
                  border: `1px solid ${c.final ? APG.gold : APG.borderSoft}`,
                  background: c.final ? 'rgba(228,200,120,0.08)' : 'rgba(17,36,26,0.55)',
                  borderRadius: 6,
                  padding: '32px 32px 36px',
                  position: 'relative',
                  minHeight: 240,
                }}>
                  <div style={{
                    fontFamily: APG.mono, fontSize: 10,
                    letterSpacing: '0.22em', color: APG.inkDim,
                  }}>STEP {c.step}</div>
                  <div style={{
                    marginTop: 10,
                    fontFamily: APG.mono, fontSize: 12,
                    letterSpacing: '0.16em', textTransform: 'uppercase',
                    color: c.color,
                  }}>{c.actor}</div>
                  <div style={{
                    marginTop: 18,
                    fontFamily: APG.serif, fontSize: 52, lineHeight: 1.05,
                    color: APG.ink, fontStyle: c.final ? 'italic' : 'normal',
                  }}>{c.action}</div>
                  <div style={{
                    marginTop: 18,
                    fontSize: 16, lineHeight: 1.5,
                    color: APG.inkMute, maxWidth: 380,
                  }}>{c.detail}</div>
                </div>
              </Reveal>
            ))}
          </div>

          {/* Bottom: critical bubble note */}
          <Reveal from={0.70} to={0.85}>
            <div style={{
              position: 'absolute', left: 96, bottom: 96,
              display: 'flex', alignItems: 'center', gap: 18,
            }}>
              <div style={{
                width: 12, height: 12, borderRadius: 999,
                background: APG.red,
                boxShadow: `0 0 24px ${APG.red}`,
              }}/>
              <div style={{
                fontFamily: APG.sans, fontSize: 16,
                color: APG.inkMute, letterSpacing: '0.04em',
              }}>
                Estamos en burbuja. Una eliminación más desbloquea premio para todos. <span style={{ color: APG.ink }}>La presión ICM es máxima.</span>
              </div>
            </div>
          </Reveal>
        </div>
      )}
    </Sprite>
  );
}

window.Scene03_Question = Scene03_Question;