// Scenes 1-3: Hook, Definition, Formula

// ─── Scene 1: HOOK (0 → 4s) ──────────────────────────────────────────────
function SceneHook({ start = 0, end = 4 }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime }) => {
        const titleProg = clamp(localTime / 1.0, 0, 1);
        const subProg   = clamp((localTime - 0.6) / 0.8, 0, 1);
        const chipProg  = clamp((localTime - 0.2) / 1.2, 0, 1);
        return (
          <>
            <FeltBackground/>
            {/* Floating chips background */}
            <div style={{
              position: 'absolute', left: 1380, top: 200,
              opacity: chipProg * 0.9,
              transform: `translateY(${(1-chipProg)*60}px) rotate(-12deg)`,
            }}>
              <ChipStack count={6} size={140} color={POKER_COLORS.green} label="GTO"/>
            </div>
            <div style={{
              position: 'absolute', left: 1620, top: 480,
              opacity: chipProg * 0.7,
              transform: `translateY(${(1-chipProg)*40}px) rotate(8deg)`,
            }}>
              <ChipStack count={4} size={110} color="#d4af37" label="$"/>
            </div>
            <div style={{
              position: 'absolute', left: 1240, top: 680,
              opacity: chipProg * 0.5,
              transform: `translateY(${(1-chipProg)*30}px) rotate(-4deg)`,
            }}>
              <ChipStack count={3} size={90} color="#dc2626" label=""/>
            </div>

            <Kicker x={120} y={140} delay={0}>Academy Poker GTO &nbsp;·&nbsp; Lección 01</Kicker>

            {/* Title — split words for staggered reveal */}
            <div style={{
              position: 'absolute', left: 120, top: 280,
              fontFamily: FONTS.display,
              fontSize: 280, fontWeight: 700,
              lineHeight: 0.92,
              letterSpacing: '-0.02em',
              color: POKER_COLORS.ink,
              textTransform: 'uppercase',
            }}>
              <div style={{
                opacity: clamp(titleProg, 0, 1),
                transform: `translateY(${(1-Easing.easeOutExpo(titleProg))*40}px)`,
              }}>POT</div>
              <div style={{
                color: POKER_COLORS.green,
                opacity: clamp((localTime - 0.35) / 0.6, 0, 1),
                transform: `translateY(${(1-Easing.easeOutExpo(clamp((localTime-0.35)/0.6,0,1)))*40}px)`,
                textShadow: `0 0 60px rgba(16,185,129,0.5)`,
              }}>ODDS</div>
            </div>

            <div style={{
              position: 'absolute', left: 120, top: 870,
              fontFamily: FONTS.serif,
              fontSize: 42,
              fontStyle: 'italic',
              color: POKER_COLORS.inkDim,
              opacity: subProg,
              transform: `translateY(${(1-subProg)*16}px)`,
              maxWidth: 900,
              lineHeight: 1.2,
              fontWeight: 300,
            }}>
              Matemática pura aplicada al poker.
            </div>

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

// ─── Scene 2: DEFINITION (4 → 11s) ───────────────────────────────────────
function SceneDefinition({ start = 4, end = 11 }) {
  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} delay={0}>¿Qué son los pot odds?</Kicker>

              {/* Big quote */}
              <div style={{
                position: 'absolute', left: 120, top: 260,
                fontSize: 280,
                fontFamily: FONTS.serif,
                color: POKER_COLORS.green,
                lineHeight: 0.7,
                opacity: clamp(localTime / 0.8, 0, 1),
              }}>"</div>

              <div style={{
                position: 'absolute', left: 220, top: 320,
                width: 1480,
                fontFamily: FONTS.serif,
                fontSize: 76,
                fontWeight: 400,
                color: POKER_COLORS.ink,
                lineHeight: 1.18,
                letterSpacing: '-0.01em',
                textWrap: 'pretty',
              }}>
                <MaskReveal delay={0.3} dur={0.8} dir="up">
                  No te dicen si vas a <em style={{ color: POKER_COLORS.green, fontStyle: 'italic' }}>ganar</em> la mano.
                </MaskReveal>
                <div style={{ height: 24 }}/>
                <MaskReveal delay={1.2} dur={0.8} dir="up">
                  Te dicen si <strong style={{ fontWeight: 600 }}>llamar es rentable</strong> a largo plazo.
                </MaskReveal>
              </div>

              <div style={{
                position: 'absolute', left: 220, top: 800,
                opacity: clamp((localTime - 2.4) / 0.6, 0, 1),
                transform: `translateY(${(1-clamp((localTime-2.4)/0.6,0,1))*12}px)`,
                fontFamily: FONTS.mono,
                fontSize: 22,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: POKER_COLORS.inkDim,
                display: 'flex', alignItems: 'center', gap: 16,
              }}>
                <div style={{ width: 60, height: 1, background: POKER_COLORS.inkDim }}/>
                Y en poker, el largo plazo es lo único que importa.
              </div>

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

// ─── Scene 3: FORMULA — 4 STEPS (11 → 26s) ────────────────────────────────
function SceneFormula({ start = 11, end = 26 }) {
  const steps = [
    { n: '01', title: 'Identifica el bote', desc: 'Suma todo el dinero ya en el centro de la mesa.' },
    { n: '02', title: 'Identifica la apuesta', desc: 'Cuánto debes pagar para igualar y seguir.' },
    { n: '03', title: 'Calcula el ratio', desc: 'Bote ÷ tu llamada = X : 1' },
    { n: '04', title: 'Convierte a equity', desc: 'Llamada ÷ (bote + llamada) × 100 = % mínimo' },
  ];
  // each step gets ~3.0s window inside the 15s scene
  const stepDur = 3.0;
  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}>La fórmula · 4 pasos</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.6, 0, 1),
              }}>
                Cómo se<br/>
                <span style={{ color: POKER_COLORS.green }}>calcula</span>.
              </div>

              {/* Steps grid (right side) */}
              <div style={{
                position: 'absolute', left: 880, top: 230,
                width: 920,
                display: 'flex', flexDirection: 'column', gap: 24,
              }}>
                {steps.map((s, i) => {
                  const stepStart = 0.8 + i * stepDur;
                  const t = clamp((localTime - stepStart) / 0.5, 0, 1);
                  const eased = Easing.easeOutCubic(t);
                  // currently active step?
                  const active = localTime >= stepStart && localTime < stepStart + stepDur + 0.5;
                  return (
                    <div key={s.n} style={{
                      opacity: eased,
                      transform: `translateX(${(1-eased)*40}px)`,
                      display: 'flex', gap: 24,
                      padding: '24px 28px',
                      background: active ? 'rgba(16,185,129,0.08)' : 'rgba(255,255,255,0.02)',
                      border: `1px solid ${active ? POKER_COLORS.green : POKER_COLORS.border}`,
                      borderRadius: 4,
                      transition: 'background 300ms, border-color 300ms',
                    }}>
                      <div style={{
                        fontFamily: FONTS.mono,
                        fontSize: 56, fontWeight: 700,
                        color: active ? POKER_COLORS.green : POKER_COLORS.inkSubtle,
                        lineHeight: 1,
                        minWidth: 100,
                        transition: 'color 300ms',
                      }}>{s.n}</div>
                      <div style={{ flex: 1 }}>
                        <div style={{
                          fontFamily: FONTS.sans,
                          fontSize: 38, fontWeight: 600,
                          color: POKER_COLORS.ink,
                          letterSpacing: '-0.01em',
                          marginBottom: 8,
                        }}>{s.title}</div>
                        <div style={{
                          fontFamily: FONTS.sans,
                          fontSize: 22,
                          color: POKER_COLORS.inkDim,
                          lineHeight: 1.4,
                          fontWeight: 300,
                        }}>{s.desc}</div>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Formula card bottom-left */}
              <div style={{
                position: 'absolute', left: 120, top: 720,
                width: 700,
                opacity: clamp((localTime - 10) / 0.8, 0, 1),
                transform: `translateY(${(1-clamp((localTime-10)/0.8,0,1))*20}px)`,
              }}>
                <div style={{
                  fontFamily: FONTS.mono,
                  fontSize: 18,
                  letterSpacing: '0.2em',
                  textTransform: 'uppercase',
                  color: POKER_COLORS.green,
                  marginBottom: 16,
                }}>EQUITY MÍNIMA =</div>
                <div style={{
                  fontFamily: FONTS.serif,
                  fontSize: 44,
                  color: POKER_COLORS.ink,
                  lineHeight: 1.3,
                  fontStyle: 'italic',
                  fontWeight: 300,
                }}>
                  llamada<br/>
                  <span style={{
                    display: 'inline-block',
                    borderTop: `2px solid ${POKER_COLORS.ink}`,
                    paddingTop: 8,
                    marginTop: 4,
                  }}>bote + llamada</span>
                  &nbsp;<span style={{ color: POKER_COLORS.green, fontStyle: 'normal', fontFamily: FONTS.sans }}>× 100</span>
                </div>
              </div>

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

Object.assign(window, { SceneHook, SceneDefinition, SceneFormula });