// === Flex F1 · LA PAUSA (8s · stop:true) — "¿Cómo se adapta Dinaup a TU negocio?" ===
// Slide de respiro: el deck se detiene al acabar (stop:true en app.jsx) y espera
// al presentador. Sin cues. Como t se congela en la pausa, la vida en reposo
// (respiración del titular, glow, nudge de la tecla →) va en animaciones CSS,
// no sobre t — patrón permitido para efectos secundarios.

function SlideFlexPregunta({ t }){
  // Beats pausados: 0.8 eyebrow · 1.1 línea 1 · 1.7 línea 2 · 3.5 subtítulo · 6.0 hint
  const eyeE  = Easing.easeOutCubic(clamp((t - 0.8)/0.9, 0, 1));
  const l1E   = Easing.easeOutCubic(clamp((t - 1.1)/1.1, 0, 1));
  const l2E   = Easing.easeOutCubic(clamp((t - 1.7)/1.1, 0, 1));
  const subE  = Easing.easeOutCubic(clamp((t - 3.5)/1.0, 0, 1));
  const hintE = Easing.easeOutCubic(clamp((t - 6.0)/0.8, 0, 1));

  return (
    <SlideCanvas variant="hero" particles={10}>
      {/* Glow suave tras el titular — respira aunque t esté congelado */}
      <div style={{position:'absolute', left:'50%', top:490, transform:'translate(-50%,-50%)', width:1200, height:480, opacity:l1E, pointerEvents:'none'}}>
        <div style={{width:'100%', height:'100%', background:'radial-gradient(closest-side, rgba(0,133,255,0.10), transparent 72%)', animation:'fpGlow 7s ease-in-out infinite'}}/>
      </div>

      {/* Eyebrow */}
      <div style={{position:'absolute', top:340, left:0, right:0, textAlign:'center', opacity:eyeE, transform:`translateY(${(1-eyeE)*14}px)`}}>
        <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:16, fontSize:15, fontWeight:600, letterSpacing:'4px', color:'var(--dn-primary)'}}>
          <span style={{width:26, height:2, borderRadius:2, background:'rgba(0,133,255,0.35)'}}/>
          PARA TI
          <span style={{width:26, height:2, borderRadius:2, background:'rgba(0,133,255,0.35)'}}/>
        </span>
      </div>

      {/* Titular enorme a dos líneas, con respiración sutil del bloque */}
      <div style={{position:'absolute', top:408, left:0, right:0, textAlign:'center', animation:'fpBreath 7s ease-in-out infinite'}}>
        <h1 className="f-plex" style={{fontSize:72, fontWeight:800, letterSpacing:'-0.03em', lineHeight:1.16, margin:0, color:'#0F172A'}}>
          <span style={{display:'block', opacity:l1E, transform:`translateY(${(1-l1E)*26}px)`}}>¿Cómo se adapta Dinaup</span>
          <span style={{display:'block', opacity:l2E, transform:`translateY(${(1-l2E)*26}px)`}}>a <span className="grad-text">TU</span> negocio?</span>
        </h1>
      </div>

      {/* Subtítulo sereno */}
      <div style={{position:'absolute', top:650, left:0, right:0, textAlign:'center', opacity:subE, transform:`translateY(${(1-subE)*12}px)`}}>
        <div className="f-plex" style={{fontSize:26, fontWeight:400, color:'#64748B', letterSpacing:'-0.01em', lineHeight:1.5, maxWidth:940, margin:'0 auto'}}>
          Piensa en eso que solo tu empresa hace… y que ningún programa trae de serie.
        </div>
      </div>

      {/* Hint para el presentador */}
      <div style={{position:'absolute', bottom:92, left:0, right:0, textAlign:'center', opacity:hintE, transform:`translateY(${(1-hintE)*8}px)`}}>
        <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:9, fontSize:13, color:'#94A3B8', letterSpacing:'0.5px'}}>
          Pulsa
          <span style={{display:'inline-flex', alignItems:'center', justifyContent:'center', minWidth:26, height:24, padding:'0 7px', border:'1px solid #CBD5E1', borderBottom:'2px solid #CBD5E1', borderRadius:6, background:'#fff', color:'#64748B', fontSize:13, animation:'fpNudge 1.8s ease-in-out infinite'}}>→</span>
          cuando lo tengas
        </span>
      </div>

      <style>{`
        @keyframes fpBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.013)}}
        @keyframes fpGlow{0%,100%{opacity:0.65}50%{opacity:1}}
        @keyframes fpNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
      `}</style>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideFlexPregunta });