// === escena-02 — El dinero: tres importes ===
function EscenaIU02({ t }){

  const T = {
    bloque:   0.10,   // "El primer bloque es el dinero"
    coste:    4.04,   // "El coste"
    residual: 7.74,   // "El valor residual"
    total:   12.57,   // "el total a amortizar"
    vacio:   19.90,   // "si lo dejas vacío"
    ejemplo: 23.71,   // "Un torno de veinte mil"
    salida:  28.90,   // "Ahora el tiempo"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const CAMPOS = [
    { b:T.coste,    l:'Coste',             v:'20.000,00 €', d:'suele venir de su factura de compra' },
    { b:T.residual, l:'Valor residual',    v:'   500,00 €', d:'lo que esperas que valga al retirarlo' },
    { b:T.total,    l:'Total a amortizar', v:'19.500,00 €', d:'lo que se reparte en el tiempo' },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="BLOQUE 1 · EL DINERO" title="Tres importes" />

      <div style={{position:'absolute', left:'50%', top:270, transform:'translateX(-50%)', width:1440,
                   opacity: ap(T.bloque, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 20px 50px rgba(15,23,42,0.08)', padding:'30px 36px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>FICHA DEL INMOVILIZADO · TORNO CNC-4</div>

          {CAMPOS.map(c=>{
            const p = ap(c.b, 0.5, Easing.easeOutBack);
            const activo = t >= c.b && t < c.b + 3.0;
            return (
              <div key={c.l} style={{
                display:'grid', gridTemplateColumns:'360px 280px 1fr', gap:22, alignItems:'center',
                padding:'22px 20px', marginTop:12, borderRadius:12,
                background: activo ? 'rgba(0,133,255,0.08)':'#F8FAFC',
                border:`1px solid ${activo ? 'rgba(0,133,255,0.45)':'#EEF2F7'}`,
                opacity:p, transform:`translateX(${(1-p)*-18}px)`,
              }}>
                <span style={{fontSize:26, color:'#0F172A'}}>{c.l}</span>
                <span className="f-mono" style={{fontSize:30, color:'#0F172A', textAlign:'right'}}>{c.v}</span>
                <span style={{fontSize:20, color:'#64748B'}}>{c.d}</span>
              </div>
            );
          })}

          {/* La resta: el tercero no hay que calcularlo */}
          <div style={{
            marginTop:24, padding:'22px 26px', borderRadius:14,
            background:'rgba(16,185,129,0.07)', border:'1px solid rgba(16,185,129,0.4)',
            opacity: ap(T.vacio, 0.6), transform:`translateY(${(1-ap(T.vacio,0.6))*14}px)`,
          }}>
            <div style={{fontSize:22, color:'#0F172A'}}>
              Si dejas vacío el total a amortizar, es <b>coste − residual</b>
            </div>
            <div style={{
              display:'flex', alignItems:'center', gap:20, marginTop:14,
              opacity: ap(T.ejemplo, 0.6),
            }}>
              <span className="f-mono" style={{fontSize:38, color:'#0F172A'}}>20.000</span>
              <span style={{fontSize:32, color:'#94A3B8'}}>−</span>
              <span className="f-mono" style={{fontSize:38, color:'#0F172A'}}>500</span>
              <span style={{fontSize:32, color:'#94A3B8'}}>=</span>
              <span className="f-mono" style={{fontSize:44, fontWeight:700, color:'#10B981'}}>19.500 €</span>
            </div>
          </div>
        </div>
      </div>

      <div style={{
        position:'absolute', left:0, right:0, bottom:50, textAlign:'center',
        fontSize:26, color:'#0F172A', opacity: ap(T.salida, 0.6),
      }}>Ahora el tiempo</div>

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