// === Escena 02 — "El contexto" · ~14s (calibrar con mp3) ===
// LOCUCIÓN: "Hemos reinventado la forma de digitalizar las facturas. Con inteligencia
//   artificial... pero sin errores. ¿Y cómo puede ser eso, si la IA se equivoca? Pues esa es
//   la gracia. ¿Quieres ver cómo?"
// BEATS: fondo oscuro conceptual · titular en tres golpes con la voz · la pregunta suspendida
//   con caret · "¿Quieres ver cómo?" entra con golpe y queda como puente a las demos.
function Escena02({ t }){
  const T = {
    eyebrow:  0.0,                                           // (apoyo) eyebrow
    l1:       0.3,   // "Hemos reinventado"                    → "Reinventada."
    l2:       3.9,   // "Con inteligencia artificial"          → "Con IA."
    l3:       6.4,   // "pero sin errores"                     → "Sin errores."
    q:        9.4,   // "si la IA se equivoca"                 → pregunta
    gracia:  12.2,   // "esa es la gracia"                     → pulso
    ver:     13.9,   // "Quieres ver cómo"                     → "¿Quieres ver cómo?"
  };

  const eyeP = clamp((t-T.eyebrow)/0.5, 0, 1);
  const p1 = clamp((t-T.l1)/0.55, 0, 1), e1 = Easing.easeOutCubic(p1);
  const p2 = clamp((t-T.l2)/0.5, 0, 1),  e2 = Easing.easeOutCubic(p2);
  const p3 = clamp((t-T.l3)/0.6, 0, 1),  e3 = Easing.easeOutBack(p3);
  const qP = clamp((t-T.q)/0.6, 0, 1);
  const graciaOn = t >= T.gracia && t < T.gracia+0.9;
  const gracia = graciaOn ? Math.sin((t-T.gracia)/0.9*Math.PI) : 0;
  const verP = clamp((t-T.ver)/0.55, 0, 1), verE = Easing.easeOutBack(verP);
  const caretOn = Math.sin(t*5) > 0;
  const glow = p3 >= 1 ? 0.5 + 0.5*Math.sin((t-T.l3)*1.6) : 0;

  return (
    <SlideCanvas variant="dark-deep">
      <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center', paddingBottom:40}}>
        <div className="f-mono" style={{fontSize:13, letterSpacing:'4px', color:'rgba(148,163,184,0.9)', marginBottom:32, opacity:eyeP}}>DINAUP · ENTRADA DE FACTURAS</div>

        <div className="f-plex" style={{fontSize:70, fontWeight:800, color:'#F1F5F9', letterSpacing:'-0.035em', lineHeight:1.08, opacity:clamp(p1*1.3,0,1), transform:`translateY(${(1-e1)*24}px)`}}>
          Reinventada.
        </div>

        <div style={{display:'flex', alignItems:'baseline', gap:24, marginTop:12}}>
          <span className="f-plex" style={{fontSize:52, fontWeight:700, color:'rgba(226,232,240,0.92)', letterSpacing:'-0.03em', opacity:clamp(p2*1.3,0,1), transform:`translateY(${(1-e2)*18}px)`, display:'inline-block'}}>Con IA.</span>
          <span className="grad-text f-plex" style={{fontSize:52, fontWeight:800, letterSpacing:'-0.03em', opacity:clamp(p3*1.3,0,1), transform:`translateY(${(1-e3)*-16}px) scale(${lerp(0.8,1,e3)})`, display:'inline-block', filter:`drop-shadow(0 0 ${14+glow*10}px rgba(0,133,255,${0.35+glow*0.2}))`}}>Sin errores.</span>
        </div>

        {qP > 0 && (
          <div className="f-mono" style={{marginTop:58, fontSize:20, color:'rgba(148,163,184,0.95)', opacity:clamp(qP*1.3,0,1)*(1-verP*0.55), transform:`translateY(${(1-Easing.easeOutCubic(qP))*14}px) scale(${graciaOn?1+gracia*0.05:1})`, textShadow: graciaOn?`0 0 ${gracia*18}px rgba(0,133,255,0.6)`:'none'}}>
            ¿y si la IA se equivoca?{caretOn && verP === 0 && <span style={{color:'#0085FF'}}>▌</span>}
          </div>
        )}

        {verP > 0 && (
          <div className="f-plex" style={{marginTop:40, fontSize:46, fontWeight:800, color:'#fff', letterSpacing:'-0.02em', opacity:clamp(verP*1.3,0,1), transform:`translateY(${(1-verE)*22}px) scale(${lerp(0.85,1,verE)})`}}>
            ¿Quieres ver <span className="grad-text">cómo</span>?
          </div>
        )}
      </div>

    </SlideCanvas>
  );
}
Object.assign(window, { Escena02 });