// === Escena 04 — "La prueba" (CLÍMAX) ===
// La cronología → cada paso guarda la huella del anterior → tocar un eslabón rompe los
// siguientes → el sello de tiempo externo → la dirección de comprobación impresa en el PDF →
// la página pública recalcula delante de quien la abre, y canta el documento tocado.
// Fondo oscuro a propósito: es la frontera del clímax, y las huellas se leen mejor.
// La página pública NO muestra IPs (dato personal): aquí solo hay fechas y huellas.
function EscenaSC04({ t }){
  // LOCUCIÓN (audio/escena-04.mp3): sirve de verdad el día en que alguien la discute → apunta
  // cada paso → cuándo se creó / se abrió / desde dónde / cuándo firmó cada persona → una huella
  // del anterior, encadenados → toca cualquier eslabón → dejan de cuadrar → una autoridad externa
  // pone la fecha → dirección de comprobación impresa dentro → quien lo reciba entra ahí →
  // recalcula la cadena entera → si alguien cambió una coma, lo dice → ÚNICA COSA.
  const T = {
    titulo:1.36,     // "sirve de verdad el día"
    duda:2.90,       // "alguien la discute"
    apunta:7.55,     // "apunta cada paso"
    e1:9.50,         // "cuándo se creó"
    e2:10.73,        // "cuándo se abrió"
    e3:11.99,        // "desde dónde"
    e4:13.29,        // "cuándo firmó cada persona"
    huella:17.38,    // "una huella del anterior"
    cadena:18.75,    // "encadenados"
    toca:20.48,      // "Toca cualquier eslabón"
    rompe:23.35,     // "dejan de cuadrar"
    sello:25.74,     // "una autoridad externa pone la fecha"
    url:29.70,       // "dirección de comprobación impresa"
    pagina:33.21,    // "Quien lo reciba entra ahí"
    recalcula:37.29, // "recalcula la cadena entera"
    coma:40.44,      // "Si alguien cambió una coma"
    unica1:43.39,    // "Sale de tu ficha"
    unica2:46.55,    // "Y cualquiera puede comprobarlo"
  };

  // La cadena real del sobre: evento, cuándo, y la huella que deja.
  const EVENTOS = [
    { n:'Sobre creado',      f:'13/08 · 09.02', h:'a41f 8c02 77be d190', start:T.e1 },
    { n:'Enlaces emitidos',  f:'13/08 · 09.02', h:'0b7d 4419 e5a3 26cf', start:T.e2 },
    { n:'Documento abierto', f:'13/08 · 11.18', h:'93c6 1d70 aa58 4e21', start:T.e3 },
    { n:'Firma registrada',  f:'13/08 · 11.24', h:'5e28 b6f1 30dc 9a74', start:T.e4 },
    { n:'Cadena cerrada',    f:'13/08 · 11.24', h:'c704 2fa9 81eb 55d3', start:T.sello-0.6 },
  ];

  const ttP = clamp((t-T.titulo)/0.6,0,1);
  const duP = clamp((t-T.duda)/0.6,0,1), duE = Easing.easeOutBack(duP);
  const duOut = clamp((t-T.apunta)/0.6,0,1);
  const apP = clamp((t-T.apunta)/0.7,0,1), apE = Easing.easeOutCubic(apP);
  const hlP = clamp((t-T.huella)/0.6,0,1);
  const cdPulse = t >= T.cadena && t < T.cadena+1.2 ? Math.sin((t-T.cadena)/1.2*Math.PI) : 0;

  // La manipulación: se enseña y se retira antes del sello (era una demostración)
  const manipulado = t >= T.toca && t < T.sello-0.35;
  const tocaP = clamp((t-T.toca)/0.45,0,1)*clamp((T.sello-0.35-t)/0.4,0,1);
  const rompeP = clamp((t-T.rompe)/0.5,0,1)*clamp((T.sello-0.35-t)/0.4,0,1);

  const seP = clamp((t-T.sello)/0.6,0,1), seE = Easing.easeOutBack(seP);
  const urP = clamp((t-T.url)/0.7,0,1), urE = Easing.easeOutCubic(urP);
  const urlGlow = t >= T.url+0.7 && t < T.url+2.0 ? Math.sin((t-T.url-0.7)/1.3*Math.PI) : 0;
  const pgP = clamp((t-T.pagina)/0.7,0,1), pgE = Easing.easeOutCubic(pgP);
  const scan = Easing.easeInOutCubic(clamp((t-T.recalcula)/2.0,0,1));
  const roto = t >= T.coma;
  const roP = clamp((t-T.coma)/0.5,0,1);

  const veloU = t < T.unica1 ? 0 : clamp((t-T.unica1)/0.7,0,1)*0.94;
  const u1E = Easing.easeOutCubic(clamp((t-T.unica1)/0.6,0,1));
  const u2E = Easing.easeOutCubic(clamp((t-T.unica2)/0.6,0,1));
  const atenua = 1-veloU/0.94;

  return (
    <SlideCanvas variant="dark-deep">
      <div style={{position:'absolute', top:40, left:0, right:0, textAlign:'center', opacity:ttP*atenua, zIndex:5}}>
        <div className="f-plex" style={{fontSize:15, fontWeight:600, letterSpacing:'2.4px', color:'#38BDF8'}}>LA PRUEBA · LO QUE QUEDA GUARDADO</div>
        <h2 className="f-plex" style={{fontSize:44, fontWeight:700, letterSpacing:'-0.03em', margin:'14px 0 0', color:'#F1F5F9'}}>
          Una firma sirve el día en que alguien la discute
        </h2>
      </div>

      {/* ─────────── El documento en duda (se retira cuando entra la cadena) ─────────── */}
      {0 < duP && duOut < 1 && (
        <div style={{position:'absolute', left:0, right:0, top:300, display:'flex', justifyContent:'center',
                     opacity:duP*(1-duOut)*atenua, transform:`translateY(${(1-duE)*22 - duOut*26}px)`}}>
          <div style={{width:520, background:'#F8FAFC', borderRadius:14, padding:'44px 46px',
                       boxShadow:'0 34px 80px rgba(0,0,0,0.5)', transform:'rotate(-1.2deg)'}}>
            <div className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>Contrato de mantenimiento anual</div>
            {[94,86,90,68,88,58].map((w,k)=>(
              <div key={k} style={{height:11, borderRadius:99, background:'#E2E8F0', marginTop:16, width:w+'%'}}/>
            ))}
            <div style={{marginTop:34, display:'flex', alignItems:'center', gap:14}}>
              <svg width="120" height="46" viewBox="0 0 290 110" fill="none" style={{opacity:0.75}}>
                <path d="M8 62 C 34 18, 52 92, 78 44 S 118 8, 142 58 C 158 92, 176 30, 206 46 C 228 58, 244 36, 262 52"
                      stroke="#16222e" strokeWidth="6" strokeLinecap="round"/>
              </svg>
              <span className="f-plex" style={{fontSize:19, color:'#94A3B8'}}>Laura Ortega Pinto</span>
            </div>
          </div>
          <div style={{position:'absolute', left:'50%', top:328, transform:'translateX(-50%)',
                       display:'inline-flex', alignItems:'center', gap:14, padding:'18px 34px', borderRadius:99,
                       background:'#7F1D1D', border:'1px solid #B91C1C'}}>
            <span className="f-plex" style={{fontSize:29, fontWeight:700, color:'#FECACA'}}>«yo no firmé eso»</span>
          </div>
        </div>
      )}

      {/* ─────────── La cadena de evidencias ─────────── */}
      {0 < apP && (
        <div style={{position:'absolute', left:118, top:236, width:1060, opacity:apE*atenua,
                     transform:`translateY(${(1-apE)*24}px) translateX(${lerp(320, 0, Easing.easeInOutCubic(clamp((t-T.url)/0.9,0,1)))}px)`}}>
          <div className="f-plex" style={{fontSize:21, fontWeight:700, letterSpacing:'2.4px', color:'#64748B'}}>CADENA DE EVIDENCIAS</div>
          <div style={{marginTop:22, position:'relative'}}>
            {EVENTOS.map((e,i)=>{
              const p = clamp((t-e.start)/0.5,0,1), pe = Easing.easeOutCubic(p);
              // Un eslabón se toca (el 2.º); los posteriores dejan de cuadrar en cascada
              const esTocado = manipulado && i === 1;
              const esRoto = manipulado && 1 < i && rompeP > (i-2)*0.22;
              const col = esTocado ? '#FBBF24' : (esRoto ? '#F87171' : '#34D399');
              return (
                <div key={e.n} style={{position:'relative', display:'grid', gridTemplateColumns:'74px 1fr 270px 340px', alignItems:'center', gap:20,
                                       height:114, opacity:p, transform:`translateX(${(1-pe)*-22}px)`}}>
                  {/* Conector: se DIBUJA de un eslabón al siguiente */}
                  {0 < i && (
                    <svg width="74" height="114" viewBox="0 0 74 114" fill="none" style={{position:'absolute', left:0, top:-114}}>
                      <path d="M37 26 V 88" stroke={col} strokeWidth="3.4" strokeLinecap="round"
                            strokeDasharray="62" strokeDashoffset={62*(1-clamp((t-T.huella-i*0.16)/0.5,0,1))}/>
                      <path d="M30 80 L37 88 L44 80" stroke={col} strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"
                            opacity={clamp((t-T.huella-i*0.16-0.35)/0.3,0,1)}/>
                    </svg>
                  )}
                  <div style={{width:56, height:56, borderRadius:99, display:'grid', placeItems:'center', justifySelf:'center',
                               background:`${col}22`, border:`2px solid ${col}`,
                               boxShadow:0 < cdPulse ? `0 0 ${cdPulse*30}px ${col}88` : 'none'}}>
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={col} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                      {esRoto ? <><path d="M7 7 L17 17"/><path d="M17 7 L7 17"/></>
                              : (esTocado ? <><path d="M12 8v5"/><path d="M12 17h.01"/></>
                                          : <path d="M5 12.5 L10 17 L19 7"/>)}
                    </svg>
                  </div>
                  <span className="f-plex" style={{fontSize:30, fontWeight:600, color:esRoto || esTocado ? col : '#E2E8F0'}}>{e.n}</span>
                  <span className="f-mono" style={{fontSize:25, color:'#94A3B8'}}>{e.f}</span>
                  <span className="f-mono" style={{fontSize:24, letterSpacing:'0.06em', opacity:hlP,
                        color:esTocado ? '#FBBF24' : (esRoto ? '#F87171' : '#7DD3FC')}}>
                    {esTocado ? 'ff21 9d04 6c17 b8e2' : e.h}
                  </span>
                </div>
              );
            })}
          </div>

          {/* El sello de tiempo, colgando del cierre de la cadena */}
          {0 < seP && (
            <div style={{display:'inline-flex', alignItems:'center', gap:18, marginTop:22, marginLeft:94, padding:'22px 36px',
                         borderRadius:18, background:'rgba(56,189,248,0.10)', border:'1px solid rgba(56,189,248,0.45)',
                         opacity:seP, transform:`translateY(${(1-seE)*14}px)`}}>
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#38BDF8" strokeWidth="2.2" strokeLinecap="round">
                <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/>
              </svg>
              <div style={{lineHeight:1.35}}>
                <div className="f-plex" style={{fontSize:27, fontWeight:700, color:'#BAE6FD'}}>Sello de tiempo de una autoridad externa</div>
                <div className="f-mono" style={{fontSize:22, color:'#64748B'}}>13/08/2026 · 11.24.07 UTC</div>
              </div>
            </div>
          )}

          {/* El mensaje de la manipulación */}
          {0 < tocaP && (
            <div className="f-plex" style={{position:'absolute', left:0, top:642, fontSize:32, fontWeight:700, opacity:tocaP,
                                            color:0 < rompeP ? '#F87171' : '#FBBF24'}}>
              {0 < rompeP ? 'Y todos los siguientes dejan de cuadrar.' : 'Toca un solo eslabón…'}
            </div>
          )}
        </div>
      )}

      {/* ─────────── El PDF con su dirección de comprobación impresa ─────────── */}
      {0 < urP && (
        <div style={{position:'absolute', left:1112, top:246, width:660, opacity:urP*(1-pgP*0.85)*atenua,
                     transform:`translateY(${(1-urE)*24 - pgP*26}px)`}}>
          <div style={{background:'#fff', borderRadius:12, boxShadow:'0 30px 70px rgba(0,0,0,0.45)', padding:'34px 38px 30px'}}>
            <div className="f-plex" style={{fontSize:16, fontWeight:700, letterSpacing:'2px', color:'#94A3B8'}}>CERTIFICADO DE FIRMAS</div>
            <div className="f-plex" style={{fontSize:24, fontWeight:700, color:'#0F172A', marginTop:12}}>Contrato de mantenimiento anual</div>
            <div style={{marginTop:20}}>
              {[['Firmado por','Laura Ortega Pinto'],['Fecha y hora','13/08/2026 · 11.24'],['Referencia','F-2026-000412']].map(([k,v])=>(
                <div key={k} style={{display:'flex', justifyContent:'space-between', height:52, alignItems:'center', borderBottom:'1px solid #F1F5F9'}}>
                  <span className="f-plex" style={{fontSize:17, color:'#94A3B8'}}>{k}</span>
                  <span className="f-mono" style={{fontSize:17, fontWeight:600, color:'#0F172A'}}>{v}</span>
                </div>
              ))}
            </div>
            <div style={{marginTop:22, padding:'18px 20px', borderRadius:11, background:'#F6F9FC',
                         border:`2px solid ${0 < urlGlow ? '#0c8fce' : '#E2E8F0'}`,
                         boxShadow:0 < urlGlow ? `0 0 ${urlGlow*32}px rgba(12,143,206,0.45)` : 'none'}}>
              <div className="f-plex" style={{fontSize:15, color:'#8b99a8'}}>Comprueba este documento en</div>
              <div className="f-mono" style={{fontSize:19, fontWeight:600, color:'#0a76ac', marginTop:6}}>sign.dinaup.com/sign/verify/…</div>
            </div>
          </div>
        </div>
      )}

      {/* ─────────── La página pública de verificación ─────────── */}
      {0 < pgP && (
        <div style={{position:'absolute', left:1064, top:222, width:748, opacity:pgP*atenua,
                     transform:`translateY(${(1-pgE)*28}px)`}}>
          <div style={{background:'#fff', borderRadius:16, boxShadow:'0 36px 86px rgba(0,0,0,0.5)', overflow:'hidden'}}>
            <BrowserChrome url="sign.dinaup.com/sign/verify/8f31…" title="Verificación · Dinaup Sign"/>
            <div style={{padding:'28px 32px 34px', position:'relative'}}>
              <div className="f-plex" style={{fontSize:24, fontWeight:700, color:'#16222e'}}>Verificación de firma electrónica</div>
              <div className="f-plex" style={{fontSize:18, color:'#8b99a8', marginTop:8}}>Contrato de mantenimiento anual · F-2026-000412</div>

              <div style={{marginTop:22}}>
                {[['Huella del documento original','a41f 8c02 77be d190'],
                  ['Huella del documento firmado','5e28 b6f1 30dc 9a74'],
                  ['Hash de cierre de la cadena','c704 2fa9 81eb 55d3'],
                  ['Sello de tiempo','13/08/2026 · 11.24.07 UTC']].map(([k,v],i)=>{
                  const revisado = scan > (i+1)/4.6;
                  const mal = roto && 0 < i;
                  return (
                    <div key={k} style={{display:'flex', justifyContent:'space-between', alignItems:'center', height:66,
                                         borderBottom:'1px solid #eef2f6', paddingRight:6}}>
                      <span className="f-plex" style={{fontSize:18, color:'#566472'}}>{k}</span>
                      <span style={{display:'inline-flex', alignItems:'center', gap:12}}>
                        <span className="f-mono" style={{fontSize:18, color:mal ? '#e0413a' : '#16222e'}}>{v}</span>
                        {revisado && (
                          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={mal ? '#e0413a' : '#1f9d3a'} strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
                            {mal ? <><path d="M6 6 L18 18"/><path d="M18 6 L6 18"/></> : <path d="M5 12.5 L10 17 L19 7"/>}
                          </svg>
                        )}
                      </span>
                    </div>
                  );
                })}
              </div>

              {/* El barrido: la página recalcula la cadena entera en cada visita */}
              {0 < scan && scan < 1 && !roto && (
                <div style={{position:'absolute', left:32, right:32, top:172+scan*264, height:3, borderRadius:2,
                             background:'linear-gradient(90deg, transparent, #0c8fce, transparent)', boxShadow:'0 0 18px rgba(12,143,206,0.8)'}}/>
              )}

              <div style={{marginTop:26, padding:'22px 26px', borderRadius:14, display:'flex', alignItems:'center', gap:18,
                           background:roto ? '#fce5e4' : (0.98 <= scan ? '#e4f6e8' : '#F1F5F9'),
                           border:`2px solid ${roto ? '#e0413a' : (0.98 <= scan ? '#1f9d3a' : '#E2E8F0')}`,
                           transform:`scale(${1+roP*0.02})`}}>
                <svg width="38" height="38" viewBox="0 0 24 24" fill="none"
                     stroke={roto ? '#e0413a' : (0.98 <= scan ? '#1f9d3a' : '#94A3B8')} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                  {roto ? <><circle cx="12" cy="12" r="9"/><path d="M12 7v6"/><path d="M12 17h.01"/></>
                        : <><circle cx="12" cy="12" r="9"/><path d="M7.5 12.5 L11 16 L16.5 8.5"/></>}
                </svg>
                <span className="f-plex" style={{fontSize:24, fontWeight:700, color:roto ? '#a02a24' : (0.98 <= scan ? '#15722a' : '#64748B')}}>
                  {roto ? 'El documento no coincide con lo que se firmó'
                        : (0.98 <= scan ? 'Documento íntegro: coincide con lo que se firmó' : 'Recalculando la cadena…')}
                </span>
              </div>
            </div>
          </div>
          {roto && (
            <div className="f-plex" style={{marginTop:22, textAlign:'center', fontSize:30, fontWeight:700, color:'#FCA5A5', opacity:roP}}>
              Alguien cambió una coma. Y lo dice.
            </div>
          )}
        </div>
      )}

      {/* ─────────── LA ÚNICA COSA (prueba) ─────────── */}
      {0 < veloU && <div style={{position:'absolute', inset:0, background:'#0B1729', opacity:veloU}}/>}
      {0 < u1E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:394, textAlign:'center', fontSize:70, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#F1F5F9', opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          Sale de tu ficha, y vuelve firmado a tu ficha.
        </div>
      )}
      {0 < u2E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:516, textAlign:'center', fontSize:70, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">Y cualquiera puede comprobarlo.</span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSC04 });