// === Escena 05 — "Paso 5 · Lo aceptas" (cierre del círculo) ===
// El aviso de documento firmado, la comprobación de los dos entregables y el botón Aceptar, que
// es lo que hace que el programa dé por firmado ese documento para esa ficha.
// OJO: este paso se está terminando en otra sesión. Los únicos literales que se pintan son los
// dos que están decididos —el aviso «Documento firmado» y el botón «Aceptar»—; el resto de la
// escena es comportamiento ya verificado (estado, adjuntos, la ficha deja de reclamar).
function EscenaSF05({ t }){
  // LOCUCIÓN (audio/escena-05.mp3): te salta un aviso, documento firmado → lo abres → el firmado y
  // su dossier de pruebas → la hora y la huella → compruebas que es lo que esperabas → pulsas
  // aceptar → cierra el círculo → da por firmado ese documento → la ficha deja de reclamarlo →
  // guardados con la solicitud → salen en tus informes → acepta comunicaciones comerciales → ya es
  // un dato tuyo → repasemos el circuito.
  const T = {
    aviso:0.35,      // "Te salta un aviso"
    firmado:1.39,    // "documento firmado"
    abres:3.04,      // "Lo abres"
    dossier:5.92,    // "su dossier de pruebas"
    huella:7.30,     // "la hora y la huella"
    compruebas:10.62,// "compruebas que es lo que esperabas"
    aceptar:12.90,   // "pulsas aceptar"
    circulo:16.30,   // "cierra el círculo"
    porfirmado:19.30,// "da por firmado ese documento"
    reclamar:22.32,  // "la ficha deja de reclamarlo"
    solicitud:26.60, // "guardados con la solicitud"
    informes:28.86,  // "salen en tus informes"
    comercial:33.44, // "acepta comunicaciones comerciales"
    dato:35.72,      // "ya es un dato tuyo"
    salida:39.22,    // "Repasemos el circuito entero"
  };

  const avP = clamp((t-T.aviso)/0.5,0,1), avE = Easing.easeOutBack(avP);
  const avOut = clamp((t-T.abres)/0.5,0,1);
  const abP = clamp((t-T.abres)/0.7,0,1), abE = Easing.easeOutCubic(abP);
  const doP = clamp((t-T.dossier)/0.6,0,1);
  const huP = clamp((t-T.huella)/0.6,0,1);
  const coP = clamp((t-T.compruebas)/0.5,0,1);
  const acP = clamp((t-T.aceptar)/0.35,0,1);
  const acPulse = t >= T.aceptar && t < T.aceptar+1.1 ? Math.sin((t-T.aceptar)/1.1*Math.PI) : 0;
  const ciP = Easing.easeInOutCubic(clamp((t-T.circulo)/1.5,0,1));
  const pfP = clamp((t-T.porfirmado)/0.6,0,1), pfE = Easing.easeOutCubic(pfP);
  const rcP = clamp((t-T.reclamar)/0.6,0,1);
  const soP = clamp((t-T.solicitud)/0.6,0,1);
  const inP = clamp((t-T.informes)/0.5,0,1);
  const cmP = clamp((t-T.comercial)/0.6,0,1), cmE = Easing.easeOutBack(cmP);
  const daP = clamp((t-T.dato)/0.5,0,1);
  const salE = Easing.easeOutCubic(clamp((t-T.salida)/0.6,0,1));

  return (
    <SlideCanvas variant="promise">
      <DemoHeader t={t} eyebrow="TUTORIAL · PASO 5" color="#059669"
                  title={<span>Lo compruebas y lo aceptas</span>}/>
      <PasosSign t={t} activo={5}/>

      {/* ─────────── El aviso que te salta ─────────── */}
      {0 < avP && avOut < 1 && (
        <div style={{position:'absolute', left:0, right:0, top:296, display:'flex', justifyContent:'center',
                     opacity:avP*(1-avOut), transform:`translateY(${(1-avE)*-18 - avOut*20}px) scale(${lerp(1,0.9,avOut)})`}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:22, padding:'28px 48px', borderRadius:20,
                       background:'#fff', border:'2px solid #A7F3D0', boxShadow:'0 28px 66px rgba(16,185,129,0.24)'}}>
            <span style={{width:66, height:66, borderRadius:99, background:'rgba(16,185,129,0.14)', display:'grid', placeItems:'center'}}>
              <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12.5 L10 17 L19 7" strokeDasharray="24" strokeDashoffset={24*(1-clamp((t-T.firmado)/0.5,0,1))}/>
              </svg>
            </span>
            <div style={{lineHeight:1.3}}>
              <div className="f-plex" style={{fontSize:34, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em'}}>Documento firmado</div>
              <div className="f-plex" style={{fontSize:22, color:'#64748B', marginTop:7}}>Contrato de servicio · Laura Ortega Pinto</div>
            </div>
          </div>
        </div>
      )}

      {/* ─────────── Lo que compruebas antes de aceptar ─────────── */}
      {0 < abP && (
        <div style={{position:'absolute', left:120, top:262, width:840, opacity:abE,
                     transform:`translateY(${(1-abE)*22}px)`}}>
          <div style={{background:'#fff', borderRadius:20, border:'1px solid #E2E8F0', boxShadow:'0 28px 68px rgba(15,23,42,0.12)', overflow:'hidden'}}>
            <div style={{padding:'22px 30px', borderBottom:'1px solid #EEF2F6', background:'#F8FAFC'}}>
              <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>Contrato de servicio</span>
              <span className="f-plex" style={{fontSize:18, color:'#94A3B8'}}> · firmado el 13/08/2026</span>
            </div>
            <div style={{padding:'26px 30px 30px'}}>
              {/* Los dos entregables */}
              <div style={{display:'flex', gap:18}}>
                {[{n:'firmado.pdf', s:'el documento con su certificado', col:'#0085FF'},
                  {n:'dossier.pdf', s:'la cronología y las pruebas',     col:'#059669'}].map((f,i)=>{
                  const p = clamp((t-T.dossier-i*0.3)/0.5,0,1);
                  return (
                    <div key={f.n} style={{flex:1, display:'flex', alignItems:'center', gap:16, padding:'20px 22px', borderRadius:14,
                                           border:`2px solid ${f.col}44`, background:`${f.col}0D`, opacity:p,
                                           transform:`translateY(${(1-Easing.easeOutBack(p))*14}px)`}}>
                      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke={f.col} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/>
                      </svg>
                      <div style={{lineHeight:1.32}}>
                        <div className="f-mono" style={{fontSize:21, fontWeight:600, color:'#0F172A'}}>{f.n}</div>
                        <div className="f-plex" style={{fontSize:18, color:'#94A3B8'}}>{f.s}</div>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* La hora y la huella de cada firma */}
              {0 < huP && (
                <div style={{marginTop:24, opacity:huP}}>
                  {[['Laura Ortega Pinto','13/08 · 11.24','5e28 b6f1 30dc 9a74']].map(([n,h,hu])=>(
                    <div key={n} style={{display:'grid', gridTemplateColumns:'1fr 190px 300px', alignItems:'center', gap:18,
                                         height:82, padding:'0 20px', borderRadius:12, background:'#F8FAFC', border:'1px solid #EEF2F6'}}>
                      <span className="f-plex" style={{fontSize:21, fontWeight:600, color:'#0F172A'}}>{n}</span>
                      <span className="f-mono" style={{fontSize:19, color:'#64748B'}}>{h}</span>
                      <span className="f-mono" style={{fontSize:19, color:'#0066CC', letterSpacing:'0.05em'}}>{hu}</span>
                    </div>
                  ))}
                </div>
              )}

              {0 < coP && (
                <div className="f-plex" style={{fontSize:22, color:'#64748B', marginTop:22, opacity:coP}}>
                  Lo miras, compruebas que es lo que esperabas…
                </div>
              )}

              {/* El botón que cierra el círculo */}
              <div style={{marginTop:24, padding:'20px 0', borderRadius:14, textAlign:'center',
                           background:0 < acP ? '#059669' : '#CBD5E1',
                           boxShadow:0 < acP ? `0 18px 44px rgba(5,150,105,${0.3+acPulse*0.3})` : 'none',
                           transform:`scale(${1-acP*0.02+acPulse*0.02})`}}>
                <span className="f-plex" style={{fontSize:26, fontWeight:700, color:'#fff'}}>Aceptar</span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ─────────── El círculo que se cierra ─────────── */}
      {0 < ciP && (
        <div style={{position:'absolute', left:1010, top:280, width:790}}>
          <div style={{display:'flex', alignItems:'center', gap:26}}>
            <svg width="96" height="96" viewBox="0 0 96 96" fill="none">
              <circle cx="48" cy="48" r="40" stroke="#E2E8F0" strokeWidth="7"/>
              <circle cx="48" cy="48" r="40" stroke="#059669" strokeWidth="7" strokeLinecap="round"
                      strokeDasharray="251" strokeDashoffset={251*(1-ciP)} transform="rotate(-90 48 48)"/>
              {0.98 <= ciP && (
                <path d="M32 49 L43 60 L65 36" stroke="#059669" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round"/>
              )}
            </svg>
            <div className="f-plex" style={{fontSize:40, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', lineHeight:1.2}}>
              El círculo se cierra
            </div>
          </div>

          {/* La ficha deja de reclamarlo */}
          {0 < pfP && (
            <div style={{marginTop:34, opacity:pfP, transform:`translateY(${(1-pfE)*16}px)`}}>
              <div className="f-plex" style={{fontSize:19, fontWeight:700, letterSpacing:'2.2px', color:'#94A3B8'}}>EN LA FICHA DE LAURA</div>
              <div style={{marginTop:16, background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                           boxShadow:'0 24px 58px rgba(15,23,42,0.10)', padding:'22px 26px 20px'}}>
                {/* El aviso naranja se retira */}
                <div style={{display:'flex', alignItems:'center', gap:14, padding:'15px 22px', borderRadius:12,
                             background:'#FFF7ED', border:'2px solid #FED7AA',
                             opacity:1-rcP, height:0 < rcP ? lerp(56,0,rcP) : 56, overflow:'hidden',
                             marginBottom:0 < rcP ? lerp(16,0,rcP) : 16}}>
                  <span className="f-plex" style={{fontSize:20, fontWeight:600, color:'#9A3412', whiteSpace:'nowrap'}}>Le falta 1 documento requerido</span>
                </div>

                <div style={{display:'grid', gridTemplateColumns:'1fr 200px', alignItems:'center', gap:18, minHeight:86,
                             padding:'0 18px', borderRadius:12,
                             background:0 < rcP ? 'rgba(16,185,129,0.07)' : 'transparent',
                             border:`2px solid ${0 < rcP ? 'rgba(16,185,129,0.3)' : '#EEF2F6'}`}}>
                  <div style={{lineHeight:1.32}}>
                    <div className="f-plex" style={{fontSize:22, fontWeight:600, color:'#0F172A'}}>Contrato de servicio</div>
                    <div className="f-plex" style={{fontSize:18, color:0 < rcP ? '#059669' : '#94A3B8'}}>
                      {0 < rcP ? 'Firmado el 13/08/2026' : 'Enviado, pendiente de firma'}
                    </div>
                  </div>
                  <span className="f-plex" style={{justifySelf:'end', padding:'10px 20px', borderRadius:99, fontSize:18, fontWeight:600,
                        color:0 < rcP ? '#059669' : '#C2410C',
                        background:0 < rcP ? 'rgba(16,185,129,0.12)' : '#FFF7ED',
                        border:`1px solid ${0 < rcP ? 'rgba(16,185,129,0.35)' : '#FED7AA'}`}}>
                    {0 < rcP ? 'Completado' : 'Pendiente'}
                  </span>
                </div>

                {/* Los adjuntos y dónde salen */}
                {0 < soP && (
                  <div style={{display:'flex', alignItems:'center', gap:10, marginTop:16, flexWrap:'wrap', opacity:soP}}>
                    {['firmado.pdf','dossier.pdf'].map((a,k)=>(
                      <span key={a} className="f-mono" style={{fontSize:16, padding:'8px 14px', borderRadius:8,
                            background:'rgba(0,133,255,0.09)', color:'#0066CC', border:'1px solid rgba(0,133,255,0.22)',
                            opacity:clamp((t-T.solicitud-k*0.2)/0.4,0,1)}}>{a}</span>
                    ))}
                    {0 < inP && ['listados','informes','búsquedas'].map((s,k)=>(
                      <span key={s} className="f-plex" style={{fontSize:16, padding:'8px 14px', borderRadius:99,
                            background:'#F1F5F9', color:'#64748B', border:'1px solid #E2E8F0',
                            opacity:clamp((t-T.informes-k*0.14)/0.35,0,1)}}>{s}</span>
                    ))}
                  </div>
                )}

                {/* Y el dato que traía el documento */}
                {0 < cmP && (
                  <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:18, marginTop:18,
                               padding:'18px 22px', borderRadius:12, background:'#F8FAFC', border:'2px solid #E2E8F0',
                               opacity:cmP, transform:`translateY(${(1-cmE)*12}px)`}}>
                    <span className="f-plex" style={{fontSize:21, color:'#334155'}}>Comunicaciones comerciales</span>
                    <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#059669',
                          padding:'7px 20px', borderRadius:99, background:'rgba(16,185,129,0.12)'}}>Sí</span>
                  </div>
                )}
                {0 < daP && (
                  <div className="f-plex" style={{fontSize:21, fontWeight:600, color:'#059669', marginTop:14, opacity:daP}}>
                    Ya es un dato tuyo, no un papel en una carpeta.
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      )}

      {0 < salE && (
        <div className="f-plex" style={{position:'absolute', left:120, top:1000, width:840, textAlign:'center', fontSize:34, fontWeight:500,
                                        color:'#64748B', opacity:salE, transform:`translateY(${(1-salE)*12}px)`}}>
          Repasemos el circuito entero.
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSF05 });