// Scene 02 — The Spot (table data)
function Scene02_Spot({ start, end }) {
  const rows = [
    { label: 'Torneo',         value: 'MTT online · 1.500 jugadores · quedan 46' },
    { label: 'Burbuja',        value: '46 / 45 entran en premios' },
    { label: 'Ciegas',         value: '1.000 / 2.000 · ante 200' },
    { label: 'Hero (MP2)',     value: '28bb · abre 2.5bb con A♠K♦', highlight: true },
    { label: 'BTN',            value: '18bb · shovea all-in', highlight: true },
    { label: 'Blinds',         value: 'Fold · Fold' },
    { label: 'Bote si call',   value: '40bb totales' },
  ];
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground tone="felt" />
          <ChromeFrame scene={2} label="El Spot" />

          {/* Left: title */}
          <div style={{ position: 'absolute', left: 96, top: 180, width: 700 }}>
            <Reveal from={0} to={0.08}>
              <Eyebrow text="Capítulo 01 · Contexto real" />
            </Reveal>
            <div style={{ height: 24 }} />
            <Reveal from={0.04} to={0.16}>
              <SerifTitle size={84}>El spot:<br/>contexto del torneo</SerifTitle>
            </Reveal>
            <div style={{ height: 28 }} />
            <Reveal from={0.10} to={0.22}>
              <div style={{
                maxWidth: 540, fontSize: 19, lineHeight: 1.55,
                color: APG.inkMute,
              }}>
                Un spot que se repite cientos de veces al día en mesas online de
                stakes medios.
              </div>
            </Reveal>

            {/* Mini poker table illustration */}
            <Reveal from={0.20} to={0.40}>
              <div style={{
                marginTop: 56,
                width: 540, height: 280,
                position: 'relative',
              }}>
                {/* Table */}
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'radial-gradient(ellipse at center, #1d4731 0%, #0F2A1C 75%)',
                  borderRadius: 200,
                  border: `2px solid ${APG.goldDeep}`,
                  boxShadow: 'inset 0 0 60px rgba(0,0,0,0.6), 0 20px 50px rgba(0,0,0,0.5)',
                }}/>
                {/* Seats */}
                {[
                  { label: 'BB',  x: 30,  y: 140, color: APG.inkDim },
                  { label: 'SB',  x: 90,  y: 30,  color: APG.inkDim },
                  { label: 'UTG', x: 220, y: -10, color: APG.inkDim },
                  { label: 'MP1', x: 350, y: -10, color: APG.inkDim },
                  { label: 'MP2 Hero', x: 460, y: 30, color: APG.gold, hero: true },
                  { label: 'CO',  x: 480, y: 140, color: APG.inkDim },
                  { label: 'BTN', x: 240, y: 250, color: APG.red, hero: false, btn: true },
                ].map((s, i) => (
                  <div key={i} style={{
                    position: 'absolute', left: s.x, top: s.y,
                    padding: '6px 12px', borderRadius: 999,
                    background: s.hero ? 'rgba(228,200,120,0.15)' : (s.btn ? 'rgba(217,83,79,0.15)' : 'rgba(0,0,0,0.4)'),
                    border: `1px solid ${s.hero ? APG.gold : (s.btn ? APG.red : 'rgba(255,255,255,0.15)')}`,
                    fontFamily: APG.mono, fontSize: 11, color: s.color,
                    letterSpacing: '0.1em', fontWeight: 600,
                    textTransform: 'uppercase',
                  }}>{s.label}</div>
                ))}
                {/* Pot label */}
                <div style={{
                  position: 'absolute', left: '50%', top: '50%',
                  transform: 'translate(-50%, -50%)',
                  textAlign: 'center',
                }}>
                  <div style={{
                    fontFamily: APG.mono, fontSize: 10, color: APG.inkDim,
                    letterSpacing: '0.2em', textTransform: 'uppercase',
                  }}>Bote si call</div>
                  <div style={{
                    fontFamily: APG.serif, fontSize: 44, color: APG.gold, lineHeight: 1.05,
                  }}>40 bb</div>
                </div>
              </div>
            </Reveal>
          </div>

          {/* Right: data table */}
          <div style={{ position: 'absolute', right: 96, top: 200, width: 660 }}>
            <Reveal from={0.08} to={0.20}>
              <div style={{
                fontFamily: APG.mono, fontSize: 11,
                letterSpacing: '0.22em', color: APG.gold,
                textTransform: 'uppercase', marginBottom: 18,
              }}>Datos del spot</div>
            </Reveal>
            <div style={{
              border: `1px solid ${APG.borderSoft}`,
              borderRadius: 4,
              background: 'rgba(15,42,28,0.45)',
              backdropFilter: 'blur(4px)',
              overflow: 'hidden',
            }}>
              {rows.map((r, i) => (
                <Reveal key={i} from={0.16 + i * 0.04} to={0.28 + i * 0.04}>
                  <div style={{
                    display: 'grid', gridTemplateColumns: '180px 1fr',
                    padding: '20px 28px',
                    borderTop: i === 0 ? 'none' : `1px solid ${APG.borderSoft}`,
                    background: r.highlight ? 'rgba(228,200,120,0.06)' : 'transparent',
                    alignItems: 'center',
                  }}>
                    <div style={{
                      fontFamily: APG.mono, fontSize: 11,
                      color: APG.inkMute, letterSpacing: '0.16em',
                      textTransform: 'uppercase',
                    }}>{r.label}</div>
                    <div style={{
                      fontFamily: APG.sans, fontSize: 18,
                      color: r.highlight ? APG.gold : APG.ink,
                      fontWeight: r.highlight ? 600 : 400,
                    }}>{r.value}</div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      )}
    </Sprite>
  );
}

window.Scene02_Spot = Scene02_Spot;