// === escena-05 — Recapitulación + eco (bookend) ===
function EscenaIC05({ t }){

  const T = {
    tres:    0.10,   // "Tres cosas"
    i1:      2.85,   // "lo que cuesta, lo que dura"
    i2:      8.71,   // "se ve entera antes de escribirse"
    i3:     18.94,   // "pegado a su máquina"
    hoja:   27.50,   // "deja de tener sentido"
    eco:    29.68,   // Ú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 bien lleva sus datos', t2:'lo que cuesta, lo que dura y sus tres cuentas' },
    { b:T.i2, n:'02', t1:'La dotación se ve entera', t2:'prorrateada por meses y con tope' },
    { b:T.i3, n:'03', t1:'Cada asiento, pegado a su bien', t2:'el histórico se lee solo' },
  ];

  return (
    <SlideCanvas variant="promise">

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

      <div style={{
        position:'absolute', left:'50%', top:270, transform:'translateX(-50%)',
        width:1560, display:'flex', gap:22,
      }}>
        {IDEAS.map(idea=>{
          const p = ap(idea.b, 0.6, Easing.easeOutBack);
          return (
            <div key={idea.n} style={{
              flex:1, background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
              boxShadow:'0 16px 44px rgba(15,23,42,0.07)', padding:'34px 32px',
              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:34, fontWeight:700, color:'#0F172A', marginTop:12, lineHeight:1.15}}>
                {idea.t1}
              </div>
              <div style={{fontSize:22, color:'#64748B', marginTop:12}}>{idea.t2}</div>
            </div>
          );
        })}
      </div>

      <div style={{
        position:'absolute', left:0, right:0, top:660, textAlign:'center',
        fontSize:30, color:'#64748B', opacity: ap(T.hoja, 0.6),
      }}>La hoja de cálculo aparte deja de tener sentido.</div>

      <div style={{position:'absolute', left:0, right:0, top:790, textAlign:'center'}}>
        <div className="f-plex grad-text" style={{
          fontSize:70, fontWeight:800, letterSpacing:'-0.02em',
          opacity: ap(T.eco, 0.6), transform:`translateY(${(1-ap(T.eco,0.6))*18}px)`,
        }}>El bien lleva dentro su amortización.</div>
        <div className="f-plex" style={{
          fontSize:70, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:6,
          opacity: ap(T.eco + 2.6, 0.6),
        }}>Solo hay que pedirla.</div>
      </div>

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

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