// === Escena 03 — La lista por tramos ===
// GetAgingGroups (PorCobrarSubpage.razor:323-340): «Vencido +60 días», «Vencido 30-59 días»,
// «Vencido 1-29 días», «Al día», cada uno con «N clientes» y su total. Orden: días de la factura
// más vencida y luego importe (:252). Después, una tarjeta abierta (PorCobrarItemU.razor) con su
// tabla: Fecha · Número · Vencimiento · Estado · Cobrado · Pendiente; la fila abre la venta.
function EscenaPC03({ t }){
  const G = GUION[2];
  const T = {
    tramos:B(G,'por tramos'),               // "agrupa a los clientes por tramos" -> los cuatro rótulos, tenues
    critico:B(G,'Primero,'),                // "Primero, ... más de sesenta días"
    medio:B(G,'Después,'),                  // "Después, de treinta a cincuenta y nueve"
    reciente:B(G,'Luego,'),                 // "Luego, de uno a veintinueve" -> la lista baja
    aldia:B(G,'Y al final'),                // "Y al final, los que van al día"
    orden:B(G,'Dentro de cada'),            // "Dentro de cada tramo" -> la lista vuelve arriba
    primero:B(G,'sale primero'),            // "sale primero" -> 75d antes que 62d
    cliente:B(G,'En cada cliente'),         // "En cada cliente" -> se abre Bar La Plaza
    total:B(G,'su total'),                  // "su total pendiente"
    facturas:B(G,'sus facturas'),           // "sus facturas"
    fecha:B(G,'la fecha'),                  // "la fecha"
    venc:B(G,'el vencimiento'),             // "el vencimiento"
    dias:B(G,'los días que'),               // "los días que lleva vencida"
    cobrado:B(G,'cuánto has'),              // "cuánto has cobrado ya"
    pulsas:B(G,'Si pulsas'),                // "Si pulsas una"
    venta:B(G,'se abre la venta'),          // "se abre la venta"
    muchos:B(G,'muchos clientes'),          // "¿Y si tienes muchos clientes?"
  };

  // Posiciones de la lista completa (tramo 48 + 12, tarjeta 88 + 10, 18 entre tramos)
  const W = 1620, X = 40;
  const L = [
    { tipo:'tramo', clave:'critical', n:2, total:910,  y:24,  t:T.critico },
    { tipo:'cli', id:'plaza',   y:84,  t:T.critico + 0.5 },
    { tipo:'cli', id:'alba',    y:182, t:T.critico + 0.7 },
    { tipo:'tramo', clave:'warning', n:2, total:1330,  y:298, t:T.medio },
    { tipo:'cli', id:'clinica', y:358, t:T.medio + 0.5 },
    { tipo:'cli', id:'cafe',    y:456, t:T.medio + 0.7 },
    { tipo:'tramo', clave:'recent', n:2, total:1430,   y:572, t:T.reciente },
    { tipo:'cli', id:'ribera',  y:632, t:T.reciente + 0.5 },
    { tipo:'cli', id:'sol',     y:730, t:T.reciente + 0.7 },
    { tipo:'tramo', clave:'ok', n:2, total:2250,       y:846, t:T.aldia },
    { tipo:'cli', id:'miramar', y:906, t:T.aldia + 0.5 },
    { tipo:'cli', id:'martin',  y:1004, t:T.aldia + 0.7 },
  ];
  // Desplazamiento: baja al nombrar los últimos tramos y vuelve arriba al hablar del orden
  const scroll = 230 * Easing.easeInOutCubic(clamp((t - T.reciente) / 1.2, 0, 1))
               + 120 * Easing.easeInOutCubic(clamp((t - T.aldia) / 1.0, 0, 1))
               - 350 * Easing.easeInOutCubic(clamp((t - T.orden) / 1.2, 0, 1));

  const abre = ap(t, T.cliente, 1.0);                 // fase 2: solo Bar La Plaza, con su tabla
  const resto = 1 - abre;
  const ordenFoco = foco(t, T.primero - 0.3, T.cliente, 0.5);

  const colsFoco = {
    fecha:   foco(t, T.fecha, T.venc, 0.4),
    venc:    foco(t, T.venc, T.dias, 0.4),
    estado:  foco(t, T.dias, T.cobrado, 0.4),
    cobrado: foco(t, T.cobrado, T.pulsas, 0.4),
  };
  const alturaTabla = 56 + 2 * 62;
  const crece = ap(t, T.facturas - 0.4, 0.9);
  const clic = T.venta - 0.2;

  return (
    <Fondo>
      <Cabecera t={t} eyebrow="2 · LA LISTA" titulo="Por tramos, lo más viejo primero"/>
      <Ventana>
        <div style={{ position:'absolute', left:0, right:0, top:-scroll, opacity:resto }}>
          {L.map((it, i) => {
            const tenue = ap(t, T.tramos, 0.6) * 0.3;
            const e = ap(t, it.t, 0.7);
            const op = it.tipo === 'tramo' ? Math.max(tenue, e) : e;
            // Al hablar del orden, el tramo crítico manda y el resto se atenúa
            const dim = it.y > 250 ? 1 - 0.5 * ordenFoco : 1;
            if (it.tipo === 'tramo') return <Tramo key={i} clave={it.clave} n={it.n} total={it.total} x={X} y={it.y} w={W} op={op * dim}/>;
            return <Cliente key={i} c={CLI[it.id]} x={X} y={it.y} w={W} op={op * dim} dx={(1 - e) * 12}/>;
          })}
          {ordenFoco > 0 && (
            <div style={{ position:'absolute', left:X - 26, top:84, width:6, height:186, borderRadius:3, background:PC.rojo, opacity:ordenFoco }}/>
          )}
          {ordenFoco > 0 && (
            <div className="f-plex" style={{ position:'absolute', left:X + 430, top:110, fontSize:20, fontWeight:600, color:PC.rojo, opacity:ordenFoco }}>
              ← 75 días, primero · 62 días, después
            </div>
          )}
        </div>

        {/* Fase 2: Bar La Plaza abierta, con su tabla de facturas */}
        {abre > 0 && (
          <div style={{ position:'absolute', left:0, right:0, top:0, opacity:abre }}>
            <Tramo clave="critical" n={2} total={910} x={X} y={24} w={W}/>
            <Cliente c={CLI.plaza} x={X} y={84 + (1 - abre) * 8} w={W} conTabla={crece > 0} alto={88 + (alturaTabla + 8) * crece}
                     realceTotal={foco(t, T.total, T.facturas, 0.4)} colsFoco={colsFoco} filaFoco={t >= T.pulsas ? 0 : -1}/>
            <Cliente c={CLI.alba} x={X} y={84 + 98 + (alturaTabla + 8) * crece} w={W} op={0.45}/>
            {(() => { const a = ap(t, T.venta, 0.7); return a > 0 && (
              <div style={{ position:'absolute', left:560, top:490, display:'flex', alignItems:'center', gap:14, padding:'16px 24px', borderRadius:12,
                background:'#fff', border:`1px solid ${PC.borde}`, boxShadow:'0 18px 44px rgba(15,23,42,0.12)', opacity:a, transform:`translateY(${(1 - a) * 10}px)` }}>
                <Ico n="open_in_new" s={26} c={PC.azul}/>
                <span style={{ fontSize:21 }}>Se abre la venta <b>F-2026-0712</b></span>
              </div>
            ); })()}
            <Cursor t={t} puntos={[{ t:T.pulsas - 0.3, x:900, y:520 }, { t:T.pulsas + 0.5, x:340, y:267 }]} clicks={[clic]}/>
          </div>
        )}
      </Ventana>
    </Fondo>
  );
}
Object.assign(window, { EscenaPC03 });