// === Slide Resumen — recapitulación con cifras (rehecha premium · audio real 37.9s) ===
// Cada "idea" entra AL NOMBRARLA y sus cifras suben en vivo: 129→café, 30s, 1.840 € del agente,
// la base+producto apilados. Cierra con el puente "¿cómo se llega hasta aquí?".
function SlideResumen({ t }){
  const T = {
    head:0.0,
    c1:3.0, n129:5.6, n30:8.3, palabra:10.7,
    c2:14.3, viaje:16.8,
    c3:20.5, n1840:23.9, llaves:27.6,
    c4:30.2, producto:34.2,
    puente:36.9,
  };
  const headerE = Easing.easeOutCubic(clamp((t-T.head)/0.6, 0, 1));
  const n129 = useCountUp(0, 129, T.n129, 1.4, t);
  const n1840 = useCountUp(0, 1840, T.n1840, 1.6, t);
  const cardP = (at)=> clamp((t-at)/0.6, 0, 1);
  const cardE = (at)=> Easing.easeOutBack(cardP(at));
  const on = (at)=> t >= at;

  const S = { stroke:'currentColor', strokeWidth:1.9, strokeLinecap:'round', strokeLinejoin:'round', fill:'none' };
  const icons = {
    inbox: <svg width="26" height="26" viewBox="0 0 24 24" style={{color:'#fff'}}><path d="M3 13h4l2 3h6l2-3h4" {...S}/><path d="M5 5h14l2 8v6H3v-6z" {...S}/></svg>,
    motor: <svg width="26" height="26" viewBox="0 0 24 24" style={{color:'#fff'}}><circle cx="12" cy="12" r="3" {...S}/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l2.8 2.8M16.2 16.2L19 19M19 5l-2.8 2.8M7.8 16.2L5 19" {...S}/></svg>,
    ia: <svg width="26" height="26" viewBox="0 0 24 24" style={{color:'#fff'}}><rect x="5" y="7" width="14" height="12" rx="3" {...S}/><circle cx="9.5" cy="12.5" r="1" fill="currentColor" stroke="none"/><circle cx="14.5" cy="12.5" r="1" fill="currentColor" stroke="none"/><path d="M12 7V4M9 16h6" {...S}/></svg>,
    flex: <svg width="26" height="26" viewBox="0 0 24 24" style={{color:'#fff'}}><rect x="3" y="13" width="18" height="7" rx="2" {...S}/><rect x="6.5" y="6" width="11" height="6" rx="2" {...S}/><path d="M12 2.5V6" {...S}/></svg>,
  };

  const card = (at, color, icon, num, title, children)=>(
    <div style={{position:'relative', display:'flex', gap:18, padding:'22px 24px 20px', background:'#fff', border:`1.5px solid ${on(at)?color+'55':'#E2E8F0'}`, borderRadius:18, boxShadow: on(at)?`0 20px 50px ${color}22, 0 4px 12px rgba(15,23,42,0.05)`:'0 8px 20px rgba(15,23,42,0.05)', opacity:clamp(cardP(at)*1.3,0,1), transform:`translateY(${(1-cardE(at))*26}px) scale(${lerp(0.94,1,cardE(at))})`, overflow:'hidden'}}>
      <div className="f-mono" style={{position:'absolute', right:14, top:2, fontSize:64, fontWeight:800, color:color+'12', lineHeight:1}}>{num}</div>
      <div style={{width:56, height:56, borderRadius:14, background:`linear-gradient(135deg, ${color}, ${color}BB)`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, boxShadow:`0 10px 24px ${color}45`}}>{icon}</div>
      <div style={{flex:1, minWidth:0}}>
        <div className="f-plex" style={{fontSize:25, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginBottom:9}}>{title}</div>
        {children}
      </div>
    </div>
  );

  const chip = (at, bg, border, color, children)=>(
    <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:7, padding:'5px 13px', background:bg, border:`1.5px solid ${border}`, borderRadius:100, fontSize:13, fontWeight:700, color, opacity:clamp((t-at)/0.4,0,1), transform:`scale(${lerp(0.7,1,Easing.easeOutBack(clamp((t-at)/0.45,0,1)))})`}}>{children}</span>
  );

  const puenteP = clamp((t-T.puente)/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:96,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:56,fontWeight:800,letterSpacing:'-0.035em',color:'#0F172A',margin:'16px 0 0',lineHeight:1.05}}>
          Cuatro ideas. <span className="grad-text">Una plataforma.</span>
        </h2>
      </div>

      <div style={{position:'absolute',top:296,left:150,right:150,display:'grid',gridTemplateColumns:'1fr 1fr',gap:22}}>
        {card(T.c1, '#0085FF', icons.inbox, '01', 'Todo entra solo',
          <div style={{display:'flex', gap:9, flexWrap:'wrap'}}>
            {chip(T.n129, 'rgba(0,133,255,0.08)', 'rgba(0,133,255,0.35)', '#0066CC', <><b style={{fontSize:15}}>{n129}</b>&nbsp;facturas · un café</>)}
            {chip(T.n30, 'rgba(0,133,255,0.08)', 'rgba(0,133,255,0.35)', '#0066CC', <>banco en <b style={{fontSize:15}}>30 s</b></>)}
            {chip(T.palabra, 'rgba(16,185,129,0.10)', 'rgba(16,185,129,0.45)', '#059669', <>✓ siempre con tu última palabra</>)}
          </div>
        )}
        {card(T.c2, '#10B981', icons.motor, '02', 'Un solo motor',
          <div>
            <div style={{fontSize:16.5, color:'#475569', lineHeight:1.45}}>Cada dato se teclea <b style={{color:'#0F172A'}}>una vez</b> y viaja a todas partes.</div>
            {/* pulso viajero: dato → factura/asiento/ticket */}
            <div style={{display:'flex', alignItems:'center', gap:8, marginTop:10, position:'relative'}}>
              {['dato','factura','asiento','IVA'].map((s,i)=>{
                const litP = clamp((t-(T.viaje+i*0.5))/0.35, 0, 1);
                return (
                  <React.Fragment key={s}>
                    {i>0 && <span style={{width:26, height:2, background:`linear-gradient(90deg, #10B981${Math.round(litP*99)}, #E2E8F0)`, borderRadius:2}}/>}
                    <span className="f-mono" style={{fontSize:11.5, fontWeight:700, padding:'4px 11px', borderRadius:100, background: litP>0.5?'rgba(16,185,129,0.12)':'#F1F5F9', border:`1.5px solid ${litP>0.5?'rgba(16,185,129,0.5)':'#E2E8F0'}`, color: litP>0.5?'#059669':'#94A3B8', transform:`scale(${1+0.08*Math.sin(litP*Math.PI)})`}}>{s}</span>
                  </React.Fragment>
                );
              })}
            </div>
          </div>
        )}
        {card(T.c3, '#8B5CF6', icons.ia, '03', 'IA en cada ventana',
          <div style={{display:'flex', gap:9, flexWrap:'wrap', alignItems:'center'}}>
            {chip(T.n1840, 'rgba(139,92,246,0.09)', 'rgba(139,92,246,0.4)', '#6D28D9', <><b style={{fontSize:15}}>{n1840.toLocaleString('es-ES')} €</b>&nbsp;reclamados por tu agente, él solo</>)}
            {chip(T.llaves, 'rgba(139,92,246,0.09)', 'rgba(139,92,246,0.4)', '#6D28D9', <>🔑 con tus permisos y tus llaves</>)}
          </div>
        )}
        {card(T.c4, '#F59E0B', icons.flex, '04', 'A medida, con la base hecha',
          <div style={{display:'flex', alignItems:'flex-end', gap:14}}>
            <div style={{flex:1, fontSize:16.5, color:'#475569', lineHeight:1.45}}>Montas lo tuyo encima<b style={{color:'#0F172A'}}> sin programar</b>…</div>
            {/* mini-stack: base + capa producto que encaja */}
            <div style={{width:150, position:'relative', height:64, flexShrink:0}}>
              <div style={{position:'absolute', bottom:0, left:0, right:0, height:26, background:'linear-gradient(135deg,#0085FF,#0066CC)', borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center'}}>
                <span className="f-mono" style={{fontSize:8.5, fontWeight:800, color:'#fff', letterSpacing:'1px'}}>BASE DINAUP</span>
              </div>
              {(()=>{ const p = clamp((t-T.producto)/0.5, 0, 1); const e = Easing.easeOutBack(p); return (
                <div style={{position:'absolute', bottom:30, left:10, right:10, height:26, background:'linear-gradient(135deg,#F59E0B,#D97706)', borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*-20}px)`, boxShadow:'0 8px 18px rgba(245,158,11,0.35)'}}>
                  <span className="f-mono" style={{fontSize:8.5, fontWeight:800, color:'#fff', letterSpacing:'1px'}}>HASTA UN PRODUCTO</span>
                </div>
              ); })()}
            </div>
          </div>
        )}
      </div>

      <div style={{position:'absolute',bottom:70,left:0,right:0,textAlign:'center',opacity:clamp(puenteP*1.3,0,1),transform:`translateY(${(1-Easing.easeOutCubic(puenteP))*12}px)`}}>
        <span className="f-plex" style={{fontSize:26,fontWeight:600,color:'#334155'}}>¿Y cómo se llega hasta aquí? <span className="grad-text" style={{fontWeight:800}}>Sin saltos al vacío →</span></span>
      </div>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideResumen });