// === escena-04 — Un asiento por máquina, y su historia ===
function EscenaIC04({ t }){

  const T = {
    escribe:  1.27,   // "escribe un asiento por cada elemento"
    unopor:   4.11,   // "Uno por máquina"
    colgado:  9.18,   // "colgado de su bien"
    nadie:   17.80,   // "nadie tiene que apuntarlo"
    suma:    20.79,   // "Se suma de sus propios asientos"
    salida:  27.70,   // "Recojamos lo que acabas de ver"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const ASIENTOS = [
    { bien:'Torno CNC-4',      n:'1.410', imp:'  812,50' },
    { bien:'Furgoneta Master', n:'1.411', imp:'4.666,67' },
    { bien:'Elevador 2 col.',  n:'1.412', imp:'  300,00' },
  ];

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="LO QUE ESCRIBE" title="Un asiento por máquina" />

      {/* Los asientos, uno por bien */}
      <div style={{position:'absolute', left:150, top:270, width:820}}>
        {ASIENTOS.map((a,i)=>{
          const p = ap(T.escribe + i*0.28, 0.5, Easing.easeOutBack);
          return (
            <div key={a.n} style={{
              background:'#fff', borderRadius:16, border:'1px solid #E2E8F0',
              boxShadow:'0 12px 34px rgba(15,23,42,0.06)', padding:'20px 24px', marginBottom:14,
              opacity:p, transform:`translateY(${(1-p)*18}px)`,
            }}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
                <span className="f-mono" style={{fontSize:16, color:'#64748B'}}>ASIENTO {a.n}</span>
                <span style={{fontSize:19, color:'#0F172A'}}>{a.bien}</span>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 140px 140px', gap:10, marginTop:12,
                           fontSize:19, color:'#0F172A'}}>
                <span>681 Dotación</span>
                <span className="f-mono" style={{textAlign:'right'}}>{a.imp}</span>
                <span/>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 140px 140px', gap:10, marginTop:6,
                           paddingTop:8, borderTop:'1px solid #F1F5F9', fontSize:19, color:'#0F172A'}}>
                <span>2813 Amortización acumulada</span>
                <span/>
                <span className="f-mono" style={{textAlign:'right'}}>{a.imp}</span>
              </div>
            </div>
          );
        })}
        <div style={{fontSize:22, color:'#64748B', marginTop:4, opacity: ap(T.unopor, 0.5)}}>
          Uno por máquina, no uno gigante con treinta líneas.
        </div>
      </div>

      {/* El enlace al bien, y la consecuencia */}
      <div style={{position:'absolute', left:1050, top:290, width:740, opacity: ap(T.colgado, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid rgba(16,185,129,0.4)',
                     boxShadow:'0 20px 50px rgba(16,185,129,0.14)', padding:'26px 30px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#10B981', letterSpacing:'.08em'}}>FICHA DEL BIEN</div>
          <div className="f-plex" style={{fontSize:32, fontWeight:600, color:'#0F172A', marginTop:6}}>Torno CNC-4</div>

          <div style={{marginTop:18}}>
            <div style={{fontSize:19, color:'#64748B'}}>Sus dotaciones</div>
            {[['2026','  812,50'],['2027','2.437,50'],['2028','2.437,50']].map((r,i)=>{
              const p = ap(T.colgado + 0.5 + i*0.2, 0.4);
              return (
                <div key={r[0]} style={{
                  display:'flex', justifyContent:'space-between',
                  padding:'12px 0', borderTop: i?'1px solid #F1F5F9':'1px solid #F1F5F9',
                  fontSize:20, color:'#0F172A', opacity:p,
                }}>
                  <span className="f-mono">{r[0]}</span>
                  <span className="f-mono">{r[1]} €</span>
                </div>
              );
            })}
            <div style={{
              display:'flex', justifyContent:'space-between', marginTop:10, paddingTop:12,
              borderTop:'2px solid rgba(16,185,129,0.3)', fontSize:23, fontWeight:700, color:'#10B981',
              opacity: ap(T.suma, 0.6),
            }}>
              <span>Lleva amortizado</span><span className="f-mono">5.687,50 €</span>
            </div>
          </div>

          <div style={{fontSize:21, color:'#64748B', marginTop:18, opacity: ap(T.nadie, 0.6)}}>
            Nadie lo apunta en ningún sitio. Se suma de sus propios asientos.
          </div>
        </div>
      </div>

      <div style={{
        position:'absolute', left:0, right:0, bottom:50, textAlign:'center',
        fontSize:26, color:'#64748B', opacity: ap(T.salida, 0.6),
      }}>Recojamos lo que acabas de ver</div>

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