// === Slide Resumen (10s) — "Lo que acabas de ver", 4 puntos en grid 2x2 ===

function SlideResumen({ t }){
  const headerE = Easing.easeOutCubic(clamp(t/0.6, 0, 1));

  const points = [
    {
      icon:'📥', color:'#0085FF',
      title:'Todo entra solo',
      sub:'Facturas y extractos: los arrastras y quedan contabilizados.',
      start:1.0,
    },
    {
      icon:'🔁', color:'#10B981',
      title:'Un solo motor',
      sub:'La venta del TPV ya es factura, asiento e IVA. El dato se teclea una vez.',
      start:2.4,
    },
    {
      icon:'🤖', color:'#8B5CF6',
      title:'IA con tus permisos',
      sub:'Yudo y tus propios agentes trabajan con tus datos, con el alcance que tú decides.',
      start:3.8,
    },
    {
      icon:'🧩', color:'#F59E0B',
      title:'Crece sin cambiar de software',
      sub:'Con Flex añades tus secciones —partidas, vehículos, lo que tu negocio pida— y con la API lo conectas todo.',
      start:5.2,
    },
  ];

  const closingE = Easing.easeOutCubic(clamp((t-6.6)/0.6, 0, 1));

  return (
    <SlideCanvas variant="hero" particles={10}>
      <RuedaDivider style={{position:'absolute',top:0,left:80,right:80,height:4,overflow:'hidden'}}/>

      <div style={{position:'absolute',top:110,left:0,right:0,textAlign:'center',opacity:headerE,transform:`translateY(${(1-headerE)*-12}px)`}}>
        <div className="f-mono" style={{fontSize:13,fontWeight:600,letterSpacing:'3px',color:'#64748B'}}>LO QUE ACABAS DE VER</div>
        <h2 className="f-plex" style={{fontSize:62,fontWeight:700,letterSpacing:'-0.035em',color:'#0F172A',margin:'18px 0 0',lineHeight:1.05}}>
          Un día entero. <span className="grad-text">Ningún dato tecleado dos veces.</span>
        </h2>
      </div>

      <div style={{position:'absolute',top:330,left:140,right:140,bottom:130,display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
        {points.map((p,i)=>{
          const inE = Easing.easeOutCubic(clamp((t-p.start)/0.7, 0, 1));
          return (
            <div key={i} style={{
              position:'relative',
              display:'flex',alignItems:'center',gap:20,
              padding:'28px 30px',background:'#fff',
              border:'1px solid #E2E8F0',borderRadius:16,
              boxShadow:`0 12px 30px ${p.color}18, 0 4px 10px rgba(15,23,42,0.04)`,
              opacity:inE,transform:`translateY(${(1-inE)*20}px)`,
            }}>
              <div style={{width:76,height:76,borderRadius:16,background:`linear-gradient(135deg, ${p.color}, ${p.color}99)`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:36,flexShrink:0,boxShadow:`0 8px 20px ${p.color}40`}}>{p.icon}</div>
              <div style={{flex:1}}>
                <div className="f-plex" style={{fontSize:30,fontWeight:700,color:'#0F172A',letterSpacing:'-0.02em',lineHeight:1.15,marginBottom:8}}>{p.title}</div>
                <div className="f-plex" style={{fontSize:19,color:'#475569',lineHeight:1.5}}>{p.sub}</div>
              </div>
              <div className="f-mono" style={{position:'absolute',top:14,right:18,fontSize:11,fontWeight:700,color:'#94A3B8',letterSpacing:1}}>{String(i+1).padStart(2,'0')}</div>
            </div>
          );
        })}
      </div>

      <div style={{position:'absolute',bottom:64,left:0,right:0,textAlign:'center',opacity:closingE,transform:`translateY(${(1-closingE)*8}px)`}}>
        <div className="f-plex" style={{fontSize:24,fontWeight:500,color:'#334155'}}>
          Cuatro ideas. Una plataforma. <span className="grad-text" style={{fontWeight:700}}>Esto es Dinaup.</span>
        </div>
      </div>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideResumen });