// === Escena 03 — Ganar y gastar: la reserva se llena a 2 por segundo hasta 60 (30 s) y no pasa de
// ahí; una ráfaga de 10 peticiones entra entera, la deja en 50 y empieza a rellenarse. El llenado va
// acelerado con el reloj del ejemplo a la vista; la ráfaga, a velocidad real.
const RUTA_UNA = [[460, 740], [960, 740], [1520, 740]];

// Una aplicación, los derechos generales y Dinaup. La usan esta escena y la siguiente.
function EscenaUnaApp({ t, sim, rel, pide, appOp = 1, resalte = 0, bucle = 0 }){
  const rutas = { app: RUTA_UNA }, cadenas = { app: ['empresa'] }, colores = { app: '#334155' };
  const nivel = sim.nivelEn('empresa', rel.simAt(t - llegada(RUTA_UNA, 1)));
  return (
    <React.Fragment>
      <div style={{ position:'absolute', inset:0, opacity:appOp }}>
        <Linea puntos={RUTA_UNA}/>
        <svg style={{ position:'absolute', inset:0 }} width="1920" height="1080"><path d="M960 568 L960 722" stroke={AZUL} strokeOpacity="0.35" strokeWidth="3" strokeDasharray="2 10" strokeLinecap="round"/></svg>
        <NodoApp x={310} y={740} nombre="Tu aplicación" color="#334155" pide={pide} bucle={bucle} rechazos={contar(t, sim, rel, rutas, cadenas, 'app', true)}/>
        <NodoDinaup x={1610} y={740} atendidas={contar(t, sim, rel, rutas, cadenas, 'app', false)}/>
      </div>
      <Reserva x={660} y={300} cols={12} filas={5} sep={50} r={18} nivel={nivel} titulo="Derechos generales" gana={2} resalte={resalte}/>
      <Peticiones t={t} sim={sim} rel={rel} rutas={rutas} colores={colores} cadenas={cadenas}/>
    </React.Fragment>
  );
}

function EscenaDE03({ t }){
  useVoz(2);
  const G = GUION[2];
  const T = {
    dos:B(G,'Aquí, dos'),                  // → arranca el llenado acelerado y el reloj
    treinta:B(G,'los de treinta segundos'),// → chip «2 × 30 s = 60»
    sesenta:B(G,'sesenta.'),               // → la reserva llega a 60 justo aquí
    rafaga:B(G,'Así, una ráfaga'),         // → aparece tu aplicación y suelta 10 de golpe
    entera:B(G,'entra entera'),            // → la ráfaga llega: 60 → 50
    sin:B(G,'sin esperar'),                // → rótulo
  };
  // La reserva y el reloj se pintan en la puerta, que va llegada(RUTA_UNA, 1) s por detrás del reloj de
  // la escena: se llena antes para que el 60 se vea justo al decir «sesenta».
  const viaje = llegada(RUTA_UNA, 1), lleno = T.sesenta + 0.3 - viaje;
  const sale = T.rafaga + 0.6, sRafaga = 30 + (sale - lleno);
  const rel = React.useMemo(() => reloj([[T.dos, 0], [lleno, 30], [lleno + 100, 130]]), []);
  const sim = React.useMemo(() => simular({ reservas:{ empresa:{ gana:2, max:60, nivel:0 } },
    apps:[{ id:'app', pide:(s) => s >= sRafaga && s < sRafaga + 0.5 ? 20 : 0, cadena:['empresa'] }], fin:130 }), []);
  const s = rel.simAt(t - viaje), chip = aparece(t, T.treinta);
  const llega = sale + viaje;
  const resalte = Math.sin(clamp((t - llega) / 1.2, 0, 1) * Math.PI);

  return (
    <SlideCanvas variant="light">
      <Cabecera t={t} eyebrow="1 · GANAR Y GASTAR" title="Tu empresa gana derechos cada segundo"/>
      <EscenaUnaApp t={t} sim={sim} rel={rel} pide="10 a la vez" appOp={aparece(t, T.rafaga - 0.3)} resalte={resalte}/>
      <RelojEjemplo x={1310} y={330} s={s} rapido={rel.velocidad(t - viaje)} opacidad={aparece(t, T.dos) * (1 - aparece(t, T.rafaga - 0.4, 0.4))}/>
      {t > T.treinta && t < T.rafaga && (
        <div className="f-mono" style={{ position:'absolute', left:1310, top:390, padding:'10px 20px', borderRadius:100, background:'#EFF6FF', border:'1px solid #BFDBFE', color:AZUL, fontSize:22, fontWeight:700,
          opacity:chip * (1 - aparece(t, T.rafaga - 0.4, 0.4)), transform:`scale(${lerp(0.85, 1, Easing.easeOutBack(chip))})`, transformOrigin:'left center' }}>
          2 × 30 s = 60
        </div>
      )}
      <Rotulo t={t} desde={T.sin} top={950}>Una ráfaga corta <span style={{ color:AZUL }}>entra entera.</span></Rotulo>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaDE03, EscenaUnaApp, RUTA_UNA });