// Scenes 4-5: Practical example + Reference table

// ─── Scene 4: PRACTICAL EXAMPLE — Bote 20 / Apuesta 10 (26 → 42s) ──────────
function SceneExample({ start = 26, end = 42 }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const exit = clamp((duration - localTime) / 0.5, 0, 1);

        // Phase timings
        const tBote   = clamp((localTime - 0.5) / 0.6, 0, 1);
        const tApuesta = clamp((localTime - 2.5) / 0.6, 0, 1);
        const tCalc   = clamp((localTime - 5.0) / 0.8, 0, 1);
        const tEquity = clamp((localTime - 8.0) / 0.8, 0, 1);
        const tVerdict = clamp((localTime - 11) / 0.8, 0, 1);

        return (
          <>
            <FeltBackground/>
            <div style={{ opacity: exit }}>
              <Kicker x={120} y={140}>Ejemplo práctico · Flop</Kicker>

              <div style={{
                position: 'absolute', left: 120, top: 210,
                fontFamily: FONTS.display,
                fontSize: 76, fontWeight: 700,
                color: POKER_COLORS.ink,
                letterSpacing: '-0.02em',
                lineHeight: 0.95,
                textTransform: 'uppercase',
                opacity: clamp(localTime / 0.5, 0, 1),
                width: 880,
              }}>
                Tienes <span style={{ color: POKER_COLORS.green }}>9 outs</span> de color.
              </div>

              {/* Center "table" view */}
              <div style={{
                position: 'absolute', left: 1040, top: 230,
                width: 760, height: 360,
                borderRadius: 200,
                background: `radial-gradient(ellipse at center, ${POKER_COLORS.felt}, ${POKER_COLORS.feltDeep})`,
                border: `2px solid ${POKER_COLORS.borderStrong}`,
                boxShadow: `inset 0 0 80px rgba(0,0,0,0.6), 0 20px 60px rgba(0,0,0,0.6)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                gap: 12,
              }}>
                {/* community cards */}
                <div style={{ display: 'flex', gap: 8, opacity: clamp(localTime/0.4,0,1) }}>
                  <PlayingCard rank="J" suit="♠" tilt={-3}/>
                  <PlayingCard rank="7" suit="♠" tilt={1}/>
                  <PlayingCard rank="2" suit="♥" tilt={-1}/>
                </div>
              </div>

              {/* Pot chips appearing */}
              <div style={{
                position: 'absolute', left: 1320, top: 470,
                opacity: tBote,
                transform: `translateY(${(1-tBote)*40}px) scale(${0.6 + tBote*0.4})`,
              }}>
                <ChipStack count={4} size={70} color={POKER_COLORS.green}/>
              </div>
              <div style={{
                position: 'absolute', left: 1240, top: 480,
                opacity: tBote,
                transform: `translateY(${(1-tBote)*40}px) scale(${0.6 + tBote*0.4})`,
              }}>
                <ChipStack count={3} size={70} color={POKER_COLORS.gold}/>
              </div>

              {/* Bote label */}
              <div style={{
                position: 'absolute', left: 1080, top: 640,
                opacity: tBote,
                transform: `translateY(${(1-tBote)*16}px)`,
              }}>
                <div style={{
                  fontFamily: FONTS.mono, fontSize: 18, letterSpacing: '0.2em',
                  textTransform: 'uppercase', color: POKER_COLORS.inkDim,
                }}>Bote</div>
                <div style={{
                  fontFamily: FONTS.display, fontSize: 110, fontWeight: 700,
                  color: POKER_COLORS.green, lineHeight: 1, letterSpacing: '-0.02em',
                }}>20€</div>
              </div>

              {/* Opponent's bet */}
              <div style={{
                position: 'absolute', left: 1480, top: 640,
                opacity: tApuesta,
                transform: `translateY(${(1-tApuesta)*16}px)`,
              }}>
                <div style={{
                  fontFamily: FONTS.mono, fontSize: 18, letterSpacing: '0.2em',
                  textTransform: 'uppercase', color: POKER_COLORS.inkDim,
                }}>Apuesta rival</div>
                <div style={{
                  fontFamily: FONTS.display, fontSize: 110, fontWeight: 700,
                  color: POKER_COLORS.red, lineHeight: 1, letterSpacing: '-0.02em',
                }}>10€</div>
              </div>

              {/* Left side calculation */}
              <div style={{
                position: 'absolute', left: 120, top: 410,
                opacity: tCalc,
                transform: `translateX(${(1-tCalc)*-20}px)`,
                fontFamily: FONTS.serif,
                fontStyle: 'italic',
              }}>
                <div style={{
                  fontFamily: FONTS.mono, fontSize: 18, letterSpacing: '0.2em',
                  textTransform: 'uppercase', color: POKER_COLORS.green,
                  marginBottom: 12, fontStyle: 'normal',
                }}>Pot odds</div>
                <div style={{
                  fontSize: 100, color: POKER_COLORS.ink, lineHeight: 1, fontWeight: 300,
                }}>
                  <span style={{ color: POKER_COLORS.green }}>20</span> : <span style={{ color: POKER_COLORS.red }}>10</span> &nbsp;=&nbsp; <span style={{ color: POKER_COLORS.gold }}>2 : 1</span>
                </div>
              </div>

              {/* Equity comparison */}
              <div style={{
                position: 'absolute', left: 120, top: 620,
                opacity: tEquity,
                display: 'flex', gap: 60, alignItems: 'baseline',
              }}>
                <div>
                  <div style={{
                    fontFamily: FONTS.mono, fontSize: 16, letterSpacing: '0.2em',
                    textTransform: 'uppercase', color: POKER_COLORS.inkDim,
                  }}>Necesitas</div>
                  <div style={{
                    fontFamily: FONTS.display, fontSize: 130, fontWeight: 700,
                    color: POKER_COLORS.ink, lineHeight: 1,
                  }}>25<span style={{ fontSize: 60 }}>%</span></div>
                </div>
                <div style={{ fontSize: 80, color: POKER_COLORS.inkSubtle, fontFamily: FONTS.serif }}>vs</div>
                <div>
                  <div style={{
                    fontFamily: FONTS.mono, fontSize: 16, letterSpacing: '0.2em',
                    textTransform: 'uppercase', color: POKER_COLORS.green,
                  }}>Tu equity</div>
                  <div style={{
                    fontFamily: FONTS.display, fontSize: 130, fontWeight: 700,
                    color: POKER_COLORS.green, lineHeight: 1,
                    textShadow: `0 0 40px rgba(16,185,129,0.4)`,
                  }}>36<span style={{ fontSize: 60 }}>%</span></div>
                </div>
              </div>

              {/* Verdict */}
              <div style={{
                position: 'absolute', left: 1080, top: 820,
                opacity: tVerdict,
                transform: `scale(${0.85 + tVerdict*0.15})`,
                transformOrigin: 'left center',
                padding: '20px 40px',
                background: POKER_COLORS.green,
                borderRadius: 4,
                boxShadow: `0 0 60px rgba(16,185,129,0.5)`,
              }}>
                <div style={{
                  fontFamily: FONTS.display,
                  fontSize: 80, fontWeight: 700,
                  color: POKER_COLORS.bg, lineHeight: 1,
                  letterSpacing: '-0.01em',
                  textTransform: 'uppercase',
                }}>Call · +EV</div>
              </div>

              <BrandMark x={120} y={980}/>
            </div>
          </>
        );
      }}
    </Sprite>
  );
}

// ─── Scene 5: REFERENCE TABLE (42 → 60s) ─────────────────────────────────
function SceneTable({ start = 42, end = 60 }) {
  const rows = [
    { bet: '¼ bote',     ratio: '5 : 1',     equity: '16.7%', outs: '5+'  },
    { bet: '½ bote',     ratio: '3 : 1',     equity: '25%',   outs: '7+'  },
    { bet: '⅔ bote',     ratio: '2.5 : 1',   equity: '28.6%', outs: '8+'  },
    { bet: 'Bote (1×)',  ratio: '2 : 1',     equity: '33.3%', outs: '9+'  },
    { bet: 'Overbet 2×', ratio: '1.5 : 1',   equity: '40%',   outs: '11+' },
    { bet: 'All-in 3×',  ratio: '1.33 : 1',  equity: '43%',   outs: '12+' },
  ];
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const exit = clamp((duration - localTime) / 0.5, 0, 1);
        return (
          <>
            <FeltBackground/>
            <div style={{ opacity: exit }}>
              <Kicker x={120} y={140}>Tabla de referencia rápida</Kicker>

              <div style={{
                position: 'absolute', left: 120, top: 220,
                fontFamily: FONTS.display,
                fontSize: 110, fontWeight: 700,
                color: POKER_COLORS.ink,
                letterSpacing: '-0.02em',
                lineHeight: 0.95,
                textTransform: 'uppercase',
                opacity: clamp(localTime/0.5, 0, 1),
              }}>
                Guarda esto<br/>
                en el <span style={{ color: POKER_COLORS.green }}>móvil</span>.
              </div>

              <div style={{
                position: 'absolute', left: 120, top: 460,
                width: 600,
                fontFamily: FONTS.sans,
                fontSize: 24,
                color: POKER_COLORS.inkDim,
                lineHeight: 1.5,
                fontWeight: 300,
                opacity: clamp((localTime-0.6)/0.6, 0, 1),
              }}>
                Apuesta del rival → equity mínima que necesitas para llamar +EV.
                Sin matemáticas en la mesa.
              </div>

              {/* Table */}
              <div style={{
                position: 'absolute', left: 880, top: 220,
                width: 940,
                background: 'rgba(255,255,255,0.02)',
                border: `1px solid ${POKER_COLORS.border}`,
                borderRadius: 4,
                overflow: 'hidden',
              }}>
                {/* header */}
                <div style={{
                  display: 'grid', gridTemplateColumns: '1.6fr 1.1fr 1fr 0.9fr',
                  padding: '20px 28px',
                  fontFamily: FONTS.mono,
                  fontSize: 14, letterSpacing: '0.2em',
                  textTransform: 'uppercase',
                  color: POKER_COLORS.green,
                  borderBottom: `1px solid ${POKER_COLORS.borderStrong}`,
                  background: 'rgba(16,185,129,0.06)',
                  opacity: clamp(localTime/0.4, 0, 1),
                }}>
                  <div>Apuesta</div>
                  <div>Ratio</div>
                  <div>Equity</div>
                  <div style={{ textAlign: 'right' }}>Outs</div>
                </div>
                {rows.map((r, i) => {
                  const rowStart = 0.8 + i * 0.45;
                  const t = clamp((localTime - rowStart) / 0.4, 0, 1);
                  const eased = Easing.easeOutCubic(t);
                  // highlight 1× bote row when reached
                  const highlightStart = 0.8 + 6 * 0.45 + 1.5;
                  const highlight = i === 3 && localTime > highlightStart;
                  return (
                    <div key={i} style={{
                      display: 'grid', gridTemplateColumns: '1.6fr 1.1fr 1fr 0.9fr',
                      padding: '24px 28px',
                      borderBottom: i < rows.length - 1 ? `1px solid ${POKER_COLORS.border}` : 'none',
                      opacity: eased,
                      transform: `translateX(${(1-eased)*30}px)`,
                      background: highlight ? 'rgba(16,185,129,0.10)' : 'transparent',
                      transition: 'background 400ms',
                      alignItems: 'center',
                    }}>
                      <div style={{
                        fontFamily: FONTS.sans, fontSize: 30, fontWeight: 500,
                        color: POKER_COLORS.ink,
                      }}>{r.bet}</div>
                      <div style={{
                        fontFamily: FONTS.mono, fontSize: 28, fontWeight: 500,
                        color: POKER_COLORS.gold,
                        fontVariantNumeric: 'tabular-nums',
                      }}>{r.ratio}</div>
                      <div style={{
                        fontFamily: FONTS.display, fontSize: 40, fontWeight: 700,
                        color: highlight ? POKER_COLORS.green : POKER_COLORS.ink,
                        fontVariantNumeric: 'tabular-nums',
                        lineHeight: 1,
                      }}>{r.equity}</div>
                      <div style={{
                        fontFamily: FONTS.sans, fontSize: 26, fontWeight: 300,
                        color: POKER_COLORS.inkDim,
                        textAlign: 'right',
                      }}>{r.outs}</div>
                    </div>
                  );
                })}
              </div>

              <BrandMark x={120} y={980}/>
            </div>
          </>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { SceneExample, SceneTable });