// === escena-04 — El inmovilizado y la reserva de la empresa (CLÍMAX, 67 %) ===
//
// REESCRITA el 2026-08-16. El clímax anterior era la HERENCIA tipo→elemento del inmovilizado.
// Esos campos de cuenta del tipo se han eliminado del ERP: ahora las tres van siempre en el bien,
// así que esa regla ya no existe. El clímax pasa a la excepción que SÍ sigue viva y que además
// ahorra más trabajo que ninguna: las dos cuentas de reserva de la ficha de la empresa.

function EscenaCU04({ t }){

  const T = {
    inmov:    0.10,   // "Mira el inmovilizado"
    tres:     3.30,   // "sus propias tres cuentas"
    enficha:  9.64,   // "en la ficha de la máquina"
    regla:   15.31,   // "cada ficha lleva las suyas"
    excep:   18.16,   // "una excepción que ahorra"       → VALLE
    empresa: 21.11,   // "la ficha de la empresa"
    reserva: 23.55,   // "dos cuentas de reserva"         → EL MOMENTO
    cliente: 28.49,   // "el cliente que todavía no tiene"
    bloquea: 33.10,   // "bloquea su primera factura"
    igual:   38.04,   // "se contabiliza igual"
    uc:      40.23,   // ÚNICA COSA (prueba)
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  // El inmovilizado se atenúa cuando entra la excepción: ha cumplido su papel de «una más».
  const vivoInmov = 1 - 0.65 * ap(T.excep, 0.7);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="LA REGLA, Y SU EXCEPCIÓN" title="Cada ficha lleva las suyas" />

      {/* El inmovilizado: una ficha más que lleva las suyas */}
      <div style={{position:'absolute', left:150, top:250, width:760, opacity: ap(T.inmov, 0.6) * vivoInmov}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 18px 46px rgba(15,23,42,0.08)', padding:'26px 30px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>FICHA DEL INMOVILIZADO</div>
          <div className="f-plex" style={{fontSize:32, fontWeight:600, color:'#0F172A', marginTop:6}}>Torno CNC-4</div>

          {[['213000004','Cuenta del bien'],
            ['281300004','Amortización acumulada'],
            ['681000001','Dotación']].map((c,i)=>{
            const p = ap(T.tres + i*0.3, 0.45, Easing.easeOutBack);
            const activa = t >= T.tres + i*0.3 && t < T.tres + i*0.3 + 2.4;
            return (
              <div key={c[0]} style={{
                display:'grid', gridTemplateColumns:'190px 1fr', gap:16, alignItems:'center',
                padding:'16px 16px', marginTop:10, borderRadius:12,
                background: activa ? 'rgba(0,133,255,0.08)':'#F8FAFC',
                border:`1px solid ${activa ? 'rgba(0,133,255,0.45)':'#EEF2F7'}`,
                opacity:p, transform:`translateX(${(1-p)*-14}px)`,
              }}>
                <span className="f-mono" style={{fontSize:22, color:'#0085FF', fontWeight:700}}>{c[0]}</span>
                <span style={{fontSize:21, color:'#0F172A'}}>{c[1]}</span>
              </div>
            );
          })}

          <div style={{fontSize:20, color:'#64748B', marginTop:16, opacity: ap(T.enficha, 0.6)}}>
            Se rellenan en la ficha de la máquina, y ahí se quedan.
          </div>
        </div>
      </div>

      {/* LA EXCEPCIÓN: la reserva de la empresa */}
      {t >= T.empresa - 0.6 && (
        <div style={{position:'absolute', left:1000, top:250, width:790,
                     opacity: ap(T.empresa, 0.6), transform:`translateY(${(1-ap(T.empresa,0.6))*22}px)`}}>
          <div style={{background:'#fff', borderRadius:18, border:'2px solid rgba(16,185,129,0.5)',
                       boxShadow:'0 26px 64px rgba(16,185,129,0.18)', padding:'28px 32px'}}>
            <div className="f-mono" style={{fontSize:15, color:'#10B981', letterSpacing:'.08em'}}>FICHA DE LA EMPRESA</div>
            <div className="f-plex" style={{fontSize:32, fontWeight:600, color:'#0F172A', marginTop:6}}>
              Las dos cuentas de reserva
            </div>

            {[['430000000','Reserva de clientes'],
              ['400000000','Reserva de proveedores']].map((c,i)=>{
              const p = ap(T.reserva + i*0.35, 0.5, Easing.easeOutBack);
              return (
                <div key={c[0]} style={{
                  display:'grid', gridTemplateColumns:'190px 1fr', gap:16, alignItems:'center',
                  padding:'18px 16px', marginTop:12, borderRadius:12,
                  background:'rgba(16,185,129,0.08)', border:'1px solid rgba(16,185,129,0.35)',
                  opacity:p, transform:`translateY(${(1-p)*14}px)`,
                }}>
                  <span className="f-mono" style={{fontSize:24, color:'#10B981', fontWeight:700}}>{c[0]}</span>
                  <span style={{fontSize:22, color:'#0F172A'}}>{c[1]}</span>
                </div>
              );
            })}

            {/* Para qué sirven: el cliente nuevo que aún no tiene la suya */}
            <div style={{marginTop:20, opacity: ap(T.cliente, 0.6)}}>
              <div style={{
                display:'flex', alignItems:'center', justifyContent:'space-between',
                padding:'16px 18px', borderRadius:12,
                background:'#F8FAFC', border:'1px solid #EEF2F7',
              }}>
                <span style={{fontSize:21, color:'#0F172A'}}>Cliente nuevo · sin subcuenta</span>
                <span className="f-mono" style={{
                  fontSize:20,
                  color: t >= T.igual ? '#10B981' : '#EF4444',
                  fontWeight:700,
                }}>{t >= T.igual ? '→ 430000000' : 'bloqueado'}</span>
              </div>
              <div style={{
                fontSize:20, color: t >= T.igual ? '#10B981' : '#EF4444', marginTop:10,
                opacity: ap(T.bloquea, 0.5),
              }}>
                {t >= T.igual
                  ? 'Con la reserva puesta, se contabiliza igual.'
                  : 'Sin ella, su primera factura no se puede contabilizar.'}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* LA ÚNICA COSA — prueba */}
      <div style={{position:'absolute', left:0, right:0, top:830, textAlign:'center'}}>
        <div className="f-plex grad-text" style={{
          fontSize:66, fontWeight:800, letterSpacing:'-0.02em',
          opacity: ap(T.uc, 0.6), transform:`translateY(${(1-ap(T.uc,0.6))*18}px)`,
        }}>Cada cuenta se dice una vez, en su ficha.</div>
        <div className="f-plex" style={{
          fontSize:66, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:6,
          opacity: ap(T.uc + 2.6, 0.6),
        }}>El asiento solo la usa.</div>
      </div>

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