// Scene 09 — Conclusión: cuándo call y cuándo fold
function Scene09_Final({ start, end }) {
  const calls = [
    'BTN shovea rango estándar GTO (22+, A2s+, AJo+, KQs)',
    'Stack medio-alto (20bb+) que necesita doble up',
  ];
  const folds = [
    'BTN solo shovea JJ+ o QQ+/AKs (lectura sólida)',
    'Stack corto crítico (<10bb) y otro jugador a punto de bustear',
  ];
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground />
          <ChromeFrame scene={9} label="Conclusión" />

          <div style={{ position: 'absolute', left: 96, top: 180, width: 1300 }}>
            <Reveal from={0} to={0.08}><Eyebrow text="Capítulo 08 · Respuesta definitiva" /></Reveal>
            <div style={{ height: 24 }} />
            <Reveal from={0.04} to={0.16}>
              <SerifTitle size={80}>
                Depende del rango de tu rival,<br/>
                <span style={{ fontStyle: 'italic', color: APG.gold }}>no de la palabra "burbuja".</span>
              </SerifTitle>
            </Reveal>
          </div>

          <div style={{
            position: 'absolute', left: 96, right: 96, top: 480,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36,
          }}>
            <Reveal from={0.20} to={0.34} dy={20}>
              <DecisionCard
                title="CALL"
                color={APG.green}
                items={calls}
              />
            </Reveal>
            <Reveal from={0.32} to={0.46} dy={20}>
              <DecisionCard
                title="FOLD"
                color={APG.red}
                items={folds}
              />
            </Reveal>
          </div>

          <Reveal from={0.66} to={0.82}>
            <div style={{
              position: 'absolute', left: 96, right: 96, bottom: 90,
              padding: '28px 36px',
              border: `1px solid ${APG.border}`,
              background: 'rgba(228,200,120,0.06)',
              borderRadius: 6,
              textAlign: 'center',
            }}>
              <div style={{
                fontFamily: APG.mono, fontSize: 11,
                letterSpacing: '0.22em', color: APG.gold,
                textTransform: 'uppercase', marginBottom: 12,
              }}>Principio general</div>
              <div style={{
                fontFamily: APG.serif, fontSize: 32, fontStyle: 'italic',
                lineHeight: 1.35, color: APG.ink, maxWidth: 1100, margin: '0 auto',
              }}>
                Usa la calculadora ICM, conoce el rango de tu oponente, y toma decisiones basadas en <span style={{ color: APG.gold }}>equity real</span> — no en miedo.
              </div>
            </div>
          </Reveal>
        </div>
      )}
    </Sprite>
  );
}

function DecisionCard({ title, color, items }) {
  return (
    <div style={{
      border: `1px solid ${APG.borderSoft}`,
      borderTop: `3px solid ${color}`,
      background: 'rgba(17,36,26,0.55)',
      padding: '32px 36px 36px',
      borderRadius: '0 0 4px 4px',
      minHeight: 240,
    }}>
      <div style={{
        fontFamily: APG.serif, fontSize: 72, lineHeight: 1,
        color, fontStyle: 'italic',
        letterSpacing: '-0.02em',
      }}>{title}</div>
      <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'flex', gap: 14, alignItems: 'flex-start',
            fontSize: 17, lineHeight: 1.5, color: APG.ink,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999, background: color,
              marginTop: 11, flexShrink: 0,
            }}/>
            <span>{it}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.Scene09_Final = Scene09_Final;