// === Slide Cierre (8s) — CTA físico con URL ===

function SlideCierre({ t }){
  const logoE = Easing.easeOutCubic(clamp(t/0.8,0,1));
  const titleP = clamp((t-0.8)/0.6,0,1);
  const subP = clamp((t-1.6)/0.6,0,1);
  const ctaP = clamp((t-2.6)/0.6,0,1);
  const ctaE = Easing.easeOutBack(ctaP);

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

      <div style={{position:'absolute',top:245,left:0,right:0,display:'flex',justifyContent:'center',opacity:logoE,transform:`translateY(${(1-logoE)*30}px)`}}>
        <DinaupLogo size={78}/>
      </div>

      <div style={{position:'absolute',top:440,left:0,right:0,textAlign:'center',opacity:titleP}}>
        <h1 className="f-plex" style={{fontSize:96,fontWeight:800,letterSpacing:'-0.035em',lineHeight:1.05,margin:0,color:'#0F172A'}}>Tu turno.</h1>
      </div>

      <div style={{position:'absolute',top:590,left:0,right:0,textAlign:'center',opacity:subP,transform:`translateY(${(1-Easing.easeOutCubic(subP))*12}px)`}}>
        <div style={{fontSize:28,color:'#64748B'}}>
          Mañana a las <span className="f-mono" style={{color:'#0F172A',fontWeight:700}}>08:30</span>, esto puede ser <span style={{color:'#0F172A',fontWeight:600}}>tu empresa</span>.
        </div>
      </div>

      {/* CTA */}
      <div style={{position:'absolute',top:690,left:0,right:0,display:'flex',justifyContent:'center',gap:16,opacity:clamp(ctaP*1.3,0,1),transform:`scale(${lerp(0.85,1,ctaE)})`}}>
        <div className="f-plex" style={{display:'inline-flex',alignItems:'center',gap:10,padding:'16px 32px',background:'linear-gradient(135deg,#0085FF,#0066CC)',color:'#fff',borderRadius:14,fontSize:21,fontWeight:700,boxShadow:`0 16px ${44+Math.sin(Math.max(0,t-4)*2.5)*10}px rgba(0,133,255,${0.4+Math.sin(Math.max(0,t-4)*2.5)*0.12})`}}>
          ▶ play.dinaup.com
        </div>
        <div className="f-plex" style={{display:'inline-flex',alignItems:'center',gap:10,padding:'16px 32px',background:'#fff',color:'#0F172A',border:'1px solid #E2E8F0',borderRadius:14,fontSize:21,fontWeight:600,boxShadow:'0 8px 24px rgba(15,23,42,0.08)'}}>
          📚 doc.dinaup.com
        </div>
      </div>

      <div style={{position:'absolute',bottom:90,left:0,right:0,textAlign:'center',opacity:clamp((t-3.6)/0.6,0,1)}}>
        <div className="f-mono" style={{fontSize:14,color:'#94A3B8',letterSpacing:3,textTransform:'uppercase'}}>www.dinaup.com</div>
      </div>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideCierre });