// === escena-06 — Recapitulación + eco (bookend) ===
// Las 4 ideas sostienen el plano hasta el eco: no se sustituyen por otra composición.

function EscenaCC06({ t }){

  const T = {
    cuatro:  0.10,   // "Cuatro cosas"
    i1:      3.56,   // "sale de la factura que ya tenías"
    i2:      7.99,   // "lo llevas a mano"
    i3:     11.61,   // "se compara sola con tu operativa"
    i4:     16.01,   // "lo pesado del cierre"
    magia:  21.82,   // "viven en el mismo sitio"
    eco:    24.04,   // ÚNICA COSA (eco)
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const IDEAS = [
    { b:T.i1, n:'01', t1:'El asiento no lo escribes', t2:'sale de la factura que ya tenías' },
    { b:T.i2, n:'02', t1:'Lo que no quieres automático', t2:'lo llevas a mano en la misma pantalla' },
    { b:T.i3, n:'03', t1:'Se compara con tu operativa', t2:'y te dice dónde no cuadra' },
    { b:T.i4, n:'04', t1:'Lo pesado del cierre', t2:'renumerar, amortizar, cerrar' },
  ];

  return (
    <SlideCanvas variant="promise">

      <div style={{position:'absolute', left:0, right:0, top:120, textAlign:'center'}}>
        <div className="f-plex" style={{
          fontSize:54, fontWeight:700, color:'#0F172A', letterSpacing:'-0.02em',
          opacity: ap(T.cuatro, 0.6),
        }}>Cuatro cosas</div>
      </div>

      {/* Rejilla 2×2 grande: llevan solas los últimos doce segundos */}
      <div style={{
        position:'absolute', left:'50%', top:250, transform:'translateX(-50%)',
        width:1500, display:'grid', gridTemplateColumns:'1fr 1fr', gap:22,
      }}>
        {IDEAS.map(idea=>{
          const p = ap(idea.b, 0.6, Easing.easeOutBack);
          return (
            <div key={idea.n} style={{
              background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
              boxShadow:'0 16px 44px rgba(15,23,42,0.07)', padding:'32px 36px',
              opacity:p, transform:`translateY(${(1-p)*22}px)`,
            }}>
              <div className="f-mono" style={{fontSize:17, color:'#0085FF', letterSpacing:'.1em'}}>{idea.n}</div>
              <div className="f-plex" style={{fontSize:36, fontWeight:700, color:'#0F172A', marginTop:10, lineHeight:1.15}}>
                {idea.t1}
              </div>
              <div style={{fontSize:23, color:'#64748B', marginTop:10}}>{idea.t2}</div>
            </div>
          );
        })}
      </div>

      {/* «No es magia»: la frase que explica las cuatro, sin apoyo nuevo en pantalla */}
      <div style={{
        position:'absolute', left:0, right:0, top:770, textAlign:'center',
        fontSize:30, color:'#64748B', opacity: ap(T.magia, 0.6),
      }}>Nada de esto es magia: la factura y el asiento viven en el mismo sitio.</div>

      {/* EL ECO — rima con la apertura */}
      <div style={{position:'absolute', left:0, right:0, top:850, textAlign:'center'}}>
        <div className="f-plex grad-text" style={{
          fontSize:72, fontWeight:800, letterSpacing:'-0.02em',
          opacity: ap(T.eco, 0.6), transform:`translateY(${(1-ap(T.eco,0.6))*18}px)`,
        }}>Tus asientos salen de tus facturas.</div>
        <div className="f-plex" style={{
          fontSize:72, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:6,
          opacity: ap(T.eco + 2.9, 0.6),
        }}>Y se comprueban contra ellas.</div>
      </div>

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

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