// === escena-01 — Una sola ficha, tres bloques (CONTRATO) ===
// Pieza de CLIENTE: jerga obligatoria, y cada término se enseña en el segundo en que se dice.
//
// REESCRITA el 2026-08-16: la versión anterior partía la configuración en DOS fichas —el tipo
// llevaba las cuentas y el elemento el dinero y el tiempo—. Los campos de cuenta del tipo se han
// eliminado del ERP: ahora las tres cuentas van SIEMPRE en el bien. Menos confuso, y de paso
// la pieza mejora: una sola ficha se explica mejor que una herencia.

function EscenaIU01({ t }){

  const T = {
    ficha:    2.04,   // "todo lo que hace falta está en su propia ficha"
    tres:     7.97,   // "Son tres bloques"
    b1:      13.69,   // "Lo que costó"
    b2:      15.54,   // "Lo que va a durar"
    b3:      17.69,   // "a qué cuentas contables va"
    uc:      20.01,   // ÚNICA COSA (promesa)
    salida:  25.55,   // "empezando por el dinero"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const BLOQUES = [
    { b:T.b1, n:'01', t1:'El dinero',   t2:'coste · residual · total a amortizar' },
    { b:T.b2, n:'02', t1:'El tiempo',   t2:'años de vida · inicio de actividad' },
    { b:T.b3, n:'03', t1:'Las cuentas', t2:'bien · amortización acumulada · dotación' },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="INMOVILIZADO · CONFIGURACIÓN" title="Todo en la ficha del bien" />

      {/* LA FICHA — una sola, y dentro los tres bloques */}
      <div style={{position:'absolute', left:'50%', top:250, transform:'translateX(-50%)', width:1440,
                   opacity: ap(T.ficha, 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
          </div>
          <div className="f-plex" style={{fontSize:38, fontWeight:600, color:'#0F172A', marginTop:6}}>
            Torno CNC-4
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:20, marginTop:26}}>
            {BLOQUES.map(b=>{
              const p = ap(b.b, 0.5, Easing.easeOutBack);
              const activo = t >= b.b && t < b.b + 2.0;
              return (
                <div key={b.n} style={{
                  padding:'26px 24px', borderRadius:14,
                  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)*18}px)`,
                }}>
                  <div className="f-mono" style={{fontSize:15, color:'#0085FF', letterSpacing:'.1em'}}>{b.n}</div>
                  <div className="f-plex" style={{fontSize:32, fontWeight:700, color:'#0F172A', marginTop:12}}>{b.t1}</div>
                  <div style={{fontSize:19, color:'#64748B', marginTop:10, lineHeight:1.4}}>{b.t2}</div>
                </div>
              );
            })}
          </div>

          <div style={{fontSize:21, color:'#64748B', marginTop:24, opacity: ap(T.tres + 1.6, 0.6)}}>
            No hay que ir a buscar nada a ninguna otra pantalla.
          </div>
        </div>
      </div>

      {/* LA ÚNICA COSA — promesa */}
      <div style={{position:'absolute', left:0, right:0, top:790, textAlign:'center'}}>
        <div className="f-plex grad-text" style={{
          fontSize:64, fontWeight:800, letterSpacing:'-0.02em',
          opacity: ap(T.uc, 0.6), transform:`translateY(${(1-ap(T.uc,0.6))*18}px)`,
        }}>Una sola ficha:</div>
        <div className="f-plex" style={{
          fontSize:64, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:6,
          opacity: ap(T.uc + 1.2, 0.6),
        }}>lo que cuesta, lo que dura y a dónde va.</div>
      </div>

      <div style={{
        position:'absolute', left:0, right:0, bottom:40, textAlign:'center',
        fontSize:24, color:'#64748B', opacity: ap(T.salida, 0.6),
      }}>Vamos bloque por bloque, empezando por el dinero</div>

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