// Scene 06 — El error común
function Scene06_Error({ start, end }) {
  const errors = [
    {
      n: '01',
      title: 'Hero no es stack corto',
      body: 'Con 28bb, fold no garantiza supervivencia. Las ciegas suben y pierdes fold equity gradualmente.',
      p: 0.18,
    },
    {
      n: '02',
      title: 'BTN shovea un rango amplio',
      body: 'Con 18bb desde BTN, GTO incluye AJo, KQo, 66–88, Axs. Manos que A♠K♦ domina.',
      p: 0.30,
    },
    {
      n: '03',
      title: 'ICM no dice siempre fold',
      body: 'Contra un rango estándar de BTN, el call tiene mayor EV de premios que el fold.',
      p: 0.42,
    },
  ];
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground />
          <ChromeFrame scene={6} label="El error común" />

          <div style={{ position: 'absolute', left: 96, top: 180, width: 1200 }}>
            <Reveal from={0} to={0.08}><Eyebrow text="Capítulo 05 · Psicología vs matemática" color={APG.red} /></Reveal>
            <div style={{ height: 24 }} />
            <Reveal from={0.04} to={0.16}>
              <SerifTitle size={84}>
                El fold automático<br/><span style={{ fontStyle: 'italic', color: APG.red }}>no es conservador.</span> Es costoso.
              </SerifTitle>
            </Reveal>
            <div style={{ height: 28 }} />
            <Reveal from={0.10} to={0.22}>
              <div style={{ maxWidth: 760, fontSize: 19, lineHeight: 1.55, color: APG.inkMute }}>
                El error más frecuente no es matemático. Es psicológico. El cerebro
                ve "burbuja" y traduce "sobrevivir a toda costa". Ese instinto ignora tres factores:
              </div>
            </Reveal>
          </div>

          <div style={{
            position: 'absolute', left: 96, right: 96, top: 580,
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24,
          }}>
            {errors.map((e, i) => (
              <Reveal key={i} from={e.p} to={e.p + 0.14} dy={26}>
                <div style={{
                  border: `1px solid ${APG.borderSoft}`,
                  borderLeft: `3px solid ${APG.red}`,
                  background: 'rgba(217,83,79,0.04)',
                  padding: '26px 28px 32px',
                  minHeight: 220,
                  borderRadius: '0 4px 4px 0',
                }}>
                  <div style={{
                    fontFamily: APG.mono, fontSize: 11, color: APG.red,
                    letterSpacing: '0.22em',
                  }}>FACTOR {e.n}</div>
                  <div style={{
                    marginTop: 14,
                    fontFamily: APG.serif, fontSize: 32,
                    color: APG.ink, lineHeight: 1.15,
                  }}>{e.title}</div>
                  <div style={{
                    marginTop: 14,
                    fontSize: 15, lineHeight: 1.55,
                    color: APG.inkMute,
                  }}>{e.body}</div>
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal from={0.78} to={0.92}>
            <div style={{
              position: 'absolute', left: 96, right: 96, bottom: 88,
              fontFamily: APG.serif, fontStyle: 'italic',
              fontSize: 26, lineHeight: 1.4, color: APG.ink,
              textAlign: 'center',
            }}>
              Fold no es gratis. Cuesta <span style={{ color: APG.gold }}>fold equity</span>, oportunidad de doble up,
              y la presión de quedarte con 10bb tras pagar ciegas.
            </div>
          </Reveal>
        </div>
      )}
    </Sprite>
  );
}

window.Scene06_Error = Scene06_Error;