// Scene 10 — CTA Laboratorio GTO + Outro
function Scene10_CTA({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground tone="felt" />
          <ChromeFrame scene={10} label="Entrena el spot" />

          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            padding: '0 96px',
          }}>
            <Reveal from={0} to={0.10}>
              <Eyebrow text="Laboratorio GTO · Academy Poker" />
            </Reveal>
            <div style={{ height: 28 }} />
            <Reveal from={0.06} to={0.20}>
              <div style={{ textAlign: 'center', maxWidth: 1400 }}>
                <SerifTitle size={120}>
                  Entrena este spot<br/>
                  <span style={{ fontStyle: 'italic', color: APG.gold }}>directamente en el solver.</span>
                </SerifTitle>
              </div>
            </Reveal>
            <div style={{ height: 36 }} />
            <Reveal from={0.18} to={0.32}>
              <div style={{
                fontFamily: APG.sans, fontSize: 22, lineHeight: 1.5,
                color: APG.inkMute, maxWidth: 880, textAlign: 'center',
              }}>
                Stacks, ciegas y posiciones precargadas. Ejecuta el solver y compara
                tu decisión con la solución GTO. Sin instalar nada.
              </div>
            </Reveal>

            {/* Three feature pills */}
            <div style={{ height: 56 }} />
            <Reveal from={0.30} to={0.46}>
              <div style={{ display: 'flex', gap: 18 }}>
                {[
                  ['Spot precargado', '28bb · 18bb · MP2 vs BTN'],
                  ['Solver integrado', 'GTO + ICM en navegador'],
                  ['Modo práctica', '50 repeticiones · feedback live'],
                ].map(([t, s], i) => (
                  <div key={i} style={{
                    padding: '18px 24px',
                    border: `1px solid ${APG.border}`,
                    background: 'rgba(228,200,120,0.05)',
                    borderRadius: 6,
                    minWidth: 280,
                  }}>
                    <div style={{
                      fontFamily: APG.mono, fontSize: 11,
                      letterSpacing: '0.18em', color: APG.gold,
                      textTransform: 'uppercase', marginBottom: 8,
                    }}>{t}</div>
                    <div style={{ fontSize: 15, color: APG.ink }}>{s}</div>
                  </div>
                ))}
              </div>
            </Reveal>

            <div style={{ height: 64 }} />
            <Reveal from={0.46} to={0.60}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 18,
                padding: '22px 40px',
                background: APG.gold,
                color: '#07100B',
                borderRadius: 999,
                fontFamily: APG.sans, fontSize: 20, fontWeight: 700,
                letterSpacing: '0.04em',
                boxShadow: '0 20px 60px rgba(228,200,120,0.25), 0 0 0 6px rgba(228,200,120,0.08)',
              }}>
                Abrir spot en el Laboratorio GTO
                <span style={{ fontSize: 22 }}>→</span>
              </div>
            </Reveal>

            <div style={{ height: 28 }} />
            <Reveal from={0.55} to={0.70}>
              <div style={{
                fontFamily: APG.mono, fontSize: 12,
                letterSpacing: '0.2em', color: APG.inkDim,
                textTransform: 'uppercase',
              }}>academypokergto.com / blog / fold-ak-burbuja</div>
            </Reveal>
          </div>

          {/* Outro logo bloom */}
          <Reveal from={0.78} to={0.95}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'radial-gradient(ellipse at center, rgba(7,16,11,0.92) 0%, rgba(7,16,11,0.98) 60%, #07100B 100%)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexDirection: 'column',
            }}>
              <div style={{
                width: 88, height: 88, borderRadius: 14,
                background: APG.gold,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: APG.serif, fontSize: 64, fontStyle: 'italic',
                color: '#07100B',
              }}>A</div>
              <div style={{ height: 24 }} />
              <div style={{
                fontFamily: APG.serif, fontSize: 56, fontStyle: 'italic',
                color: APG.ink,
              }}>Academy Poker GTO</div>
              <div style={{ height: 12 }} />
              <div style={{
                fontFamily: APG.sans, fontSize: 16, color: APG.inkMute,
                letterSpacing: '0.16em', textTransform: 'uppercase',
              }}>Domina el GTO. Sube de stakes.</div>
            </div>
          </Reveal>
        </div>
      )}
    </Sprite>
  );
}

window.Scene10_CTA = Scene10_CTA;