// === escena-02 — Lo que el bien lleva dentro ===
// REESCRITA el 2026-08-16: la versión anterior decía que las cuentas «las lleva su tipo». Esos
// campos se han eliminado del ERP: ahora las tres van en el propio bien, y el argumento comercial
// es mejor — todo cabe en una ficha y no hay que ir a buscar nada a otra pantalla.

function EscenaIC02({ t }){

  const T = {
    cabe:     1.76,   // "todo lo que necesita cabe en su ficha"
    coste:    4.60,   // "Lo que costó"
    residual: 8.74,   // "valor residual"
    anios:   10.60,   // "Los años que va a durar"
    inicio:  13.04,   // "desde cuándo está en funcionamiento"
    cuentas: 16.55,   // "las tres cuentas contables"
    unavez:  22.12,   // "Se rellenan una vez"
    nobuscar:27.20,   // "No hay que ir a buscar nada"
    salida:  31.84,   // "sustituye a la hoja de cálculo"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const DATOS = [
    { l:'Coste',                 v:'20.000,00 €', b:T.coste },
    { l:'Valor residual',        v:'   500,00 €', b:T.residual },
    { l:'Vida del activo',       v:'8 años',      b:T.anios },
    { l:'Inicio de actividad',   v:'01/09/2026',  b:T.inicio },
  ];
  const CUENTAS = [
    { l:'Cuenta del bien',            v:'213000004' },
    { l:'Amortización acumulada',     v:'281300004' },
    { l:'Dotación a la amortización', v:'681000001' },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="LA FICHA DEL BIEN" title="Todo cabe en la misma ficha" />

      <div style={{position:'absolute', left:'50%', top:250, transform:'translateX(-50%)', width:1460,
                   opacity: ap(T.cabe, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 22px 56px rgba(15,23,42,0.09)', padding:'30px 36px'}}>

          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>INMOVILIZADO</div>
          <div className="f-plex" style={{fontSize:36, fontWeight:600, color:'#0F172A', marginTop:6}}>Torno CNC-4</div>

          {/* Arriba: el dinero y el tiempo */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginTop:24}}>
            {DATOS.map(d=>{
              const p = ap(d.b, 0.45, Easing.easeOutBack);
              const activo = t >= d.b && t < d.b + 2.2;
              return (
                <div key={d.l} style={{
                  display:'flex', justifyContent:'space-between', alignItems:'center',
                  padding:'18px 20px', 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:`translateY(${(1-p)*12}px)`,
                }}>
                  <span style={{fontSize:23, color:'#64748B'}}>{d.l}</span>
                  <span className="f-mono" style={{fontSize:25, color:'#0F172A'}}>{d.v}</span>
                </div>
              );
            })}
          </div>

          {/* Debajo, en la MISMA ficha: las tres cuentas */}
          <div style={{
            marginTop:24, paddingTop:22, borderTop:'2px solid #F1F5F9',
            opacity: ap(T.cuentas, 0.6),
          }}>
            <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em', marginBottom:12}}>
              CUENTAS CONTABLES
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:16}}>
              {CUENTAS.map((c,i)=>{
                const p = ap(T.cuentas + 0.3 + i*0.28, 0.45, Easing.easeOutBack);
                return (
                  <div key={c.l} style={{
                    padding:'18px 20px', borderRadius:12,
                    background:'rgba(0,133,255,0.06)', border:'1px solid rgba(0,133,255,0.3)',
                    opacity:p, transform:`translateY(${(1-p)*14}px)`,
                  }}>
                    <div className="f-mono" style={{fontSize:26, fontWeight:700, color:'#0085FF'}}>{c.v}</div>
                    <div style={{fontSize:19, color:'#64748B', marginTop:6}}>{c.l}</div>
                  </div>
                );
              })}
            </div>
          </div>

          <div style={{
            marginTop:22, fontSize:23, color:'#0F172A', opacity: ap(T.unavez, 0.6),
          }}>Se rellenan al dar de alta la máquina, y ya no se vuelven a tocar.</div>
        </div>
      </div>

      {/* El remate: nada en otra pantalla */}
      <div style={{
        position:'absolute', left:0, right:0, top:900, textAlign:'center',
        opacity: ap(T.nobuscar, 0.6),
      }}>
        <span className="f-plex" style={{fontSize:38, fontWeight:600, color:'#0F172A'}}>
          No hay que ir a buscar nada a otra pantalla
        </span>
      </div>

      <div style={{
        position:'absolute', left:0, right:0, bottom:40, textAlign:'center',
        fontSize:24, color:'#64748B', opacity: ap(T.salida, 0.6),
      }}>Y ahora, la parte que sustituye a la hoja de cálculo</div>

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