// scenes-6-7.jsx — Preflop application & Recap
// ═════════════════════════════════════════════════════════════════════════════
// SCENE 6 — PREFLOP APPLICATION (152 → 192s)
// SPR esperado: short stacks vs deep stacks, qué manos juegan
// ═════════════════════════════════════════════════════════════════════════════
function Scene6_Preflop() {
  return (
    <Sprite start={152} end={192}>
      {({ localTime }) => {
        const t = localTime;
        const titleOp = clamp(t / 0.6, 0, 1) * clamp((39 - t) / 1, 0, 1);

        // Two columns: short stack (left) vs deep stack (right)
        const shortT = clamp((t - 2) / 0.6, 0, 1);
        const deepT = clamp((t - 4) / 0.6, 0, 1);

        // Hands fly into each column staggered
        const shortHands = [
          { r1: 'A', s1: 's', r2: 'A', s2: 'h', label: 'AA', delay: 6, good: true },
          { r1: 'K', s1: 's', r2: 'K', s2: 'd', label: 'KK', delay: 7, good: true },
          { r1: 'A', s1: 's', r2: 'K', s2: 'h', label: 'AKo', delay: 8, good: true },
          { r1: '5', s1: 'd', r2: '4', s2: 'd', label: '54s', delay: 12, good: false },
          { r1: '2', s1: 'c', r2: '2', s2: 's', label: '22', delay: 14, good: false },
        ];
        const deepHands = [
          { r1: '5', s1: 'd', r2: '4', s2: 'd', label: '54s', delay: 18, good: true },
          { r1: '7', s1: 'h', r2: '6', s2: 'h', label: '76s', delay: 19, good: true },
          { r1: '8', s1: 's', r2: '8', s2: 'c', label: '88', delay: 20, good: true },
          { r1: 'A', s1: 's', r2: '5', s2: 's', label: 'A5s', delay: 21, good: true },
          { r1: 'A', s1: 's', r2: 'A', s2: 'h', label: 'AA', delay: 24, good: true },
        ];

        // Bottom insight at t=28
        const insightOp = clamp((t - 28) / 0.6, 0, 1) * clamp((39 - t) / 0.6, 0, 1);

        const exitOp = clamp((40 - t) / 1.2, 0, 1);

        return (
          <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
            {/* Header */}
            <div style={{
              position: 'absolute',
              top: 130, left: 0, right: 0,
              textAlign: 'center',
              opacity: titleOp,
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 12,
                letterSpacing: '0.32em',
                textTransform: 'uppercase',
                color: 'rgba(212,162,74,0.8)',
                marginBottom: 12,
              }}>05 · Antes del flop</div>
              <div style={{
                fontFamily: 'Inter, system-ui, sans-serif',
                fontSize: 44,
                fontWeight: 500,
                letterSpacing: '-0.02em',
                color: '#f3f1ea',
              }}>El SPR esperado decide qué manos juegas</div>
            </div>

            {/* Left column — SPR bajo (short) */}
            <ColumnHands
              opacity={shortT} t={t}
              x={120} width={780}
              accent="#4fd1c5"
              tag="SPR bajo esperado"
              title="Short stacks · 20-30BB"
              subtitle="Quieren manos de valor directo. Pares altos y AK ganan EV; especulativas pierden."
              hands={shortHands}
              footer={{ good: 'AA · KK · QQ · AK · AQ', bad: '54s · 22 — pierden potencial implícito' }}
            />

            {/* Right column — SPR alto (deep) */}
            <ColumnHands
              opacity={deepT} t={t}
              x={1020} width={780}
              accent="#e0556a"
              tag="SPR alto esperado"
              title="Deep stacks · 200BB+"
              subtitle="Las especulativas explotan al máximo. Un 54s puede ganar 300BB contra AA disimulado."
              hands={deepHands}
              footer={{ good: 'Suited connectors · pares pequeños · Axs', bad: 'AA aún juega — pero con más cuidado' }}
            />

            {/* Bottom insight */}
            <div style={{
              position: 'absolute',
              bottom: 90, left: 0, right: 0,
              textAlign: 'center',
              opacity: insightOp,
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 11,
                letterSpacing: '0.24em',
                textTransform: 'uppercase',
                color: 'rgba(212,162,74,0.85)',
                marginBottom: 10,
              }}>Regla de oro</div>
              <div style={{
                fontFamily: 'Inter, system-ui, sans-serif',
                fontSize: 28,
                fontWeight: 400,
                color: 'rgba(243,241,234,0.85)',
                letterSpacing: '-0.005em',
                maxWidth: 1200,
                margin: '0 auto',
                textWrap: 'balance',
              }}>
                Antes de entrar al bote, pregúntate: <span style={{color:'#d4a24a',fontStyle:'italic'}}>¿qué SPR tendré en el flop?</span> Esa respuesta filtra tu rango.
              </div>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

function ColumnHands({ opacity, t, x, width, accent, tag, title, subtitle, hands, footer }) {
  return (
    <div style={{
      position: 'absolute',
      top: 320, left: x,
      width, opacity,
      padding: '32px 36px',
      background: 'rgba(13,15,23,0.55)',
      border: `1px solid ${accent}40`,
      borderRadius: 14,
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 11,
        letterSpacing: '0.2em',
        color: accent,
        textTransform: 'uppercase',
        marginBottom: 8,
      }}>{tag}</div>
      <div style={{
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 36,
        fontWeight: 600,
        color: '#f3f1ea',
        letterSpacing: '-0.02em',
        marginBottom: 12,
      }}>{title}</div>
      <div style={{
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 17,
        color: 'rgba(243,241,234,0.6)',
        lineHeight: 1.45,
        marginBottom: 28,
        textWrap: 'pretty',
      }}>{subtitle}</div>

      {/* Hand grid */}
      <div style={{
        display: 'flex', flexWrap: 'wrap', gap: 18,
        marginBottom: 24,
        minHeight: 200,
      }}>
        {hands.map((h, i) => {
          const op = clamp((t - h.delay) / 0.5, 0, 1);
          const fade = h.good ? 1 : 0.35;
          return (
            <div key={i} style={{
              opacity: op * fade,
              transform: `translateY(${(1 - op) * 16}px)`,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              filter: h.good ? 'none' : 'grayscale(0.6)',
            }}>
              <div style={{ position: 'relative', width: 100, height: 80 }}>
                <PlayingCard rank={h.r1} suit={h.s1} width={50} x={26} y={40} rotate={-6}/>
                <PlayingCard rank={h.r2} suit={h.s2} width={50} x={68} y={40} rotate={6}/>
                {!h.good && (
                  <div style={{
                    position: 'absolute', inset: 0,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: '#e0556a',
                    fontSize: 30,
                    fontWeight: 200,
                    transform: 'rotate(-20deg)',
                  }}>✕</div>
                )}
              </div>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 13,
                color: h.good ? '#f3f1ea' : 'rgba(243,241,234,0.4)',
                fontVariantNumeric: 'tabular-nums',
                marginTop: 6,
              }}>{h.label}</div>
            </div>
          );
        })}
      </div>

      {/* Footer summary */}
      <div style={{
        paddingTop: 18,
        borderTop: '1px solid rgba(255,255,255,0.06)',
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 13,
        lineHeight: 1.7,
        color: 'rgba(243,241,234,0.65)',
      }}>
        <div><span style={{color: accent, marginRight: 8}}>↑</span>{footer.good}</div>
        <div style={{ color: 'rgba(243,241,234,0.4)', marginTop: 4 }}><span style={{marginRight: 8}}>↓</span>{footer.bad}</div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// SCENE 7 — RECAP / CTA (192 → 220s)
// 3 takeaways + close
// ═════════════════════════════════════════════════════════════════════════════
function Scene7_Recap() {
  return (
    <Sprite start={192} end={220}>
      {({ localTime }) => {
        const t = localTime;

        const titleOp = clamp(t / 0.8, 0, 1);
        const card1 = clamp((t - 1.5) / 0.6, 0, 1);
        const card2 = clamp((t - 3) / 0.6, 0, 1);
        const card3 = clamp((t - 4.5) / 0.6, 0, 1);

        // Big SPR closing mark (t=14)
        const closeT = clamp((t - 14) / 0.8, 0, 1);
        // CTA at t=18
        const ctaOp = clamp((t - 18) / 0.6, 0, 1);

        return (
          <Sprite start={192} end={220}>
            <div style={{ position: 'absolute', inset: 0 }}>
              {/* Header */}
              <div style={{
                position: 'absolute',
                top: 140, left: 0, right: 0,
                textAlign: 'center',
                opacity: titleOp * (1 - clamp((t - 13) / 1.5, 0, 1)),
              }}>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace',
                  fontSize: 12,
                  letterSpacing: '0.32em',
                  textTransform: 'uppercase',
                  color: 'rgba(212,162,74,0.8)',
                  marginBottom: 14,
                }}>06 · Para llevar</div>
                <div style={{
                  fontFamily: 'Inter, system-ui, sans-serif',
                  fontSize: 56,
                  fontWeight: 500,
                  letterSpacing: '-0.025em',
                  color: '#f3f1ea',
                }}>Tres cosas que recordar</div>
              </div>

              {/* Three takeaway cards */}
              <div style={{
                position: 'absolute',
                top: 380, left: 200, right: 200,
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gap: 28,
                opacity: 1 - clamp((t - 13) / 1.5, 0, 1),
              }}>
                {[
                  {
                    op: card1, accent: '#4fd1c5',
                    num: '01',
                    title: 'Calcula al inicio de cada calle',
                    desc: 'Recálculalo después del flop, del turn y del river. Cambia con cada apuesta y dicta la decisión siguiente.',
                  },
                  {
                    op: card2, accent: '#e8b95c',
                    num: '02',
                    title: 'Bajo = top pair · Alto = manos nutrias',
                    desc: 'Con SPR bajo te comprometes con un par alto. Con SPR alto necesitas sets, colores o escaleras para meter el stack.',
                  },
                  {
                    op: card3, accent: '#e0556a',
                    num: '03',
                    title: 'Úsalo preflop para filtrar tu rango',
                    desc: 'El SPR esperado te dice si las especulativas valen su precio o si necesitas manos de valor directo.',
                  },
                ].map((c, i) => (
                  <div key={i} style={{
                    opacity: c.op,
                    transform: `translateY(${(1 - c.op) * 24}px)`,
                    background: 'rgba(13,15,23,0.6)',
                    border: `1px solid ${c.accent}40`,
                    borderRadius: 14,
                    padding: '32px 28px',
                    minHeight: 320,
                    display: 'flex',
                    flexDirection: 'column',
                  }}>
                    <div style={{
                      fontFamily: 'Inter, system-ui, sans-serif',
                      fontSize: 80,
                      fontWeight: 700,
                      color: c.accent,
                      letterSpacing: '-0.04em',
                      lineHeight: 1,
                      marginBottom: 24,
                      fontVariantNumeric: 'tabular-nums',
                    }}>{c.num}</div>
                    <div style={{
                      fontFamily: 'Inter, system-ui, sans-serif',
                      fontSize: 26,
                      fontWeight: 600,
                      color: '#f3f1ea',
                      letterSpacing: '-0.015em',
                      lineHeight: 1.2,
                      marginBottom: 16,
                      textWrap: 'balance',
                    }}>{c.title}</div>
                    <div style={{
                      fontFamily: 'Inter, system-ui, sans-serif',
                      fontSize: 16,
                      color: 'rgba(243,241,234,0.62)',
                      lineHeight: 1.5,
                      textWrap: 'pretty',
                    }}>{c.desc}</div>
                  </div>
                ))}
              </div>

              {/* Closing mark */}
              {closeT > 0 && (
                <div style={{
                  position: 'absolute',
                  inset: 0,
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  opacity: closeT,
                }}>
                  <div style={{
                    fontFamily: 'Inter, system-ui, sans-serif',
                    fontSize: 240,
                    fontWeight: 800,
                    letterSpacing: '-0.05em',
                    color: '#f3f1ea',
                    lineHeight: 0.9,
                    transform: `scale(${0.96 + 0.04 * Easing.easeOutCubic(closeT)})`,
                  }}>
                    SPR
                  </div>
                  <div style={{
                    fontFamily: 'Inter, system-ui, sans-serif',
                    fontSize: 38,
                    fontWeight: 300,
                    color: 'rgba(243,241,234,0.7)',
                    marginTop: 24,
                    letterSpacing: '-0.01em',
                    textWrap: 'balance',
                    textAlign: 'center',
                    maxWidth: 900,
                  }}>
                    La regla que convierte el caos del bote en una decisión clara.
                  </div>

                  {/* CTA */}
                  <div style={{
                    marginTop: 60,
                    opacity: ctaOp,
                    display: 'flex',
                    alignItems: 'center',
                    gap: 18,
                  }}>
                    <div style={{
                      width: 28, height: 28,
                      borderRadius: 7,
                      background: 'linear-gradient(135deg, #d4a24a, #8a6520)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      color: '#0d0f17',
                      fontWeight: 800,
                      fontSize: 14,
                    }}>A</div>
                    <div style={{
                      fontFamily: 'Inter, system-ui, sans-serif',
                      fontSize: 18,
                      color: 'rgba(243,241,234,0.85)',
                      letterSpacing: '0.04em',
                    }}>
                      Academy Poker GTO · <span style={{ color: 'rgba(212,162,74,0.85)' }}>Lección 03 · Continúa con SPR avanzado →</span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </Sprite>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { Scene6_Preflop, Scene7_Recap });