// === Escena 04 — Agotar: a 4 por segundo la reserva baja 2 cada segundo, llega a 0 y desde ahí
// entra lo que se gana (2/s) y el resto recibe 429 con su espera. La aplicación resulta ser el
// bucle del reto: como mucho, gasta lo que gana. Bajar 60 a 2/s son 30 s: van acelerados para que
// el cero caiga cuando la voz lo dice. Sin derechos va a velocidad real, para que se cuenten las
// 2 que entran y las 2 que no.
function EscenaDE04({ t }){
  useVoz(3);
  const G = GUION[3];
  const T = {
    pides:B(G,'Si una aplicación pide'),   // → la aplicación pide 4 por segundo; empieza a bajar
    baja:B(G,'la reserva baja'),           // → las cuentas: gana 2, pide 4
    cero:B(G,'cero, solo entra'),          // → la reserva llega a 0; entran 2, esperan 2
    error:B(G,'un error de espera'),       // → la respuesta 429
    segundos:B(G,'cuántos segundos'),      // → se marca la espera: 1 s
    bucle:B(G,'aquel bucle'),              // → la aplicación lleva la marca del bucle
    mucho:B(G,'como mucho'),               // → se marcan «gana 2» y «entran 2»; rótulo
  };
  const viaje = llegada(RUTA_UNA, 1), cero = T.cero + 0.3 - viaje;   // el 0 se ve en la puerta al decir «cero»
  const fin = durDe(G) + 1;
  const rel = React.useMemo(() => reloj([[T.pides, 0], [cero, 30], [fin, 30 + fin - cero]]), []);
  const sim = React.useMemo(() => simular({ reservas:{ empresa:{ gana:2, max:60, nivel:60 } },
    apps:[{ id:'app', pide:() => 4, cadena:['empresa'] }], fin:31 + fin - cero }), []);
  const s = rel.simAt(t - viaje), sinDerechos = t > cero + viaje;
  const espera = aparece(t, T.error, 0.5), marca = aparece(t, T.segundos, 0.5), mucho = aparece(t, T.mucho, 0.5);
  const fila = (k) => ({ display:'flex', justifyContent:'space-between', gap:40, padding:'2px 12px', margin:'0 -12px', borderRadius:10, background:`rgba(16,185,129,${0.12 * k})` });

  return (
    <SlideCanvas variant="light">
      <Cabecera t={t} eyebrow="2 · AGOTAR" title="Si pides más de lo que ganas, la reserva baja"/>
      <EscenaUnaApp t={t} sim={sim} rel={rel} pide={t < T.pides ? 'en espera' : '4 por segundo'} bucle={aparece(t, T.bucle, 0.5)}/>
      <RelojEjemplo x={1310} y={300} s={s} rapido={rel.velocidad(t - viaje)} opacidad={aparece(t, T.pides)}/>
      <div className="f-mono" style={{ position:'absolute', left:1310, top:360, width:250, fontSize:22, lineHeight:1.9, color:GRIS, opacity:aparece(t, T.baja) }}>
        <div style={fila(mucho)}><span>gana</span><b style={{ color:AZUL }}>2 /s</b></div>
        <div style={fila(0)}><span>pide</span><b style={{ color:TINTA }}>4 /s</b></div>
        <div style={{ borderTop:`1px solid ${BORDE}`, marginTop:4, paddingTop:4 }}>
          {!sinDerechos && <div style={fila(0)}><span>reserva</span><b style={{ color:ROJO }}>−2 /s</b></div>}
          {sinDerechos && <div style={fila(mucho)}><span>entran</span><b style={{ color:VERDE }}>2 /s</b></div>}
          {sinDerechos && <div style={fila(0)}><span>esperan</span><b style={{ color:ROJO }}>2 /s</b></div>}
        </div>
      </div>
      {espera > 0 && (
        <div style={{ position:'absolute', left:1310, top:560, padding:'16px 22px', borderRadius:14, background:'#fff', border:`1px solid ${ROJO}44`, boxShadow:'0 14px 34px rgba(239,68,68,0.12)', opacity:espera }}>
          <div className="f-mono" style={{ fontSize:20, fontWeight:700, color:ROJO }}>429 · Too Many Requests</div>
          <div style={{ display:'flex', alignItems:'center', gap:14, marginTop:8 }}>
            <span className="f-mono" style={{ fontSize:19, color:GRIS }}>Retry-After: 1</span>
            {marca > 0 && <span className="f-plex" style={{ padding:'3px 12px', borderRadius:100, background:'#EFF6FF', color:AZUL, fontSize:18, fontWeight:700, opacity:marca }}>espera 1 s</span>}
          </div>
        </div>
      )}
      <Rotulo t={t} desde={T.mucho} top={950}>Como mucho, <span style={{ color:AZUL }}>gasta lo que gana.</span></Rotulo>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaDE04 });