// === Escena 02 — Novedad: qué presentamos, con qué principios, y la regla que se queda ===
// La voz presenta (derechos de ejecución), nombra la conexión segura y los tres principios, y da la
// Única Cosa. Pantalla: tres tarjetas, una por principio, cada una con el problema del reto que
// resuelve, y la frase con una reserva mínima.
function EscenaDE02({ t }){
  useVoz(1);
  const G = GUION[1];
  const T = {
    integra:B(G,'tus integraciones'),      // → la línea «Integraciones conectadas de forma segura»
    segura:B(G,'de forma segura'),         // → «de forma segura» se marca
    r1:B(G,'resiliencia'),                 // → «Resiliencia»
    r2:B(G,'alta disponibilidad'),         // → «Alta disponibilidad»
    r3:B(G,'precios predecibles'),         // → «Precios predecibles»
    regla:B(G,'Y caben en una regla'),     // → las tarjetas se apagan un poco
    ganas:B(G,'Cada segundo ganas'),       // → la reserva se llena y la primera línea
    gasta:B(G,'Cada petición gasta'),      // → sale un derecho y la segunda línea
  };

  const tarjetas = [
    { t:T.r1, txt:'Resiliencia', resuelve:'Un bucle no satura la API' },
    { t:T.r2, txt:'Alta disponibilidad', resuelve:'Ninguna clave frena a otra' },
    { t:T.r3, txt:'Precios predecibles', resuelve:'Sin facturas sorpresa' },
  ];
  // La reserva mínima: se llena al decir «ganas» y suelta uno al decir «gasta».
  const llenos = clamp(Math.floor((t - T.ganas) / 0.35) + 1, 0, 5);
  const sale = clamp((t - T.gasta) / 0.9, 0, 1), regla = aparece(t, T.ganas - 0.2);

  return (
    <SlideCanvas variant="hero">
      <Cabecera t={t} eyebrow="NOVEDAD · API DE DINAUP" title={<span>Derechos de <span className="grad-text">ejecución</span></span>}/>

      <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:188, textAlign:'center', fontSize:30, fontWeight:600, color:GRIS, opacity:aparece(t, T.integra, 0.7) * (1 - 0.45 * aparece(t, T.regla, 0.8)) }}>
        Integraciones conectadas <span style={{ color: t >= T.segura ? TINTA : GRIS }}>de forma segura</span>
      </div>

      <div style={{ position:'absolute', left:0, right:0, top:290, display:'flex', gap:32, justifyContent:'center' }}>
        {tarjetas.map((c, i) => {
          const e = aparece(t, c.t, 0.6);
          const apaga = 1 - 0.45 * aparece(t, T.regla, 0.8);
          return (
            <div key={i} style={{ width:440, boxSizing:'border-box', padding:'30px 32px', background:'#fff', borderRadius:20, border:`1px solid ${BORDE}`, borderTop:`4px solid ${AZUL}`,
              boxShadow:'0 18px 44px rgba(15,23,42,0.06)', opacity:e * apaga, transform:`translateY(${(1 - e) * 24}px)` }}>
              <div className="f-plex" style={{ fontSize:32, fontWeight:700, color:TINTA, letterSpacing:'-0.02em' }}>{c.txt}</div>
              <div className="f-plex" style={{ fontSize:22, fontWeight:500, color:GRIS, marginTop:10 }}>{c.resuelve}</div>
            </div>
          );
        })}
      </div>

      {regla > 0 && (
        <div style={{ position:'absolute', left:0, right:0, top:580, display:'flex', justifyContent:'center', alignItems:'center', gap:70, opacity:regla, transform:`translateY(${(1 - regla) * 16}px)` }}>
          <div style={{ position:'relative', width:330, height:84, borderRadius:18, background:'#fff', border:`1px solid ${BORDE}`, boxShadow:'0 18px 44px rgba(15,23,42,0.06)' }}>
            {[0,1,2,3,4].map(i => {
              const lleno = i < llenos && !(i === 4 && sale > 0);
              return <div key={i} style={{ position:'absolute', left:31 + i * 60, top:24, width:36, height:36, borderRadius:100, boxSizing:'border-box', background: lleno ? AZUL : 'transparent', border: lleno ? 'none' : `2px solid ${BORDE}` }}/>;
            })}
            {sale > 0 && sale < 1 && <div style={{ position:'absolute', left:31 + 4 * 60 + sale * 260, top:24, width:36, height:36, borderRadius:100, background:AZUL, opacity:1 - sale }}/>}
          </div>
          <div>
            <div className="f-plex" style={{ fontSize:52, fontWeight:800, letterSpacing:'-0.03em', color:TINTA, opacity:aparece(t, T.ganas) }}>Cada segundo <span style={{ color:AZUL }}>ganas</span> derechos.</div>
            <div className="f-plex" style={{ fontSize:52, fontWeight:800, letterSpacing:'-0.03em', color:TINTA, marginTop:10, opacity:aparece(t, T.gasta) }}>Cada petición <span style={{ color:AZUL }}>gasta</span> uno.</div>
          </div>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaDE02 });