// === Escena 04 — «Automático», tarjeta y a dónde va el dinero ===
// «Automático» cobra en efectivo el importe exacto y guarda (CobroRapidoDialog.FinalizarAsync).
// «Tarjeta»: «Procesa el pago en el datáfono.» con el total (CobrarU). Al guardar, el efectivo se apunta
// en la caja y la tarjeta en la cuenta bancaria de tarjeta de esa caja (EventosModule: Caja.ID frente a
// Caja.CuentaBancariaPagoConTarjetaID). Por eso el cierre trae las cuentas hechas.
function EscenaTPV04({ t }){
  const G = window.GUION[3];
  const T = {
    justo:      B(G, "¿Y si te pagan justo?"),        // "¿Y si te pagan justo?"
    auto:       B(G, "Automático cobra"),             // "Automático cobra en efectivo el importe exacto"
    guarda:     B(G, "y guarda la venta"),            // "y guarda la venta"
    conTarjeta: B(G, "¿Y con tarjeta?"),              // "¿Y con tarjeta?"
    pulsas:     B(G, "Pulsas tarjeta"),               // "Pulsas tarjeta"
    datafono:   B(G, "cobras el total"),              // "cobras el total en el datáfono"
    finalizas:  B(G, "y finalizas"),                  // "y finalizas"
    clave:      B(G, "Aquí está la clave"),           // "Aquí está la clave del cierre"
    efectivo:   B(G, "Lo que cobras en efectivo"),    // "Lo que cobras en efectivo se apunta en tu caja"
    tarjeta:    B(G, "Lo de tarjeta"),                // "Lo de tarjeta va a la cuenta del banco"
    noPasa:     B(G, "no pasa por el cajón"),         // "y no pasa por el cajón"
    sumar:      B(G, "no tienes que sumar"),          // "no tienes que sumar tickets"
    veamos:     B(G, "Veamos cómo"),                  // "Veamos cómo se cierra la caja"
  };
  const metro = PRODUCTOS[4];
  const clicAuto = T.auto + 0.8, clicTarj = T.pulsas + 0.4, clicFin = T.finalizas + 0.3;

  // ── Parte A: el cobro ──
  const venta2 = t >= T.conTarjeta;                    // segunda venta: misma pantalla, se cobra con tarjeta
  const vista = (!venta2 && t >= T.guarda) ? 'ticket' : 'cobro';
  const metodo = (venta2 && t >= clicTarj) ? 'tarjeta' : 'efectivo';
  const cambio = venta2 ? ent(t, T.conTarjeta - 0.3, 0.3) : 1;   // parpadeo suave entre venta y venta
  const dlgP = ent(t, 0, 0.6) * sal(t, T.clave - 0.6, 0.6) * (0.25 + 0.75 * cambio);
  const winP = sal(t, T.clave - 0.4, 0.8);
  const r = {
    automatico: foco(t, T.auto, T.guarda),
    tarjeta:    foco(t, T.pulsas, T.datafono),
    finalizar:  foco(t, T.finalizas, T.clave),
  };

  // ── Parte B: a dónde va el dinero ──
  const dP = ent(t, T.clave, 0.9);
  const a1 = Easing.easeInOutCubic(clamp((t - T.efectivo) / 1.2, 0, 1));
  const a2 = Easing.easeInOutCubic(clamp((t - T.tarjeta) / 1.2, 0, 1));
  const caja = ent(t, T.efectivo + 0.9), banco = ent(t, T.tarjeta + 0.9);
  const noP = ent(t, T.noPasa), sumP = ent(t, T.sumar);
  const cajaFoco = foco(t, T.veamos, 99);

  const Nodo = ({ x, y, ico, color, titulo, sub, p, a = 0 }) => (
    <div style={{ position:'absolute', left:x, top:y, width:360, height:120, background:'#fff', borderRadius:14, border:`1px solid ${C.borde}`,
      boxShadow: a > 0 ? `${anillo(a, color)}, 0 10px 26px rgba(15,23,42,0.07)` : '0 10px 26px rgba(15,23,42,0.07)',
      display:'flex', alignItems:'center', gap:18, padding:'0 26px', boxSizing:'border-box', opacity:p, transform:`translateY(${(1 - p) * 12}px)`, fontFamily:ROBOTO }}>
      <div style={{ width:62, height:62, borderRadius:12, background:`${color}18`, display:'flex', alignItems:'center', justifyContent:'center' }}><Ico n={ico} s={36} c={color}/></div>
      <div><div style={{ fontSize:24, fontWeight:700, color:C.tinta }}>{titulo}</div>{sub && <div style={{ fontSize:16, color:C.gris, marginTop:3 }}>{sub}</div>}</div>
    </div>
  );
  const Flecha = ({ y, p, color }) => (
    <svg style={{ position:'absolute', left:770, top:y - 20, overflow:'visible' }} width="380" height="40">
      <line x1="0" y1="20" x2="360" y2="20" stroke={color} strokeWidth="4" strokeLinecap="round" strokeDasharray="360" strokeDashoffset={360 * (1 - p)}/>
      {p > 0.95 && <path d="M348 9 L364 20 L348 31" fill="none" stroke={color} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>}
    </svg>
  );

  return (
    <Fondo>
      <div style={{ opacity:winP }}><Rotulo t={t} s={0} paso="PASO 3 · COBRAR" titulo={venta2 ? 'Con tarjeta' : 'Si te pagan justo'}/></div>
      {winP > 0 && (
        <Ventana url="play.dinaup.com/App/TPV/POS" style={{ opacity:winP }}>
          <PantallaVenta t={t} lineas={[{ prod:metro, p:1 }]} totales={{ sub:base(metro.precio), iva:metro.precio - base(metro.precio), total:metro.precio }}/>
          <Mascara op={dlgP}/>
          {dlgP > 0 && (
            <DialogoCobro p={dlgP} total={metro.precio} metodo={metodo} r={r} vista={vista}
              ticket={<TicketPapel lineas={[[metro.nombre, '8,90']]} total="8,90 €" entregado="8,90 €"/>}/>
          )}
          <Cursor t={t} op={sal(t, T.clave - 0.6)}
            kf={[[T.auto - 0.8, 900, 560], [clicAuto - 0.1, 690, 661], [T.pulsas - 0.6, 690, 661], [clicTarj - 0.1, 812, 192], [T.finalizas - 0.5, 812, 192], [clicFin - 0.1, 862, 661]]}
            clics={[clicAuto, clicTarj, clicFin]}/>
        </Ventana>
      )}
      {dP > 0 && (
        <div style={{ position:'absolute', inset:0, opacity:dP }}>
          <Rotulo t={t} s={T.clave} paso="PASO 4 · A DÓNDE VA EL DINERO" titulo="La clave del cierre"/>
          <Nodo x={400}  y={330} ico="payments"        color={C.verde} titulo="Efectivo" sub="Cobros en el mostrador" p={ent(t, T.efectivo - 0.2)}/>
          <Nodo x={400}  y={560} ico="credit_card"     color={C.azul}  titulo="Tarjeta"  sub="Cobros en el datáfono" p={ent(t, T.tarjeta - 0.2)}/>
          <Flecha y={390} p={a1} color={C.verde}/>
          <Flecha y={620} p={a2} color={C.azul}/>
          <Nodo x={1160} y={330} ico="point_of_sale"   color={C.verde} titulo="Caja «Mostrador»" sub="El cajón que cuadras" p={caja} a={cajaFoco}/>
          <Nodo x={1160} y={560} ico="account_balance" color={C.azul}  titulo="Cuenta del banco" sub="La de tarjeta de esa caja" p={banco}/>
          <div className="f-plex" style={{ position:'absolute', left:770, top:650, width:360, textAlign:'center', fontSize:19, color:C.gris, opacity:noP }}>no pasa por el cajón</div>
          <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:790, display:'flex', justifyContent:'center', opacity:sumP, transform:`translateY(${(1 - sumP) * 12}px)` }}>
            <div style={{ display:'flex', alignItems:'center', gap:12, padding:'14px 26px', borderRadius:40, background:'#fff', border:`1px solid ${C.borde}`, fontSize:26, fontWeight:600, color:C.tinta }}>
              <Ico n="receipt_long" s={30} c={C.gris}/> Al cerrar, no sumas tickets
            </div>
          </div>
        </div>
      )}
    </Fondo>
  );
}
Object.assign(window, { EscenaTPV04 });