// === escena-01 — El asiento y su pregunta (CONTRATO) ===
// Pieza de CLIENTE: la jerga es obligatoria y cada término se enseña en el segundo en que se dice.

function EscenaCU01({ t }){

  const T = {
    asiento:  0.10,   // "Este es un asiento"
    cuatro:   3.36,   // "Cuatro líneas"
    l1:       5.24,   // "El cliente al debe"
    l2:       7.24,   // "La base al haber"
    l3:       9.15,   // "El iva al haber"
    l4:      11.20,   // "si hay retención"
    pregunta:17.14,   // "de dónde ha sacado el programa"
    ficha:   25.76,   // "escrita en una ficha"
    uc:      28.95,   // ÚNICA COSA (promesa)
    salida:  34.74,   // "Vamos ficha por ficha"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const LINEAS = [
    { b:T.l1, cta:'430000012', nom:'Clientes · Talleres Marbán', debe:'1.210,00', haber:'' },
    { b:T.l2, cta:'700000001', nom:'Ventas de mercaderías',      debe:'',         haber:'1.000,00' },
    { b:T.l3, cta:'477000021', nom:'iva repercutido 21 %',       debe:'',         haber:'  210,00' },
    { b:T.l4, cta:'473000015', nom:'Retención (si la hay)',      debe:'',         haber:'', tenue:true },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="DÓNDE VA CADA CUENTA" title="Un asiento de una factura de venta" />

      {/* El asiento, línea a línea */}
      <div style={{position:'absolute', left:'50%', top:260, transform:'translateX(-50%)', width:1280,
                   opacity: ap(T.asiento, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 20px 50px rgba(15,23,42,0.08)', padding:'26px 34px'}}>

          <div style={{display:'grid', gridTemplateColumns:'220px 1fr 190px 190px', gap:18,
                       paddingBottom:12, borderBottom:'2px solid #F1F5F9'}}>
            {['SUBCUENTA','CONCEPTO','DEBE','HABER'].map((h,i)=>(
              <span key={h} className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em',
                     textAlign: i>1 ? 'right':'left'}}>{h}</span>
            ))}
          </div>

          {LINEAS.map((L,i)=>{
            const p = ap(L.b, 0.45, Easing.easeOutBack);
            const activa = t >= L.b && t < L.b + 1.6;
            return (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'220px 1fr 190px 190px', gap:18, alignItems:'center',
                padding:'18px 12px', marginTop:8, borderRadius:10,
                background: activa ? 'rgba(0,133,255,0.07)' : 'transparent',
                opacity: p * (L.tenue ? 0.5 : 1),
                transform:`translateX(${(1-p)*-20}px)`,
              }}>
                <span className="f-mono" style={{fontSize:22, color:'#0F172A'}}>{L.cta}</span>
                <span style={{fontSize:22, color:'#0F172A'}}>{L.nom}</span>
                <span className="f-mono" style={{fontSize:22, textAlign:'right', color:'#0F172A'}}>{L.debe}</span>
                <span className="f-mono" style={{fontSize:22, textAlign:'right', color:'#0F172A'}}>{L.haber}</span>
              </div>
            );
          })}
        </div>

        {/* Los interrogantes: la pregunta que trae aquí a todo el mundo */}
        {t >= T.pregunta - 0.4 && (
          <div style={{display:'flex', justifyContent:'flex-start', gap:0, marginTop:-8,
                       opacity: ap(T.pregunta, 0.6)}}>
            {[0,1,2,3].map(i=>{
              const p = ap(T.pregunta + i*0.18, 0.4, Easing.easeOutBack);
              return (
                <div key={i} style={{
                  width:56, height:56, marginLeft: i===0 ? 60 : 0, marginTop: -320 + i*94,
                  position:'absolute', left:60, top:120 + i*94,
                  borderRadius:'50%', background:'rgba(251,140,0,0.12)',
                  border:'2px solid rgba(251,140,0,0.5)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:30, color:'#FB8C00', fontWeight:700,
                  opacity: p * (1 - ap(T.ficha, 0.6)), transform:`scale(${lerp(0.7,1,p)})`,
                }}>?</div>
              );
            })}
          </div>
        )}
      </div>

      {/* La respuesta: las fichas asoman detrás */}
      {t >= T.ficha - 0.5 && (
        <div style={{
          position:'absolute', left:0, right:0, top:760, textAlign:'center',
          opacity: ap(T.ficha, 0.6),
        }}>
          <div style={{fontSize:30, color:'#64748B'}}>
            Cada cuenta está escrita en una ficha que tú rellenaste antes
          </div>
        </div>
      )}

      {/* LA ÚNICA COSA — promesa */}
      <div style={{position:'absolute', left:0, right:0, top:850, textAlign:'center'}}>
        <div className="f-plex grad-text" style={{
          fontSize:68, fontWeight:800, letterSpacing:'-0.02em',
          opacity: ap(T.uc, 0.6), transform:`translateY(${(1-ap(T.uc,0.6))*18}px)`,
        }}>Cada cuenta se dice una vez, en su ficha.</div>
        <div className="f-plex" style={{
          fontSize:68, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:6,
          opacity: ap(T.uc + 2.6, 0.6),
        }}>El asiento solo la usa.</div>
      </div>

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