// === Escena 02 — Las cifras de arriba ===
// Las cinco DnzKpiCard de PorCobrarSubpage.razor:44-62, en su orden y con su color: «Deuda vencida»
// (roja si hay algo), «Total pendiente», «Vence en 7 días» (naranja), «Clientes», «DSO promedio»
// (verde hasta 30 días, amarilla > 30, roja > 60). La sigla no se dice en la voz: se explica.
function EscenaPC02({ t }){
  const G = GUION[1];
  const T = {
    cinco:B(G,'cinco cifras'),             // "Arriba hay cinco cifras" -> entran las cinco, atenuadas
    vencida:B(G,'Deuda vencida'),          // "Deuda vencida"
    rojo:B(G,'Si hay algo'),               // "Si hay algo, la tarjeta sale en rojo"
    total:B(G,'Total pendiente'),          // "Total pendiente"
    semana:B(G,'Vence en siete'),          // "Vence en siete días"
    clientes:B(G,'Clientes:'),             // "Clientes"
    dso:B(G,'Y la última'),                // "Y la última cuenta días"
    grandes:B(G,'Las grandes'),            // "Las grandes pesan más"
    mes:B(G,'Si pasa de un mes'),          // "Si pasa de un mes, se pone amarilla"
    dos:B(G,'Si pasa de dos'),             // "Si pasa de dos, roja"
    lista:B(G,'Baja a la lista'),          // "Baja a la lista" -> la lista asoma
  };
  const orden = ['vencida', 'total', 'semana', 'clientes', 'dso'];
  const notas = {
    vencida:'Ya tendría que estar cobrado',
    total:'Todo, venza o no',
    semana:'Lo que toca esta semana',
    clientes:'Cuántos te deben algo',
    dso:'Días de espera, de media',
  };
  const ini = orden.map(k => T[k]);
  const activo = (i) => foco(t, ini[i], i < 4 ? ini[i + 1] : T.lista, 0.5);
  const todos = ap(t, T.lista - 0.2, 0.8);              // al final, todas a la vez

  const W = 300, GAP = 30, X0 = 40, Y = 110;
  const escala = ap(t, T.mes, 0.8);
  const bajar = ap(t, T.lista, 1.0);

  return (
    <Fondo>
      <Cabecera t={t} eyebrow="1 · LAS CIFRAS" titulo="Arriba, cinco cifras"/>
      <Ventana>
        <TituloPantalla/>
        {KPIS.map((k, i) => {
          const e = ap(t, T.cinco + i * 0.15, 0.6);
          const a = activo(i);
          const op = e * Math.max(0.4, a, todos);
          return <Kpi key={k.id} k={k} x={X0 + i * (W + GAP)} y={Y} w={W} op={op} dy={(1 - e) * 10} realce={a}/>;
        })}

        {/* La nota de cada cifra, debajo de la que se nombra */}
        {orden.map((id, i) => {
          const a = activo(i) * (1 - todos);
          if (a <= 0) return null;
          return (
            <div key={id} className="f-plex" style={{ position:'absolute', left:X0 + i * (W + GAP) - 20, width:W + 40, top:262, textAlign:'center', fontSize:22, fontWeight:600, color:'#0F172A', opacity:a }}>
              {notas[id]}
            </div>
          );
        })}
        {(() => { const a = foco(t, T.rojo, T.total, 0.5); return a > 0 && (
          <div style={{ position:'absolute', left:X0 - 6, top:Y - 6, width:W + 12, height:140, borderRadius:16, border:`3px solid ${PC.rojo}`, opacity:a }}/>
        ); })()}
        {(() => { const a = foco(t, T.grandes, T.mes, 0.5); return a > 0 && (
          <div className="f-plex" style={{ position:'absolute', left:X0 + 4 * (W + GAP) - 20, width:W + 40, top:300, textAlign:'center', fontSize:20, color:'#64748B', opacity:a }}>
            Las facturas grandes pesan más
          </div>
        ); })()}

        {/* La escala de color del DSO */}
        {escala > 0 && (
          <div style={{ position:'absolute', left:X0 + 4 * (W + GAP) - 40, width:W + 40, top:300, opacity:escala * (1 - todos) }}>
            {[
              { txt:'hasta 30 días', bg:'#5fb34a', c:'#fff', t:T.mes - 0.3 },
              { txt:'más de 30', bg:'#fde74c', c:'#212121', t:T.mes },
              { txt:'más de 60', bg:'#e9564f', c:'#fff', t:T.dos },
            ].map((s, i) => {
              const on = i === 1 ? foco(t, T.mes + 0.6, T.dos, 0.4) : i === 2 ? foco(t, T.dos + 0.3, T.lista, 0.4) : 0;
              return (
                <div key={i} style={{ display:'flex', alignItems:'center', gap:14, height:46, marginTop:i ? 8 : 0, padding:'0 14px', borderRadius:10,
                  background: on > 0 ? `rgba(15,23,42,${0.05 * on})` : 'transparent', opacity:ap(t, s.t, 0.5) }}>
                  <div style={{ width:34, height:22, borderRadius:6, background:s.bg, border:'1px solid rgba(0,0,0,0.06)' }}/>
                  <span style={{ fontSize:19, color:PC.tinta, fontWeight: on > 0.5 ? 700 : 400 }}>{s.txt}</span>
                  {i === 1 && <span style={{ marginLeft:'auto', fontSize:17, color:PC.gris }}>33 días</span>}
                </div>
              );
            })}
          </div>
        )}

        {/* La lista asoma por debajo */}
        <div style={{ position:'absolute', left:0, right:0, top:470 - 50 * bajar, opacity:0.25 + 0.75 * bajar }}>
          <Tramo clave="critical" n={2} total={910} x={40} y={0} w={1620}/>
          <Cliente c={CLI.plaza} x={40} y={62} w={1620}/>
          <Cliente c={CLI.alba} x={40} y={160} w={1620}/>
        </div>
      </Ventana>
    </Fondo>
  );
}
Object.assign(window, { EscenaPC02 });