// === Te acompañamos — el cambio en 3 pasos + red + coro social + beat Verifactu ===
// (rehecha premium · audio real 45.8s — cada pieza entra cuando la voz la nombra)
// «tres pasos» → riel con conectores que se dibujan · «no vas solo» → equipo + partners ·
// «como el minigolf…» → coro de casos · «Verifactu» → banda seria que vira a verde.
function SlideSoporte({ t }){
  const T = {
    head:0.0, riel:5.46,
    p1:9.24, p2:11.03, p3:13.77,
    solo:16.75, equipo:19.45, red:22.48,
    coro:[25.37, 26.81, 29.14],
    veri:34.04, calendario:37.79, cumples:40.65, puente:43.10,
  };
  const headerE = Easing.easeOutCubic(clamp((t-T.head)/0.6, 0, 1));
  const S = { stroke:'currentColor', strokeWidth:1.9, strokeLinecap:'round', strokeLinejoin:'round', fill:'none' };
  const PASOS = [
    { at:T.p1, color:'#0085FF', title:'Importamos tus datos', sub:'clientes, artículos, saldos — lo tuyo', icon:<svg width="22" height="22" viewBox="0 0 24 24" style={{color:'#0085FF'}}><ellipse cx="12" cy="6" rx="7" ry="2.6" {...S}/><path d="M5 6v6c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6V6M5 12v6c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6v-6" {...S}/></svg> },
    { at:T.p2, color:'#8B5CF6', title:'Un partner lo configura', sub:'tu día a día, montado contigo', icon:<svg width="22" height="22" viewBox="0 0 24 24" style={{color:'#8B5CF6'}}><circle cx="9" cy="8" r="3" {...S}/><path d="M3.5 19a5.5 5.5 0 0 1 11 0" {...S}/><path d="M16 4.5a3 3 0 0 1 0 7M17.5 14.5a5.5 5.5 0 0 1 3 4.5" {...S}/></svg> },
    { at:T.p3, color:'#10B981', title:'Sigues facturando', sub:'desde el primer momento — sin parar', icon:<svg width="22" height="22" viewBox="0 0 24 24" style={{color:'#10B981'}}><path d="M6.5 3.5H17.5V20.5L15.6 19 13.8 20.5 12 19l-1.8 1.5L8.4 19l-1.9 1.5z" {...S}/><path d="M9.5 8.2h5M9.5 11.8h3.5" {...S}/></svg> },
  ];
  const CORO = ['⛳ El minigolf','🚗 Autodesguaces Alicante','🔧 Drivioon'];

  const veriP = clamp((t-T.veri)/0.6, 0, 1), veriE = Easing.easeOutBack(veriP);
  const cumple = t >= T.cumples;
  const puenteP = clamp((t-T.puente)/0.5, 0, 1);

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

      <div style={{position:'absolute',top:88,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'}}>EL CAMBIO</div>
        <h2 className="f-plex" style={{fontSize:54,fontWeight:800,letterSpacing:'-0.035em',color:'#0F172A',margin:'14px 0 0'}}>
          Sin saltos <span className="grad-text">al vacío.</span>
        </h2>
      </div>

      {/* Riel de 3 pasos con conectores que se dibujan */}
      <div style={{position:'absolute', top:264, left:170, right:170, display:'flex', alignItems:'stretch', gap:0, opacity:clamp((t-T.riel)/0.5,0,1)}}>
        {PASOS.map((p,i)=>{
          const cp = clamp((t-p.at)/0.55, 0, 1), ce = Easing.easeOutBack(cp);
          const connP = i < 2 ? clamp((t-(PASOS[i+1].at-0.9))/0.6, 0, 1) : 0;
          return (
            <React.Fragment key={i}>
              <div style={{flex:1, background:'#fff', border:`1.5px solid ${cp>0.5?p.color+'55':'#E2E8F0'}`, borderRadius:16, padding:'18px 22px', boxShadow: cp>0.5?`0 16px 40px ${p.color}1e`:'0 8px 20px rgba(15,23,42,0.05)', opacity:clamp(cp*1.3,0,1), transform:`translateY(${(1-ce)*22}px) scale(${lerp(0.93,1,ce)})`, display:'flex', alignItems:'center', gap:15}}>
                <div style={{width:46, height:46, borderRadius:12, background:p.color+'14', border:`1.5px solid ${p.color}40`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>{p.icon}</div>
                <div style={{minWidth:0}}>
                  <div style={{display:'flex', alignItems:'center', gap:8}}>
                    <span className="f-mono" style={{fontSize:11, fontWeight:800, color:p.color}}>{i+1}</span>
                    <span className="f-plex" style={{fontSize:18.5, fontWeight:800, color:'#0F172A', letterSpacing:'-0.01em'}}>{p.title}</span>
                  </div>
                  <div style={{fontSize:13.5, color:'#64748B', marginTop:3}}>{p.sub}</div>
                </div>
              </div>
              {i < 2 && (
                <div style={{width:56, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                  <svg width="40" height="16" viewBox="0 0 40 16"><path d="M2 8h32M28 2l7 6-7 6" stroke="#0085FF" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1" strokeDashoffset={1-Easing.easeInOutCubic(connP)} opacity={connP>0?0.85:0}/></svg>
                </div>
              )}
            </React.Fragment>
          );
        })}
      </div>

      {/* No vas solo: equipo + red, con el coro social debajo */}
      <div style={{position:'absolute', top:436, left:170, right:170}}>
        <div className="f-plex" style={{fontSize:15, fontWeight:700, letterSpacing:'1px', color:'#475569', marginBottom:14, opacity:clamp((t-T.solo)/0.5,0,1)}}>Y EN ESE CAMINO, NO VAS SOLO</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
          {[
            { at:T.equipo, color:'#0085FF', title:'El equipo que construye Dinaup', sub:'El producto y quien lo hace, al otro lado. En tu idioma.' },
            { at:T.red,    color:'#10B981', title:'Una red de partners que se queda', sub:'Implantan, personalizan… y siguen contigo en el día a día.' },
          ].map((c,i)=>{
            const cp = clamp((t-c.at)/0.55, 0, 1), ce = Easing.easeOutBack(cp);
            return (
              <div key={i} style={{background:'#fff', border:`1.5px solid ${cp>0.5?c.color+'50':'#E2E8F0'}`, borderRadius:16, padding:'18px 24px', boxShadow: cp>0.5?`0 16px 40px ${c.color}1c`:'0 8px 20px rgba(15,23,42,0.05)', opacity:clamp(cp*1.3,0,1), transform:`translateY(${(1-ce)*20}px)`}}>
                <div className="f-plex" style={{fontSize:20, fontWeight:800, color:'#0F172A', letterSpacing:'-0.01em'}}>{c.title}</div>
                <div style={{fontSize:14.5, color:'#64748B', marginTop:5}}>{c.sub}</div>
              </div>
            );
          })}
        </div>
        {/* Coro social: los casos ya vistos, ahora como compañía */}
        <div style={{display:'flex', gap:12, marginTop:16, justifyContent:'center'}}>
          {CORO.map((c,i)=>{
            const cp = clamp((t-T.coro[i])/0.45, 0, 1), ce = Easing.easeOutBack(cp);
            return <span key={i} className="f-plex" style={{padding:'8px 18px', background:'#fff', border:'1.5px solid #E2E8F0', borderRadius:100, fontSize:14.5, fontWeight:700, color:'#334155', boxShadow:'0 6px 16px rgba(15,23,42,0.07)', opacity:clamp(cp*1.3,0,1), transform:`scale(${lerp(0.6,1,ce)})`}}>{c}</span>;
          })}
        </div>
      </div>

      {/* Beat Verifactu: la banda seria que vira a verde */}
      {veriP > 0 && (
        <div style={{position:'absolute', left:170, right:170, bottom:96, borderRadius:16, overflow:'hidden', opacity:clamp(veriP*1.3,0,1), transform:`translateY(${(1-veriE)*24}px)`, boxShadow: cumple?'0 20px 50px rgba(16,185,129,0.25)':'0 20px 50px rgba(15,23,42,0.35)'}}>
          <div style={{display:'flex', alignItems:'center', gap:18, padding:'16px 26px', background: cumple?'linear-gradient(120deg,#065F46,#059669)':'#0F172A', transition:'background 600ms'}}>
            <div className="f-mono" style={{fontSize:13, fontWeight:800, letterSpacing:'2px', color: cumple?'#A7F3D0':'#FCD34D', border:`1.5px solid ${cumple?'rgba(167,243,208,0.5)':'rgba(252,211,77,0.5)'}`, borderRadius:8, padding:'6px 13px', flexShrink:0}}>VERIFACTU</div>
            <div style={{flex:1, minWidth:0}}>
              <div className="f-plex" style={{fontSize:17.5, fontWeight:700, color:'#fff'}}>
                {cumple ? 'Con Dinaup, cumples desde el primer ticket.' : 'Ya no es opcional: lo pide Hacienda.'}
              </div>
              <div style={{fontSize:13, color: cumple?'rgba(209,250,229,0.85)':'rgba(203,213,225,0.85)', marginTop:2, opacity:clamp((t-T.calendario)/0.5,0,1)}}>
                {cumple ? 'Sin módulos aparte, sin sustos: viene de serie.' : 'Y el calendario no lo eliges tú.'}
              </div>
            </div>
            {cumple && (()=>{ const p = clamp((t-T.cumples)/0.5, 0, 1); const e = Easing.easeOutBack(p); return (
              <div style={{width:44, height:44, borderRadius:100, background:'rgba(255,255,255,0.15)', border:'2px solid rgba(255,255,255,0.6)', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontSize:20, fontWeight:800, transform:`scale(${lerp(0.4,1,e)})`, flexShrink:0}}>✓</div>
            ); })()}
          </div>
        </div>
      )}

      <div style={{position:'absolute', bottom:40, left:0, right:0, textAlign:'center', opacity:clamp(puenteP*1.3,0,1)}}>
        <span className="f-mono" style={{fontSize:13, color:'#64748B', letterSpacing:'2px'}}>ASÍ QUE SOLO QUEDA UNA COSA →</span>
      </div>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideSoporte });