// === Escena 05 — Repartir (clímax): sin derechos por clave, la sincronización vacía los generales y
// la tienda recibe errores sin haber hecho nada. Con derechos por clave (1/s, hasta 30), la
// sincronización agota solo los suyos, los generales aguantan y la tienda sigue entrando.
// Dos simulaciones: A (solo los generales) hasta «Por eso cada clave», B (clave + generales) desde ahí.
const SYNC_Y = 470, TIENDA_Y = 820, PUERTA_EMP = [1344, 690], FIN_RUTA = [1630, 690];
const RUTAS_A = { sync:[[380, SYNC_Y], PUERTA_EMP, FIN_RUTA], tienda:[[380, TIENDA_Y], PUERTA_EMP, FIN_RUTA] };
const RUTAS_B = { sync:[[380, SYNC_Y], [700, SYNC_Y], PUERTA_EMP, FIN_RUTA], tienda:[[380, TIENDA_Y], [700, TIENDA_Y], PUERTA_EMP, FIN_RUTA] };
const CADENAS_A = { sync:['empresa'], tienda:['empresa'] };
const CADENAS_B = { sync:['claveSync', 'empresa'], tienda:['claveTienda', 'empresa'] };
const COLORES_DE05 = { sync:NARANJA, tienda:VERDE };

function EscenaDE05({ t }){
  useVoz(4);
  const G = GUION[4];
  const T = {
    comparten:B(G,'Todas tus claves'),               // → la cabecera pasa a «comparten los generales»
    dispara:B(G,'Si una sincronización se dispara'), // → la sincronización salta a 4 por segundo
    agota:B(G,'los agota'),                          // → los generales llegan a 0
    tienda:B(G,'Y la tienda online'),                // → la tienda empieza a recibir 429; rótulo rojo
    propios:B(G,'Por eso cada clave'),               // → aparecen las reservas de cada clave
    configuras:B(G,'y los configuras'),              // → «a tu medida» junto al ritmo de cada clave
    ahora:B(G,'Ahora la sincronización'),            // → la sincronización vuelve a 4 por segundo
    suyos:B(G,'solo agota los suyos'),               // → su clave llega a 0
    vende:B(G,'Y la tienda sigue vendiendo'),        // → marco verde en la tienda y rótulo
  };

  // A: las dos a 1/s; la sincronización salta a 4/s y vacía 60 (−3/s). La reserva se pinta con el
  // retraso del viaje hasta la puerta (~1,2 s): se descuenta para que llegue a 0 al acabar «agota».
  const sDispara = T.dispara, vacia = T.agota + 0.65 - llegada(RUTAS_A.sync, 1), sAFin = sDispara + 20 + (T.propios - vacia);
  const relA = React.useMemo(() => reloj([[0, 0], [T.dispara, sDispara], [vacia, sDispara + 20], [T.propios, sAFin]]), []);
  const simA = React.useMemo(() => simular({ reservas:{ empresa:{ gana:2, max:60, nivel:60 } },
    apps:[{ id:'sync', pide:(s) => s < sDispara ? 1 : 4, cadena:CADENAS_A.sync }, { id:'tienda', pide:() => 1, cadena:CADENAS_A.tienda }], fin:sAFin }), []);

  // B: la sincronización parada mientras se explica; los generales se rellenan (+1/s neto) hasta 60.
  // Al volver a 4/s su clave baja 3 cada segundo y se vacía en 10 s, cuando la voz dice «agota solo los suyos».
  const sBFin = 70 + 40;
  const relB = React.useMemo(() => reloj([[T.propios, 0], [T.ahora, 60], [T.suyos + 0.4, 70], [T.suyos + 40.4, sBFin]]), []);
  const simB = React.useMemo(() => simular({
    reservas:{ empresa:{ gana:2, max:60, nivel:simA.nivelEn('empresa', sAFin) }, claveSync:{ gana:1, max:30, nivel:30 }, claveTienda:{ gana:1, max:30, nivel:30 } },
    apps:[{ id:'sync', pide:(s) => s < 60 ? 0 : 4, cadena:CADENAS_B.sync }, { id:'tienda', pide:(s) => s < 1 ? 0 : 1, cadena:CADENAS_B.tienda }], fin:sBFin }), []);

  const enB = t >= T.propios;
  const viajeEmp = llegada(enB ? RUTAS_B.sync : RUTAS_A.sync, enB ? 2 : 1), viajeClave = llegada(RUTAS_B.sync, 1);
  const nivelEmp = enB ? simB.nivelEn('empresa', relB.simAt(t - viajeEmp)) : simA.nivelEn('empresa', relA.simAt(t - viajeEmp));
  const tReloj = t - (enB ? viajeClave : viajeEmp);   // el reloj va con la reserva que se ve vaciarse
  const s = enB ? relB.simAt(tReloj) : relA.simAt(tReloj), rapido = enB ? relB.velocidad(tReloj) : relA.velocidad(tReloj);
  const claves = aparece(t, T.propios, 0.8), lineasA = 1 - aparece(t, T.propios, 0.5), medida = aparece(t, T.configuras, 0.5);

  const pideSync = t < T.dispara ? '1 por segundo' : (enB && relB.simAt(t) < 60 ? 'parada' : '4 por segundo');
  const rechazos = (app) => enB ? contar(t, simB, relB, RUTAS_B, CADENAS_B, app, true) : contar(t, simA, relA, RUTAS_A, CADENAS_A, app, true);
  const vende = aparece(t, T.vende, 0.5);
  const nota = medida > 0 && <span style={{ color:TINTA, opacity:medida }}> · a tu medida</span>;

  return (
    <SlideCanvas variant="light">
      <Cabecera t={t} eyebrow="3 · REPARTIR" title={t < T.comparten ? 'La otra mitad del problema' : (t < T.propios ? 'Todas tus claves comparten los generales' : 'Cada clave, sus propios derechos')}/>

      <div style={{ position:'absolute', inset:0, opacity:lineasA }}><Linea puntos={RUTAS_A.sync}/><Linea puntos={RUTAS_A.tienda}/></div>
      <div style={{ position:'absolute', inset:0, opacity:claves }}>
        <Linea puntos={RUTAS_B.sync}/><Linea puntos={RUTAS_B.tienda}/>
        <Reserva x={470} y={300} cols={10} filas={3} sep={46} r={15} titulo="Clave sincronización" gana={1} nota={nota}
          nivel={simB.nivelEn('claveSync', relB.simAt(t - viajeClave))}/>
        <Reserva x={470} y={650} cols={10} filas={3} sep={46} r={15} titulo="Clave tienda" gana={1} nota={nota}
          nivel={simB.nivelEn('claveTienda', relB.simAt(t - viajeClave))}/>
      </div>
      <svg style={{ position:'absolute', inset:0 }} width="1920" height="1080"><path d={`M1344 574 L1344 ${PUERTA_EMP[1] - 18}`} stroke={AZUL} strokeOpacity="0.35" strokeWidth="3" strokeDasharray="2 10" strokeLinecap="round"/></svg>
      <Reserva x={1080} y={340} cols={12} filas={5} sep={44} r={16} nivel={nivelEmp} titulo="Derechos generales" gana={2}
        resalte={aparece(t, T.agota, 0.3) * (1 - aparece(t, T.agota + 1, 0.4))}/>

      <NodoApp x={230} y={SYNC_Y} nombre="Sincronización" color={NARANJA} pide={pideSync} rechazos={rechazos('sync')}/>
      <NodoApp x={230} y={TIENDA_Y} nombre="Tienda online" color={VERDE} pide="1 por segundo" rechazos={rechazos('tienda')}/>
      {vende > 0 && <div style={{ position:'absolute', left:230 - 162, top:TIENDA_Y - 62, width:324, height:124, borderRadius:22, border:`3px solid ${VERDE}`, opacity:vende }}/>}
      <NodoDinaup x={1720} y={690}/>
      <RelojEjemplo x={1290} y={790} s={s} rapido={rapido} opacidad={1 - aparece(t, T.propios - 0.4, 0.4) + aparece(t, T.ahora - 0.4, 0.4)}/>

      {t < T.propios + 2 && <Peticiones t={t} sim={simA} rel={relA} rutas={RUTAS_A} colores={COLORES_DE05} cadenas={CADENAS_A}/>}
      {enB && <Peticiones t={t} sim={simB} rel={relB} rutas={RUTAS_B} colores={COLORES_DE05} cadenas={CADENAS_B}/>}

      <Rotulo t={t} desde={T.tienda + 0.3} hasta={T.propios} top={960}>Una aplicación deja sin servicio <span style={{ color:ROJO }}>a las demás.</span></Rotulo>
      <Rotulo t={t} desde={T.vende} top={960}>Cada clave gasta <span style={{ color:AZUL }}>solo sus derechos.</span></Rotulo>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaDE05 });