// Scene 01 — Hook / Title
function Scene01_Hook({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ progress, localTime, duration }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground />
          <ChromeFrame scene={1} label="Apertura" />

          {/* Two AK cards floating top-right */}
          <Sprite start={start + 0.4} end={end} keepMounted>
            {({ localTime: lt }) => {
              const p = clamp(lt / 1.2, 0, 1);
              const ease = Easing.easeOutCubic(p);
              return (
                <div style={{
                  position: 'absolute',
                  right: 220, top: 200,
                  width: 360, height: 320,
                  opacity: ease,
                  transform: `translateY(${(1 - ease) * 40}px)`,
                }}>
                  <Card rank="A" suit="♠" x={20} y={0} width={170} rotate={-8} />
                  <Card rank="K" suit="♦" x={170} y={20} width={170} rotate={8} />
                </div>
              );
            }}
          </Sprite>

          {/* Question, big serif */}
          <div style={{ position: 'absolute', left: 96, top: 360, width: 1100 }}>
            <Reveal from={0} to={0.10}>
              <Eyebrow text="Análisis GTO · Paso a paso" />
            </Reveal>
            <div style={{ height: 32 }} />
            <Reveal from={0.05} to={0.22}>
              <SerifTitle size={140}>
                ¿Es <span style={{ fontStyle: 'italic', color: APG.gold }}>fold AK</span>
              </SerifTitle>
            </Reveal>
            <Reveal from={0.10} to={0.28}>
              <SerifTitle size={140}>en burbuja?</SerifTitle>
            </Reveal>
            <div style={{ height: 36 }} />
            <Reveal from={0.30} to={0.50}>
              <div style={{
                maxWidth: 720,
                fontFamily: APG.sans,
                fontSize: 22,
                lineHeight: 1.5,
                color: APG.inkMute,
                fontWeight: 400,
              }}>
                Spot real. Cálculo ICM. Equity. Solver. La respuesta definitiva
                que puedes aplicar en tu próxima sesión.
              </div>
            </Reveal>
          </div>

          {/* Bottom progress hint */}
          <Reveal from={0.7} to={0.95}>
            <div style={{
              position: 'absolute', left: 96, bottom: 96,
              display: 'flex', alignItems: 'center', gap: 14,
              fontFamily: APG.mono, fontSize: 12,
              color: APG.inkDim, letterSpacing: '0.18em',
              textTransform: 'uppercase',
            }}>
              <span style={{ width: 8, height: 8, background: APG.gold, borderRadius: 999 }}></span>
              Empezamos · 9 capítulos
            </div>
          </Reveal>
        </div>
      )}
    </Sprite>
  );
}

window.Scene01_Hook = Scene01_Hook;