// === escena-04 — LA RESTA (CLÍMAX, 67 %) ===
// La imagen-momento: las dos columnas restándose y los 250 € apareciendo con las tres cuentas que
// los explican. Es donde la segunda mitad de La Única Cosa deja de ser una promesa.
// Valle deliberado en T.restar: medio segundo de calma antes del dato.

function EscenaCC04({ t }){

  const T = {
    solo:     1.55,   // "solo tiene el asiento"
    vacio:    6.86,   // "no tiene con qué compararlo"
    dosLados: 9.12,   // "Dinaup tiene los dos lados"
    restar:  14.89,   // "Así que puede restar"          → VALLE
    izq:     17.05,   // "La contabilidad dice cuarenta y ocho mil"
    der:     20.70,   // "Tus clientes deben"
    dif:     24.75,   // "Sobran doscientos cincuenta"   → EL MOMENTO
    donde:   29.65,   // "te dice dónde están"
    pista:   33.49,   // "un cobro sin contabilizar"
    mas:     38.15,   // "el saldo real de tus cajas"
    uc:      41.30,   // ÚNICA COSA (prueba)
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const contable = useCountUp(0, 48200, T.izq, 1.2, t);
  const real     = useCountUp(0, 47950, T.der, 1.2, t);
  const dif      = useCountUp(0,   250, T.dif, 1.0, t);

  const Columna = ({ x, titulo, valor, color, aparece, sub }) => (
    <div style={{
      position:'absolute', left:x, top:300, width:560,
      opacity: ap(aparece, 0.6), transform:`translateY(${(1-ap(aparece,0.6))*22}px)`,
    }}>
      <div style={{
        background:'#fff', borderRadius:18, border:`1px solid ${color}44`,
        boxShadow:`0 24px 60px ${color}22`, padding:'30px 34px', textAlign:'center',
      }}>
        <div className="f-mono" style={{fontSize:16, color:'#64748B', letterSpacing:'.08em'}}>{titulo}</div>
        <div className="f-plex" style={{fontSize:76, fontWeight:300, color, letterSpacing:'-0.02em', marginTop:10}}>
          {valor.toLocaleString('es-ES',{minimumFractionDigits:2, maximumFractionDigits:2})} €
        </div>
        <div style={{fontSize:19, color:'#64748B', marginTop:6}}>{sub}</div>
      </div>
    </div>
  );

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL CUADRE" title="Un programa solo tiene el asiento" />

      {/* La columna de la contabilidad: existe desde el principio */}
      <Columna x={190} titulo="LA CONTABILIDAD DICE" valor={Math.round(contable)}
               color="#0085FF" aparece={T.solo} sub="cuenta 430 · clientes" />

      {/* El hueco: lo que un programa de contabilidad NO tiene */}
      {t < T.dosLados && (
        <div style={{
          position:'absolute', left:820, top:300, width:560, height:250,
          borderRadius:18, border:'2px dashed #E2E8F0',
          display:'flex', alignItems:'center', justifyContent:'center',
          opacity: ap(T.vacio, 0.5) * (1 - ap(T.dosLados, 0.4)),
        }}>
          <span style={{fontSize:26, color:'#94A3B8'}}>nada con qué compararlo</span>
        </div>
      )}

      {/* La segunda columna: la operativa */}
      {t >= T.dosLados - 0.4 && (
        <Columna x={820} titulo="TUS CLIENTES DEBEN" valor={Math.round(real)}
                 color="#10B981" aparece={T.dosLados} sub="según sus facturas" />
      )}

      {/* La resta: el signo aparece en el valle, antes de los números */}
      <div style={{
        position:'absolute', left:0, right:0, top:640, textAlign:'center',
        opacity: ap(T.restar, 0.5),
      }}>
        <span className="f-plex" style={{fontSize:36, color:'#64748B'}}>Así que puede restar</span>
      </div>

      {/* EL MOMENTO: la diferencia */}
      {t >= T.dif - 0.5 && (
        <div style={{
          position:'absolute', left:'50%', top:700, transform:'translateX(-50%)',
          opacity: ap(T.dif - 0.5, 0.6),
        }}>
          <div style={{
            padding:'22px 44px', borderRadius:18,
            background:'rgba(239,68,68,0.07)', border:'2px solid rgba(239,68,68,0.45)',
            boxShadow:`0 24px 60px rgba(239,68,68,${0.10 + 0.10*Math.sin(clamp((t-T.dif)/1.1,0,1)*Math.PI)})`,
            textAlign:'center',
          }}>
            <div className="f-mono" style={{fontSize:16, color:'#EF4444', letterSpacing:'.08em'}}>SOBRAN</div>
            <div className="f-plex" style={{fontSize:82, fontWeight:700, color:'#EF4444', letterSpacing:'-0.02em'}}>
              {Math.round(dif).toLocaleString('es-ES')},00 €
            </div>
          </div>
        </div>
      )}

      {/* Y DÓNDE están: las tres cuentas que lo explican */}
      {t >= T.donde - 0.4 && (
        <div style={{
          position:'absolute', left:'50%', top:880, transform:'translateX(-50%)',
          display:'flex', gap:14, opacity: ap(T.donde, 0.6),
        }}>
          {[['430000012','+180,00'],['430000047','+ 50,00'],['430000103','+ 20,00']].map(([c,v],i)=>{
            const p = ap(T.donde + i*0.22, 0.45, Easing.easeOutBack);
            return (
              <div key={c} style={{
                padding:'14px 20px', borderRadius:12, background:'#fff',
                border:'1px solid rgba(239,68,68,0.35)',
                opacity:p, transform:`translateY(${(1-p)*14}px)`,
              }}>
                <div className="f-mono" style={{fontSize:19, color:'#0F172A'}}>{c}</div>
                <div className="f-mono" style={{fontSize:17, color:'#EF4444', marginTop:2}}>{v} €</div>
              </div>
            );
          })}
          <div style={{
            display:'flex', alignItems:'center', padding:'0 18px',
            fontSize:19, color:'#64748B', opacity: ap(T.pista, 0.6),
          }}>probablemente un cobro sin contabilizar</div>
        </div>
      )}

      {/* Lo mismo con proveedores y tesorería: se enuncia, no se repite la maqueta */}
      {t >= T.mas && (
        <div style={{
          position:'absolute', left:0, right:0, top:990, textAlign:'center',
          fontSize:22, color:'#64748B', opacity: ap(T.mas, 0.5),
        }}>Lo mismo con proveedores. Y con el saldo real de tus cajas y tus bancos.</div>
      )}

      {/* LA ÚNICA COSA — prueba */}
      {t >= T.uc - 0.3 && (
        <div style={{
          position:'absolute', inset:0, background:'rgba(255,255,255,0.93)',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
          opacity: ap(T.uc, 0.6),
        }}>
          <div className="f-plex grad-text" style={{fontSize:74, fontWeight:800, letterSpacing:'-0.02em'}}>
            Tus asientos salen de tus facturas.
          </div>
          <div className="f-plex" style={{
            fontSize:74, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:8,
            opacity: ap(T.uc + 3.2, 0.6),
          }}>Y se comprueban contra ellas.</div>
        </div>
      )}

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