// === Flex F1 · EL RESPIRO — "¿Cómo se adapta Dinaup a TU negocio?" ===
// Slide de introspección que FLUYE (sin stop): un beat para que el espectador
// piense en "eso que solo su empresa hace" antes del Acto 2. La vida en reposo
// (respiración del titular, glow) va en animaciones CSS, no sobre t.

function SlideFlexPregunta({ t }){
  // Beats sobre tiempo real de audio (escena 16):
  // 5.38 eyebrow ("la tuya") · 6.68 línea 1 ("Piensa en eso…") · 7.1 línea 2 ("solo tu empresa")
  // · 9.39 subtítulo ("…apañando con un Excel")
  const eyeE  = Easing.easeOutCubic(clamp((t - 5.38)/0.9, 0, 1));
  const l1E   = Easing.easeOutCubic(clamp((t - 6.68)/1.1, 0, 1));
  const l2E   = Easing.easeOutCubic(clamp((t - 7.1)/1.1, 0, 1));
  const subE  = Easing.easeOutCubic(clamp((t - 9.39)/1.0, 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>

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

Object.assign(window, { SlideFlexPregunta });