// Scene 05 — Dollar EV / ICM
function Scene05_ICM({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => (
        <div style={{ position: 'absolute', inset: 0 }}>
          <FeltBackground />
          <ChromeFrame scene={5} label="Dollar EV · ICM" />

          {/* Title */}
          <div style={{ position: 'absolute', left: 96, top: 180, width: 1100 }}>
            <Reveal from={0} to={0.08}><Eyebrow text="Capítulo 04 · El filtro ICM" /></Reveal>
            <div style={{ height: 24 }} />
            <Reveal from={0.04} to={0.16}>
              <SerifTitle size={84}>
                Las fichas en burbuja<br/>no valen <span style={{ fontStyle: 'italic', color: APG.gold }}>linealmente</span>.
              </SerifTitle>
            </Reveal>
            <div style={{ height: 24 }} />
            <Reveal from={0.10} to={0.22}>
              <div style={{ maxWidth: 720, fontSize: 19, lineHeight: 1.55, color: APG.inkMute }}>
                El Independent Chip Model convierte stacks en equity de dinero
                real. Perder todas las fichas es más costoso que ganarlas beneficioso.
              </div>
            </Reveal>
          </div>

          {/* Compare: Chip EV (linear) vs Dollar EV (curved) */}
          <div style={{
            position: 'absolute', left: 96, top: 580, right: 96,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
          }}>
            <Reveal from={0.28} to={0.42} dy={20}>
              <ICMPanel
                title="Chip EV"
                subtitle="Lineal · valor 1:1"
                color={APG.inkMute}
                stackBars={[
                  { label: 'Pierdes 18bb', value: -18, color: APG.red },
                  { label: 'Ganas 22bb', value: +22, color: APG.green },
                ]}
                note="En fichas puras, ganar 22 supera perder 18. Call +EV."
              />
            </Reveal>
            <Reveal from={0.40} to={0.54} dy={20}>
              <ICMPanel
                title="Dollar EV (ICM)"
                subtitle="No lineal · curva de premios"
                color={APG.gold}
                stackBars={[
                  { label: 'Pierdes 18bb', value: -28, color: APG.red, real: '-$$ amplificado' },
                  { label: 'Ganas 22bb', value: +14, color: APG.green, real: '+$$ atenuado' },
                ]}
                note="En dinero, perder cuesta más que ganar. La burbuja amplifica el riesgo."
                highlight
              />
            </Reveal>
          </div>

          {/* Punchline */}
          <Reveal from={0.74} to={0.88}>
            <div style={{
              position: 'absolute', left: 96, right: 96, bottom: 88,
              padding: '24px 32px',
              background: 'rgba(228,200,120,0.08)',
              border: `1px solid ${APG.border}`,
              borderRadius: 6,
              fontFamily: APG.serif, fontSize: 28, fontStyle: 'italic',
              lineHeight: 1.4, color: APG.ink, textAlign: 'center',
            }}>
              La clave: <span style={{ color: APG.gold }}>el rango de BTN importa más que la burbuja</span> en este spot concreto.
            </div>
          </Reveal>
        </div>
      )}
    </Sprite>
  );
}

function ICMPanel({ title, subtitle, color, stackBars, note, highlight }) {
  return (
    <div style={{
      border: `1px solid ${highlight ? APG.border : APG.borderSoft}`,
      background: highlight ? 'rgba(228,200,120,0.05)' : 'rgba(17,36,26,0.5)',
      borderRadius: 6,
      padding: '28px 32px 32px',
      minHeight: 320,
    }}>
      <div style={{
        fontFamily: APG.mono, fontSize: 11,
        letterSpacing: '0.22em', color, textTransform: 'uppercase',
      }}>{subtitle}</div>
      <div style={{
        marginTop: 8,
        fontFamily: APG.serif, fontSize: 52,
        color: APG.ink, fontStyle: 'italic',
      }}>{title}</div>

      <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 18 }}>
        {stackBars.map((b, i) => {
          const w = Math.min(100, Math.abs(b.value) * 2.5);
          return (
            <div key={i}>
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                fontFamily: APG.sans, fontSize: 14, color: APG.inkMute,
                marginBottom: 8,
              }}>
                <span>{b.label}</span>
                <span style={{ color: b.color, fontFamily: APG.mono, fontWeight: 600 }}>
                  {b.real || (b.value > 0 ? '+' : '') + b.value + 'bb'}
                </span>
              </div>
              <div style={{
                height: 8, background: 'rgba(255,255,255,0.05)', borderRadius: 999,
                position: 'relative', overflow: 'hidden',
              }}>
                <div style={{
                  width: w + '%', height: '100%',
                  background: b.color, opacity: 0.85,
                  borderRadius: 999,
                }}/>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{
        marginTop: 24, fontSize: 14, lineHeight: 1.5,
        color: APG.inkMute,
      }}>{note}</div>
    </div>
  );
}

window.Scene05_ICM = Scene05_ICM;