// === escena-05 — La baja se marca (+ eco) ===
// El aviso de la pieza, y es honesto: la baja NO es automática. Se escribe a mano y hay que
// atarla al bien, o el sistema le sigue dotando amortización en silencio.

function EscenaIU05({ t }){

  const T = {
    olvida:   1.19,   // "la que se olvida"
    mano:     5.01,   // "ese asiento se escribe a mano"
    senala:  14.15,   // "señalarle ese asiento"
    viva:    19.21,   // "esa máquina sigue viva"
    uc:      25.10,   // ÚNICA COSA (eco)
    baja:    29.15,   // "Y la baja se marca"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  return (
    <SlideCanvas variant={t >= T.viva && t < T.uc ? 'problem' : 'light-soft'}>
      <DemoHeader t={t} eyebrow="LA QUE SE OLVIDA" title="Cuando vendes o retiras una máquina" />

      {/* Paso 1 — el asiento a mano */}
      <div style={{position:'absolute', left:150, top:270, width:700, opacity: ap(T.mano, 0.6)}}>
        <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0',
                     boxShadow:'0 14px 40px rgba(15,23,42,0.07)', padding:'24px 28px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>PASO 1</div>
          <div className="f-plex" style={{fontSize:30, fontWeight:600, color:'#0F172A', marginTop:6}}>
            El asiento, a mano
          </div>
          <div style={{marginTop:16}}>
            {[['281 Amortización acumulada','5.687,50',''],
              ['672 Pérdida por enajenación','1.312,50',''],
              ['213 Maquinaria','','7.000,00']].map((r,i)=>(
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'1fr 130px 130px', gap:10,
                padding:'11px 0', borderTop: i?'1px solid #F1F5F9':'none',
                fontSize:19, color:'#0F172A', opacity: ap(T.mano + 0.4 + i*0.16, 0.4),
              }}>
                <span>{r[0]}</span>
                <span className="f-mono" style={{textAlign:'right'}}>{r[1]}</span>
                <span className="f-mono" style={{textAlign:'right'}}>{r[2]}</span>
              </div>
            ))}
          </div>
          <div style={{fontSize:19, color:'#64748B', marginTop:14, opacity: ap(T.mano+1.4,0.5)}}>
            Es esporádico y cada una es distinta: por eso no se automatiza.
          </div>
        </div>
      </div>

      {/* Paso 2 — atarlo al bien. ES EL PASO QUE SE OLVIDA */}
      <div style={{position:'absolute', left:920, top:270, width:820, opacity: ap(T.senala, 0.6),
                   transform:`translateY(${(1-ap(T.senala,0.6))*20}px)`}}>
        <div style={{background:'#fff', borderRadius:16,
                     border:'2px solid rgba(0,133,255,0.5)', boxShadow:'0 20px 50px rgba(0,133,255,0.16)',
                     padding:'24px 28px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#0085FF', letterSpacing:'.08em'}}>PASO 2 · EL QUE SE OLVIDA</div>
          <div className="f-plex" style={{fontSize:30, fontWeight:600, color:'#0F172A', marginTop:6}}>
            Atarlo a la ficha del bien
          </div>
          <div style={{
            display:'grid', gridTemplateColumns:'1fr 260px', gap:14, alignItems:'center',
            padding:'18px 18px', marginTop:16, borderRadius:12,
            background:'rgba(0,133,255,0.08)', border:'1px solid rgba(0,133,255,0.45)',
          }}>
            <span style={{fontSize:22, color:'#0F172A'}}>Asiento de baja</span>
            <span className="f-mono" style={{fontSize:21, color:'#0085FF', textAlign:'right', fontWeight:700}}>
              Asiento 1.998
            </span>
          </div>
          <div style={{fontSize:20, color:'#64748B', marginTop:16}}>
            Con eso, el bien deja de amortizar y sale de la lista.
          </div>
        </div>
      </div>

      {/* La consecuencia de NO hacerlo */}
      {t >= T.viva - 0.4 && t < T.uc && (
        <div style={{
          position:'absolute', left:'50%', top:680, transform:'translateX(-50%)', width:1300,
          padding:'22px 30px', borderRadius:16,
          background:'rgba(239,68,68,0.08)', border:'1px solid rgba(239,68,68,0.45)',
          textAlign:'center', opacity: ap(T.viva, 0.6),
        }}>
          <div className="f-plex" style={{fontSize:32, fontWeight:700, color:'#EF4444'}}>
            Si no lo marcas, esa máquina sigue viva
          </div>
          <div style={{fontSize:22, color:'#0F172A', marginTop:8}}>
            y te va a seguir dotando amortización todos los años, en silencio
          </div>
        </div>
      )}

      {/* EL ECO, con su coletilla nueva */}
      <div style={{position:'absolute', left:0, right:0, top:790, textAlign:'center'}}>
        <div className="f-plex grad-text" style={{
          fontSize:56, fontWeight:800, letterSpacing:'-0.02em',
          opacity: ap(T.uc, 0.6), transform:`translateY(${(1-ap(T.uc,0.6))*18}px)`,
        }}>Una sola ficha: lo que cuesta, lo que dura y a dónde va.</div>
        <div className="f-plex" style={{
          fontSize:56, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:8,
          opacity: ap(T.baja, 0.6),
        }}>Y la baja se marca.</div>
      </div>

      <div style={{position:'absolute', left:'50%', bottom:50, transform:'translateX(-50%)', opacity:ap(T.baja,0.8)}}>
        <DinaupLogo size={38} />
      </div>

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