// === escena-01 — El Excel de las amortizaciones (CONTRATO) ===
function EscenaIC01({ t }){

  const T = {
    torno:    0.10,   // "Compras un torno"
    precio:   2.09,   // "Veinte mil euros"
    ocho:     6.44,   // "dura ocho años"
    calcular:10.04,   // "cuánto se ha gastado ese bien"
    hoja:    14.56,   // "una hoja de cálculo aparte"
    asientos:22.80,   // "hay que pasarla a asientos"
    noexiste:25.86,   // "esa hoja no existe"
    uc1:     28.04,   // ÚNICA COSA mitad 1
    uc2:     30.91,   // mitad 2
    salida:  33.09,   // "Empecemos por lo que lleva dentro"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));
  const vivoProblema = 1 - ap(T.noexiste, 0.7);

  return (
    <SlideCanvas variant={t < T.noexiste ? 'problem' : 'promise'}>
      <DemoHeader t={t} eyebrow="INMOVILIZADO" title="Ocho años de cuenta" />

      {/* El bien y su reloj */}
      <div style={{position:'absolute', left:160, top:270, width:620, opacity:vivoProblema}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 18px 46px rgba(15,23,42,0.08)', padding:'30px 34px'}}>
          <div className="f-plex" style={{fontSize:34, fontWeight:600, color:'#0F172A',
                                          opacity: ap(T.torno, 0.5)}}>Torno CNC-4</div>
          <div className="f-plex" style={{
            fontSize:72, fontWeight:300, color:'#0F172A', letterSpacing:'-0.02em', marginTop:8,
            opacity: ap(T.precio, 0.5),
          }}>20.000,00 €</div>

          {/* Los ocho años como ocho barras: se dibujan de golpe con la frase */}
          <div style={{display:'flex', gap:8, marginTop:26, opacity: ap(T.ocho, 0.5)}}>
            {[...Array(8)].map((_,i)=>{
              const p = ap(T.ocho + i*0.09, 0.3);
              return <div key={i} style={{
                flex:1, height:54, borderRadius:8,
                background:'rgba(0,133,255,0.14)', border:'1px solid rgba(0,133,255,0.3)',
                opacity:p, transform:`scaleY(${lerp(0.4,1,p)})`, transformOrigin:'bottom',
              }}/>;
            })}
          </div>
          <div style={{fontSize:20, color:'#64748B', marginTop:10, opacity:ap(T.ocho+0.8,0.5)}}>
            ocho ejercicios, y cada uno hay que calcularlo
          </div>
        </div>
      </div>

      {/* La hoja de cálculo aparte: el villano de la pieza */}
      <div style={{
        position:'absolute', left:860, top:270, width:900,
        opacity: vivoProblema * ap(T.hoja, 0.6),
        transform:`translateY(${(1-ap(T.hoja,0.6))*20}px)`,
      }}>
        <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0',
                     boxShadow:'0 18px 46px rgba(15,23,42,0.08)', overflow:'hidden'}}>
          <div style={{padding:'14px 22px', background:'#F1F5F9', borderBottom:'1px solid #E2E8F0'}}>
            <span className="f-mono" style={{fontSize:16, color:'#64748B', letterSpacing:'.08em'}}>
              AMORTIZACIONES 2026.XLSX
            </span>
          </div>
          {[
            ['Torno CNC-4','20.000,00','8','?'],
            ['Furgoneta Master','28.000,00','6','?'],
            ['Servidor rack','4.200,00','4','?'],
            ['Elevador 2 columnas','5.800,00','10','?'],
          ].map((r,i)=>{
            const p = ap(T.hoja + 0.4 + i*0.16, 0.4);
            return (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'1fr 180px 90px 140px', gap:12,
                padding:'15px 22px', borderTop: i ? '1px solid #F8FAFC':'none',
                fontSize:20, color:'#0F172A', opacity:p,
              }}>
                <span>{r[0]}</span>
                <span className="f-mono" style={{textAlign:'right'}}>{r[1]}</span>
                <span className="f-mono" style={{textAlign:'right'}}>{r[2]} años</span>
                <span className="f-mono" style={{textAlign:'right', color:'#FB8C00', fontWeight:700}}>{r[3]}</span>
              </div>
            );
          })}
          <div style={{
            padding:'16px 22px', background:'rgba(239,68,68,0.06)', borderTop:'1px solid rgba(239,68,68,0.25)',
            fontSize:21, color:'#EF4444', opacity: ap(T.asientos, 0.5),
          }}>y al cerrar, hay que pasarla a asientos a mano</div>
        </div>
      </div>

      {/* EL GIRO */}
      {t >= T.noexiste - 0.4 && (
        <div style={{position:'absolute', inset:0, opacity: ap(T.noexiste, 0.7),
                     display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
          <DinaupLogo size={46} />
          <div className="f-plex" style={{fontSize:38, color:'#64748B', marginTop:26, opacity:ap(T.noexiste+0.5,0.5)}}>
            En Dinaup esa hoja no existe
          </div>
          <div className="f-plex grad-text" style={{
            fontSize:72, fontWeight:800, letterSpacing:'-0.02em', marginTop:30,
            opacity: ap(T.uc1, 0.6), transform:`translateY(${(1-ap(T.uc1,0.6))*18}px)`,
          }}>El bien lleva dentro su amortización.</div>
          <div className="f-plex" style={{
            fontSize:72, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:6,
            opacity: ap(T.uc2, 0.6),
          }}>Solo hay que pedirla.</div>
        </div>
      )}

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