// Scene 07 — Solución GTO paso a paso
function Scene07_Solver({ start, end }) {
  const steps = [
    {
      n: '01', title: 'Configurar el árbol',
      body: '8 jugadores. Stacks reales. Ciegas 1k/2k ante 200. Estructura de premios cargada. Hero MP2 con A♠K♦.',
      p: 0.10,
    },
    {
      n: '02', title: 'Solución de equilibrio',
      body: 'AKo recibe call al 100% en GTO puro (chip EV). Con ICM activo: 85–95% según stacks de otras mesas.',
      p: 0.28,
      stat: '100%',
      statLabel: 'call · chip EV',
    },
    {
      n: '03', title: 'Frecuencias mixtas',
      body: 'Call 90% / Fold 10% no es indecisión. Es umbral de indiferencia: ambas líneas tienen EV similar.',
      p: 0.46,
      stat: '≈ 0',
      statLabel: 'diferencia EV',
    },
    {
      n: '04', title: 'Ajuste por lectura',
      body: 'Si BTN es nit y solo shovea QQ+/AKs, fold es correcto. Sin información: asumes rango GTO.',
      p: 0.64,
    },
  ];
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground />
          <ChromeFrame scene={7} label="Solver GTO" />

          <div style={{ position: 'absolute', left: 96, top: 180, width: 1100 }}>
            <Reveal from={0} to={0.08}><Eyebrow text="Capítulo 06 · Qué dice el solver" /></Reveal>
            <div style={{ height: 24 }} />
            <Reveal from={0.04} to={0.16}>
              <SerifTitle size={86}>
                Solución <span style={{ fontStyle: 'italic', color: APG.gold }}>GTO</span> en 4 pasos.
              </SerifTitle>
            </Reveal>
          </div>

          <div style={{
            position: 'absolute', left: 96, right: 96, top: 460,
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
          }}>
            {steps.map((s, i) => (
              <Reveal key={i} from={s.p} to={s.p + 0.14} dy={28}>
                <div style={{
                  border: `1px solid ${APG.borderSoft}`,
                  background: 'rgba(17,36,26,0.55)',
                  padding: '28px 26px 32px',
                  borderRadius: 4,
                  minHeight: 380,
                  display: 'flex', flexDirection: 'column',
                  position: 'relative',
                }}>
                  <div style={{
                    fontFamily: APG.serif, fontSize: 64,
                    color: APG.gold, fontStyle: 'italic',
                    lineHeight: 1, opacity: 0.85,
                  }}>{s.n}</div>
                  <div style={{
                    marginTop: 18,
                    fontFamily: APG.serif, fontSize: 32, lineHeight: 1.1,
                    color: APG.ink,
                  }}>{s.title}</div>
                  <div style={{
                    marginTop: 16,
                    fontSize: 14, lineHeight: 1.55,
                    color: APG.inkMute, flex: 1,
                  }}>{s.body}</div>
                  {s.stat && (
                    <div style={{
                      marginTop: 18,
                      paddingTop: 16,
                      borderTop: `1px solid ${APG.borderSoft}`,
                    }}>
                      <div style={{
                        fontFamily: APG.serif, fontSize: 36, color: APG.gold,
                        fontVariantNumeric: 'tabular-nums',
                      }}>{s.stat}</div>
                      <div style={{
                        fontFamily: APG.mono, fontSize: 10,
                        letterSpacing: '0.2em', color: APG.inkDim,
                        textTransform: 'uppercase', marginTop: 4,
                      }}>{s.statLabel}</div>
                    </div>
                  )}
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal from={0.84} to={0.96}>
            <div style={{
              position: 'absolute', left: 96, right: 96, bottom: 80,
              fontFamily: APG.serif, fontStyle: 'italic',
              fontSize: 24, lineHeight: 1.4, color: APG.ink,
              textAlign: 'center', maxWidth: 1200, margin: '0 auto',
            }}>
              GTO no te dice cómo jugar contra un maníaco ni un nit. Te dice <span style={{ color: APG.gold, fontStyle: 'normal' }}>la estrategia que no puede ser explotada</span>.
            </div>
          </Reveal>
        </div>
      )}
    </Sprite>
  );
}

window.Scene07_Solver = Scene07_Solver;