// === Escena 06 — "Lo que acabas de ver" (recapitulación + eco) ===
// Cuatro ideas con icono, sincronizadas con la voz → eco: la misma frase con la que se abrió.
// De 15.4 a 27.1 la voz añade la advertencia del enlace personal SIN apoyo en pantalla, y es
// deliberado: escribirla sería transcribir la locución, que es lo único que la pantalla no debe
// hacer (CREAR-PRESENTACIONES.md §2, el reparto voz/pantalla). La recapitulación sostiene el plano.
function EscenaSC06({ t }){
  // LOCUCIÓN (audio/escena-06.mp3): cuatro cosas → sale de la ficha con los datos → se firma
  // desde el móvil → una cadena de pruebas → vuelve a tu empresa → [advertencia solo hablada] →
  // ECO.
  const T = {
    cuatro:0.35,     // "Cuatro cosas"
    r1:1.88,         // "Sale de la ficha con los datos"
    r2:4.46,         // "Se firma desde el móvil"
    r3:9.29,         // "una cadena de pruebas"
    r4:12.52,        // "vuelve a tu empresa"
    eco1:27.12,      // "Sale de tu ficha"
    eco2:30.27,      // "Y cualquiera puede comprobarlo"
  };

  const IDEAS = [
    { n:'Sale de la ficha, ya relleno',  start:T.r1, col:'#0085FF', d:'M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z M14 3v5h5' },
    { n:'Se firma en el móvil',          start:T.r2, col:'#00C1FF', d:'M7 2h10a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z M11 18.5h2' },
    { n:'Queda probado, y verificable',  start:T.r3, col:'#059669', d:'M12 3l7 3v6c0 4.2-2.9 7.6-7 9-4.1-1.4-7-4.8-7-9V6z M9 12l2 2 4-4' },
    { n:'Vuelve como un dato tuyo',      start:T.r4, col:'#FB8C00', d:'M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' },
  ];

  const cuP = clamp((t-T.cuatro)/0.5,0,1);
  const velo = t < T.eco1 ? 0 : clamp((t-T.eco1)/0.7,0,1)*0.95;
  const e1E = Easing.easeOutCubic(clamp((t-T.eco1)/0.6,0,1));
  const e2E = Easing.easeOutCubic(clamp((t-T.eco2)/0.6,0,1));
  const atenua = 1-velo/0.95;

  return (
    <SlideCanvas variant="hero">
      <div style={{position:'absolute', top:40, left:0, right:0, textAlign:'center', opacity:cuP*atenua, zIndex:5}}>
        <div className="f-plex" style={{fontSize:15, fontWeight:600, letterSpacing:'2.4px', color:'var(--dn-primary)'}}>DINAUP SIGN · LO QUE ACABAS DE VER</div>
        <h2 className="f-plex" style={{fontSize:44, fontWeight:700, letterSpacing:'-0.03em', margin:'14px 0 0', color:'#0F172A'}}>Cuatro cosas</h2>
      </div>

      {/* ─────────── Las cuatro ideas: sostienen el plano hasta el eco ─────────── */}
      {0 < cuP && (
        <div style={{position:'absolute', left:246, right:246, top:262, display:'grid',
                     gridTemplateColumns:'1fr 1fr', gap:34, opacity:atenua}}>
          {IDEAS.map((idea,i)=>{
            const p = clamp((t-idea.start)/0.6,0,1), pe = Easing.easeOutBack(p);
            const glow = t >= idea.start && t < idea.start+1.1 ? Math.sin((t-idea.start)/1.1*Math.PI) : 0;
            return (
              <div key={idea.n} style={{minHeight:300, display:'flex', alignItems:'center', gap:34,
                                        background:'#fff', borderRadius:24, border:`2px solid ${p < 0.5 ? '#E2E8F0' : idea.col}`,
                                        padding:'42px 46px', opacity:clamp(p*1.5,0,1),
                                        transform:`translateY(${(1-pe)*26}px)`,
                                        boxShadow:0 < glow ? `0 26px 60px ${idea.col}33` : '0 12px 30px rgba(15,23,42,0.06)'}}>
                <div style={{width:118, height:118, borderRadius:28, flexShrink:0, background:`${idea.col}18`, display:'grid', placeItems:'center'}}>
                  <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke={idea.col} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <path d={idea.d}/>
                  </svg>
                </div>
                <div>
                  <div className="f-mono" style={{fontSize:24, fontWeight:700, color:'#CBD5E1'}}>{i+1}</div>
                  <div className="f-plex" style={{fontSize:38, fontWeight:700, color:'#0F172A', marginTop:12, lineHeight:1.2, letterSpacing:'-0.02em'}}>
                    {idea.n}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* ─────────── ECO (bookend con la escena 1) ─────────── */}
      {0 < velo && <div style={{position:'absolute', inset:0, background:'#fff', opacity:velo}}/>}
      {0 < e1E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:404, textAlign:'center', fontSize:72, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:e1E, transform:`translateY(${(1-e1E)*18}px)`}}>
          Sale de tu ficha, y vuelve firmado a tu ficha.
        </div>
      )}
      {0 < e2E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:528, textAlign:'center', fontSize:72, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:e2E, transform:`translateY(${(1-e2E)*18}px)`}}>
          <span className="grad-text">Y cualquiera puede comprobarlo.</span>
        </div>
      )}
      {0 < e2E && (
        <div style={{position:'absolute', left:0, right:0, top:700, display:'flex', justifyContent:'center', opacity:e2E*0.9}}>
          {/* Cierre con el logo oficial, desde el CDN */}
          <img src="https://dinaupcdn.com/dinaup/logo-sign.svg" alt="Dinaup Sign" style={{height:58, width:'auto', display:'block'}}/>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSC06 });