// === Te acompañamos (12s) — penúltima diapositiva: "¿y quién me ayuda con esto?" ===
// Hero claro (coherente con Resumen y Cierre). Titular + dos cards grandes que
// entran sincronizadas con SocialCaption (soporte propio ~3.2, red de partners
// ~6.4) y un beat final centrado. Ritmo pausado, sin ráfagas.

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

  const cards = [
    {
      color:'#0085FF',
      title:'Soporte de Dinaup',
      sub:'El equipo que construye el producto, contigo: te acompañamos desde el primer día.',
      start:3.2,
      icon: (
        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">
          <path d="M4 13 C4 7.5 7.6 4 12 4 C16.4 4 20 7.5 20 13" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          <rect x="3" y="13" width="4.2" height="6.4" rx="2.1" stroke="#fff" strokeWidth="1.8"/>
          <rect x="16.8" y="13" width="4.2" height="6.4" rx="2.1" stroke="#fff" strokeWidth="1.8"/>
          <path d="M20 19.4 C20 21 18.6 22 16.6 22 H14" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      color:'#56E16A',
      title:'Red de partners',
      sub:'Implantan, personalizan con Flex y te acompañan en el día a día, cerca de ti.',
      start:6.4,
      icon: (
        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">
          <circle cx="7.5" cy="7.5" r="3" stroke="#fff" strokeWidth="1.8"/>
          <circle cx="16.5" cy="7.5" r="3" stroke="#fff" strokeWidth="1.8"/>
          <path d="M2.5 19 C2.5 15.5 4.6 13.2 7.5 13.2 C9.1 13.2 10.4 13.9 11.3 15" stroke="#fff" strokeWidth="1.8" strokeLinecap="round"/>
          <path d="M21.5 19 C21.5 15.5 19.4 13.2 16.5 13.2 C14.9 13.2 13.6 13.9 12.7 15" stroke="#fff" strokeWidth="1.8" strokeLinecap="round"/>
          <path d="M9.6 16.6 L11.4 18.4 L14.4 15" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
  ];

  const beatE = Easing.easeOutCubic(clamp((t-9.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:132,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'}}>PARA PONERLO EN MARCHA</div>
        <h2 className="f-plex" style={{fontSize:58,fontWeight:700,letterSpacing:'-0.035em',color:'#0F172A',margin:'18px 0 0',lineHeight:1.06}}>
          No vas a estar <span className="grad-text">solo.</span>
        </h2>
      </div>

      <div style={{position:'absolute',top:400,left:220,right:220,display:'grid',gridTemplateColumns:'1fr 1fr',gap:36}}>
        {cards.map((c,i)=>{
          const inE = Easing.easeOutCubic(clamp((t-c.start)/0.7, 0, 1));
          return (
            <div key={i} style={{
              position:'relative',
              display:'flex',flexDirection:'column',gap:20,
              padding:'40px 38px',background:'#fff',
              border:'1px solid #E2E8F0',borderRadius:20,
              boxShadow:`0 16px 36px ${c.color}18, 0 4px 12px rgba(15,23,42,0.05)`,
              opacity:inE,transform:`translateY(${(1-inE)*24}px)`,
            }}>
              <div style={{width:84,height:84,borderRadius:18,background:`linear-gradient(135deg, ${c.color}, ${c.color}99)`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,boxShadow:`0 10px 24px ${c.color}40`}}>{c.icon}</div>
              <div>
                <div className="f-plex" style={{fontSize:30,fontWeight:700,color:'#0F172A',letterSpacing:'-0.02em',lineHeight:1.15,marginBottom:12}}>{c.title}</div>
                <div className="f-plex" style={{fontSize:19,color:'#475569',lineHeight:1.55}}>{c.sub}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{position:'absolute',bottom:112,left:0,right:0,textAlign:'center',opacity:beatE,transform:`translateY(${(1-beatE)*10}px)`}}>
        <div className="f-plex" style={{fontSize:24,fontWeight:500,color:'#334155'}}>
          Dinaup y sus partners, <span className="grad-text" style={{fontWeight:700}}>contigo.</span>
        </div>
      </div>

      <SocialCaption t={t} cues={CAPTIONS.slide_soporte}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideSoporte });