// Scenes 6-8: Implied odds, Common errors, CTA

// ─── Scene 6: POT ODDS vs IMPLIED ODDS (60 → 72s) ─────────────────────────
function SceneImplied({ start = 60, end = 72 }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const exit = clamp((duration - localTime) / 0.5, 0, 1);
        const tLeft = clamp(localTime / 0.6, 0, 1);
        const tRight = clamp((localTime - 1.8) / 0.6, 0, 1);
        const tBottom = clamp((localTime - 5) / 0.6, 0, 1);
        return (
          <>
            <FeltBackground/>
            <div style={{ opacity: exit }}>
              <Kicker x={120} y={140}>Pot odds vs Implied odds</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.4, 0, 1),
              }}>
                A veces el dinero<br/>
                que <span style={{ color: POKER_COLORS.green }}>aún no está</span><br/>
                importa más.
              </div>

              {/* Two columns */}
              <div style={{
                position: 'absolute', left: 1000, top: 240,
                width: 380,
                opacity: tLeft,
                transform: `translateY(${(1-tLeft)*20}px)`,
                padding: 32,
                border: `1px solid ${POKER_COLORS.border}`,
                borderRadius: 4,
                background: 'rgba(255,255,255,0.02)',
              }}>
                <div style={{
                  fontFamily: FONTS.mono, fontSize: 14, letterSpacing: '0.2em',
                  textTransform: 'uppercase', color: POKER_COLORS.inkDim, marginBottom: 16,
                }}>Pot odds</div>
                <div style={{
                  fontFamily: FONTS.serif, fontSize: 36, fontWeight: 400,
                  color: POKER_COLORS.ink, lineHeight: 1.2,
                  fontStyle: 'italic',
                }}>El dinero que <strong style={{ fontStyle: 'normal', color: POKER_COLORS.gold }}>ya está</strong> en el bote.</div>
                <div style={{
                  marginTop: 28,
                  display: 'flex', gap: 6,
                }}>
                  <PokerChip size={50} color={POKER_COLORS.gold}/>
                  <PokerChip size={50} color={POKER_COLORS.gold}/>
                  <PokerChip size={50} color={POKER_COLORS.gold}/>
                </div>
              </div>

              <div style={{
                position: 'absolute', left: 1420, top: 240,
                width: 380,
                opacity: tRight,
                transform: `translateY(${(1-tRight)*20}px)`,
                padding: 32,
                border: `1px solid ${POKER_COLORS.green}`,
                borderRadius: 4,
                background: 'rgba(16,185,129,0.06)',
                boxShadow: `0 0 60px rgba(16,185,129,0.15)`,
              }}>
                <div style={{
                  fontFamily: FONTS.mono, fontSize: 14, letterSpacing: '0.2em',
                  textTransform: 'uppercase', color: POKER_COLORS.green, marginBottom: 16,
                }}>Implied odds</div>
                <div style={{
                  fontFamily: FONTS.serif, fontSize: 36, fontWeight: 400,
                  color: POKER_COLORS.ink, lineHeight: 1.2,
                  fontStyle: 'italic',
                }}>El dinero que <strong style={{ fontStyle: 'normal', color: POKER_COLORS.green }}>ganarás</strong> si completas tu mano.</div>
                <div style={{
                  marginTop: 28,
                  display: 'flex', gap: 6,
                  opacity: 0.5,
                }}>
                  <div style={{ width: 50, height: 50, borderRadius: 25, border: `2px dashed ${POKER_COLORS.green}` }}/>
                  <div style={{ width: 50, height: 50, borderRadius: 25, border: `2px dashed ${POKER_COLORS.green}` }}/>
                  <div style={{ width: 50, height: 50, borderRadius: 25, border: `2px dashed ${POKER_COLORS.green}` }}/>
                  <div style={{ width: 50, height: 50, borderRadius: 25, border: `2px dashed ${POKER_COLORS.green}` }}/>
                  <div style={{ width: 50, height: 50, borderRadius: 25, border: `2px dashed ${POKER_COLORS.green}` }}/>
                </div>
              </div>

              {/* Bottom rule */}
              <div style={{
                position: 'absolute', left: 120, top: 800,
                width: 1680,
                opacity: tBottom,
                transform: `translateY(${(1-tBottom)*16}px)`,
                padding: 32,
                borderTop: `1px solid ${POKER_COLORS.border}`,
                display: 'flex', alignItems: 'center', gap: 32,
              }}>
                <div style={{
                  fontFamily: FONTS.mono, fontSize: 18, letterSpacing: '0.3em',
                  textTransform: 'uppercase', color: POKER_COLORS.green,
                  whiteSpace: 'nowrap',
                }}>Regla</div>
                <div style={{
                  fontFamily: FONTS.serif, fontSize: 38, fontWeight: 300,
                  color: POKER_COLORS.ink, lineHeight: 1.3,
                  fontStyle: 'italic',
                  textWrap: 'pretty',
                }}>
                  Más stack + rival pasivo postflop = <span style={{ color: POKER_COLORS.green, fontWeight: 500 }}>más peso</span> a los implied odds.
                </div>
              </div>

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

// ─── Scene 7: 5 ERRORES COMUNES (72 → 84s) ────────────────────────────────
function SceneErrors({ start = 72, end = 84 }) {
  const errors = [
    'Confundir pot odds con probabilidad de ganar.',
    'Ignorar el rake en cash games online.',
    'Contar outs sucios como si fueran limpios.',
    'Olvidar que en multiway la equity se diluye.',
    'No filtrar las decisiones por ICM en torneos.',
  ];
  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} color={POKER_COLORS.red}>Cuidado</Kicker>

              <div style={{
                position: 'absolute', left: 120, top: 220,
                fontFamily: FONTS.display,
                fontSize: 130, fontWeight: 700,
                color: POKER_COLORS.ink,
                letterSpacing: '-0.02em',
                lineHeight: 0.95,
                textTransform: 'uppercase',
                opacity: clamp(localTime/0.4, 0, 1),
              }}>
                <span style={{ color: POKER_COLORS.red }}>5 errores</span><br/>
                que pagas caro.
              </div>

              {/* List */}
              <div style={{
                position: 'absolute', left: 120, top: 580,
                width: 1680,
                display: 'flex', flexDirection: 'column', gap: 12,
              }}>
                {errors.map((err, i) => {
                  const errStart = 0.6 + i * 1.6;
                  const t = clamp((localTime - errStart) / 0.4, 0, 1);
                  const eased = Easing.easeOutCubic(t);
                  return (
                    <div key={i} style={{
                      opacity: eased,
                      transform: `translateY(${(1-eased)*16}px)`,
                      display: 'flex', alignItems: 'baseline', gap: 32,
                    }}>
                      <div style={{
                        fontFamily: FONTS.mono, fontSize: 22, fontWeight: 500,
                        color: POKER_COLORS.red,
                        width: 60,
                        fontVariantNumeric: 'tabular-nums',
                      }}>0{i+1}</div>
                      <div style={{
                        fontFamily: FONTS.sans, fontSize: 42, fontWeight: 400,
                        color: POKER_COLORS.ink,
                        letterSpacing: '-0.01em',
                      }}>{err}</div>
                    </div>
                  );
                })}
              </div>

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

// ─── Scene 8: CTA — Academy Poker GTO (84 → 96s) ──────────────────────────
function SceneCTA({ start = 84, end = 96 }) {
  const items = [
    { kicker: 'Curso PRO', title: 'Fundamentos GTO/ICM', desc: 'Manos reales resueltas paso a paso.' },
    { kicker: 'Calculadora', title: 'ICM Online', desc: 'Stacks → equity en dólares reales.' },
    { kicker: 'Práctica', title: 'Laboratorio GTO', desc: 'Solver integrado · feedback instantáneo.' },
  ];
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const exit = clamp((duration - localTime) / 0.6, 0, 1);
        const tTitle = clamp(localTime / 0.8, 0, 1);
        return (
          <>
            <FeltBackground/>
            {/* glow */}
            <div style={{
              position: 'absolute', inset: 0,
              background: `radial-gradient(ellipse at 50% 30%, rgba(16,185,129,0.18), transparent 60%)`,
              opacity: clamp(localTime/0.8, 0, 1),
            }}/>

            <div style={{ opacity: exit }}>
              {/* Logo */}
              <div style={{
                position: 'absolute', left: '50%', top: 180,
                transform: `translateX(-50%) translateY(${(1-Easing.easeOutExpo(tTitle))*20}px)`,
                opacity: tTitle,
                display: 'flex', flexDirection: 'column', alignItems: 'center',
              }}>
                <svg width="90" height="90" viewBox="0 0 24 24" fill="none">
                  <path d="M12 2L2 7l10 5 10-5-10-5z" stroke={POKER_COLORS.green} strokeWidth="1.2" strokeLinejoin="round"/>
                  <path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke={POKER_COLORS.green} strokeWidth="1.2" strokeLinejoin="round" opacity="0.5"/>
                </svg>
              </div>

              <div style={{
                position: 'absolute', left: 0, right: 0, top: 310,
                textAlign: 'center',
                fontFamily: FONTS.display,
                fontSize: 130, fontWeight: 700,
                color: POKER_COLORS.ink,
                letterSpacing: '-0.02em',
                lineHeight: 0.95,
                textTransform: 'uppercase',
                opacity: clamp((localTime-0.3)/0.6, 0, 1),
                transform: `translateY(${(1-clamp((localTime-0.3)/0.6,0,1))*20}px)`,
              }}>
                Domina el GTO.<br/>
                <span style={{ color: POKER_COLORS.green }}>Sube de stakes.</span>
              </div>

              {/* Three CTA cards */}
              <div style={{
                position: 'absolute', left: 120, top: 660,
                width: 1680,
                display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
              }}>
                {items.map((it, i) => {
                  const iStart = 1.2 + i * 0.25;
                  const t = clamp((localTime - iStart) / 0.5, 0, 1);
                  const eased = Easing.easeOutCubic(t);
                  return (
                    <div key={i} style={{
                      opacity: eased,
                      transform: `translateY(${(1-eased)*30}px)`,
                      padding: 32,
                      border: `1px solid ${POKER_COLORS.border}`,
                      borderRadius: 4,
                      background: 'rgba(255,255,255,0.02)',
                      backdropFilter: 'blur(10px)',
                    }}>
                      <div style={{
                        fontFamily: FONTS.mono, fontSize: 14, letterSpacing: '0.25em',
                        textTransform: 'uppercase', color: POKER_COLORS.green,
                        marginBottom: 14,
                      }}>{it.kicker}</div>
                      <div style={{
                        fontFamily: FONTS.display, fontSize: 56, fontWeight: 700,
                        color: POKER_COLORS.ink, letterSpacing: '-0.01em',
                        lineHeight: 1, textTransform: 'uppercase', marginBottom: 16,
                      }}>{it.title}</div>
                      <div style={{
                        fontFamily: FONTS.sans, fontSize: 22, fontWeight: 300,
                        color: POKER_COLORS.inkDim, lineHeight: 1.4,
                      }}>{it.desc}</div>
                    </div>
                  );
                })}
              </div>

              {/* Footer URL */}
              <div style={{
                position: 'absolute', left: 0, right: 0, top: 970,
                textAlign: 'center',
                fontFamily: FONTS.mono, fontSize: 22, letterSpacing: '0.4em',
                textTransform: 'uppercase', color: POKER_COLORS.green,
                opacity: clamp((localTime-2.4)/0.6, 0, 1),
              }}>
                academypokergto.com
              </div>
            </div>
          </>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { SceneImplied, SceneErrors, SceneCTA });