// === escena-02 — Quién y qué ===
function EscenaCU02({ t }){

  const T = {
    quien:    0.12,   // "La primera línea es quién"
    proveedor:5.31,   // "Si es una compra, el proveedor"
    entidad:  9.03,   // "vive en la ficha de la entidad"
    campo1:  10.55,   // "subcuenta de cliente"
    dos:     15.72,   // "dos campos distintos"
    que:     22.54,   // "La segunda línea es qué"
    categoria:26.86,  // "lo decide la categoría"
    ingresos:31.70,   // "cuenta de ingresos"
    gastos:  33.58,   // "su cuenta de gastos"
    salida:  38.24,   // "Ahora los impuestos"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const Ficha = ({ x, titulo, sub, campos, beat, resalte }) => {
    const p = ap(beat, 0.6);
    return (
      <div style={{position:'absolute', left:x, top:270, width:760,
                   opacity:p, transform:`translateY(${(1-p)*20}px)`}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 18px 46px rgba(15,23,42,0.08)', padding:'26px 30px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>{titulo}</div>
          <div className="f-plex" style={{fontSize:32, fontWeight:600, color:'#0F172A', marginTop:6}}>{sub}</div>
          <div style={{marginTop:18}}>
            {campos.map((c,i)=>{
              const activo = resalte != null && t >= resalte + i*0 && c.beat != null && t >= c.beat && t < c.beat + 2.2;
              const q = ap(c.beat != null ? c.beat : beat + 0.3 + i*0.15, 0.4);
              return (
                <div key={c.l} style={{
                  display:'grid', gridTemplateColumns:'1fr 300px', gap:14, alignItems:'center',
                  padding:'14px 14px', marginTop:8, borderRadius:10,
                  background: activo ? 'rgba(0,133,255,0.08)':'#F8FAFC',
                  border:`1px solid ${activo ? 'rgba(0,133,255,0.45)':'#EEF2F7'}`,
                  opacity:q,
                }}>
                  <span style={{fontSize:21, color:'#64748B'}}>{c.l}</span>
                  <span className="f-mono" style={{fontSize:21, color:'#0F172A', textAlign:'right'}}>{c.v}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  };

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="LAS DOS PRIMERAS LÍNEAS" title="Quién, y qué" />

      {/* QUIÉN — la ficha de la entidad */}
      <Ficha x={130} beat={T.entidad} titulo="FICHA DE LA ENTIDAD" sub="Talleres Marbán, S.L."
        campos={[
          { l:'Subcuenta de cliente',    v:'430000012', beat:T.campo1 },
          { l:'Subcuenta de proveedor',  v:'400000031', beat:T.dos },
        ]}/>

      {/* La razón de que sean dos campos */}
      <div style={{
        position:'absolute', left:130, top:660, width:760,
        fontSize:22, color:'#64748B', opacity: ap(T.dos + 1.2, 0.6),
      }}>Dos campos distintos a propósito: una misma empresa puede ser las dos cosas.</div>

      {/* QUÉ — la categoría de la línea */}
      <Ficha x={1030} beat={T.categoria} titulo="CATEGORÍA DE LA LÍNEA" sub="Reparación de vehículos"
        campos={[
          { l:'Cuenta de ingresos (venta)', v:'700000001', beat:T.ingresos },
          { l:'Cuenta de gastos (compra)',  v:'600000004', beat:T.gastos },
        ]}/>

      <div style={{
        position:'absolute', left:1030, top:660, width:760,
        fontSize:22, color:'#64748B', opacity: ap(T.gastos + 1.0, 0.6),
      }}>No lo decide el cliente: lo decide la categoría de cada línea de la factura.</div>

      {/* El asiento de fondo, con la línea de la que se habla resaltada */}
      <div style={{position:'absolute', left:'50%', top:740, transform:'translateX(-50%)', width:1000,
                   opacity: 0.9}}>
        {[
          { c:'430000012', n:'Clientes',           on:t>=T.quien && t<T.que },
          { c:'700000001', n:'Ventas',             on:t>=T.que },
        ].map((r,i)=>(
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'220px 1fr', gap:16,
            padding:'14px 20px', marginTop:10, borderRadius:12,
            background: r.on ? 'rgba(0,133,255,0.10)':'#fff',
            border:`1px solid ${r.on ? 'rgba(0,133,255,0.45)':'#E2E8F0'}`,
            opacity: ap(T.quien, 0.6),
          }}>
            <span className="f-mono" style={{fontSize:22, color:'#0F172A'}}>{r.c}</span>
            <span style={{fontSize:22, color:'#0F172A'}}>{r.n}</span>
          </div>
        ))}
      </div>

      <div style={{
        position:'absolute', left:0, right:0, top:960, textAlign:'center',
        fontSize:26, color:'#64748B', opacity: ap(T.salida, 0.6),
      }}>Ahora los impuestos</div>

    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCU02 });