// === Escena 05 — "Vuelve a tu ficha" ===
// Firma el último y se cierra solo → los tres entregables, con el certificado AÑADIDO DETRÁS y el
// original intacto → los tres caen en la ficha del cliente y en la sección de la empresa, así que
// salen en listados, informes y búsquedas → y la ficha avisa de lo que falta.
function EscenaSC05({ t }){
  // LOCUCIÓN (audio/escena-05.mp3): cuando firma el último se cierra solo → tres documentos →
  // el original tal cual → el firmado, ese mismo original intacto → certificado añadido detrás →
  // y el dossier → van también a la ficha del cliente → en tus informes → le falte algo por
  // firmar → nadie tiene que acordarse → ni carpetas, ni escáner, ni perseguir a nadie.
  const T = {
    ultimo:0.35,     // "Cuando firma el último"
    cierra:1.71,     // "se cierra solo"
    tres:3.72,       // "tres documentos"
    c1:5.23,         // "El original, tal cual"
    c2:8.55,         // "El firmado, que es ese mismo"
    detras:11.83,    // "certificado de firmas añadido detrás"
    c3:14.90,        // "Y el dossier"
    ficha:19.96,     // "a la ficha del cliente"
    informes:24.55,  // "en tus informes"
    falta:28.41,     // "le falte algo por firmar"
    remate:32.22,    // "Nadie tiene que acordarse"
    x1:34.16,        // "Ni carpetas"
    x2:35.15,        // "ni escáner"
    x3:36.18,        // "ni perseguir a nadie"
    salida:38.60,    // "Recojamos lo que acabas de ver"
  };

  const ulP = clamp((t-T.ultimo)/0.5,0,1);
  const ciP = clamp((t-T.cierra)/0.5,0,1), ciE = Easing.easeOutBack(ciP);
  const trP = clamp((t-T.tres)/0.6,0,1);

  // La platea se encoge y se va a la izquierda cuando entra la ficha (continuidad espacial)
  const mov = Easing.easeInOutCubic(clamp((t-T.ficha)/0.9,0,1));
  const escala = lerp(1, 0.60, mov);

  const fcP = clamp((t-T.ficha)/0.8,0,1), fcE = Easing.easeOutCubic(fcP);
  const inP = clamp((t-T.informes)/0.6,0,1);
  const faP = clamp((t-T.falta)/0.6,0,1), faE = Easing.easeOutBack(faP);
  const reP = clamp((t-T.remate)/0.6,0,1);
  const salE = Easing.easeOutCubic(clamp((t-T.salida)/0.6,0,1));

  const CARDS = [
    { k:'Original', d:'tal y como lo enviaste',     start:T.c1, col:'#64748B', bg:'#F1F5F9' },
    { k:'Firmado',  d:'el original + el certificado', start:T.c2, col:'#0085FF', bg:'rgba(0,133,255,0.09)' },
    { k:'Dossier',  d:'cronología y evidencias',    start:T.c3, col:'#059669', bg:'rgba(16,185,129,0.10)' },
  ];

  // Lo que deja de hacer falta: se va con dignidad (fade + caída), no se tacha
  const FUERA = [
    { n:'carpetas', start:T.x1, 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' },
    { n:'escáner',  start:T.x2, d:'M4 7V4h3M17 4h3v3M20 17v3h-3M7 20H4v-3M3 12h18' },
    { n:'teléfono', start:T.x3, d:'M5 4h4l2 5-2.5 1.5a12 12 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z' },
  ];

  return (
    <SlideCanvas variant="promise">
      <DemoHeader t={t} eyebrow="EL DESENLACE · VUELVE SOLO" color="#059669"
                  title={<span>Y aterriza donde ya trabajas</span>}/>

      {/* ─────────── Cierre + los tres entregables ─────────── */}
      {0 < ulP && (
        <div style={{position:'absolute', left:0, top:224, width:1920,
                     transform:`translateX(${mov*-430}px) scale(${escala})`, transformOrigin:'50% 0'}}>
          {/* Los firmantes y el sello de completado */}
          <div style={{display:'flex', justifyContent:'center', alignItems:'center', gap:26, opacity:ulP}}>
            {['Laura Ortega Pinto','Talleres Marbán, S.L.'].map((n,i)=>(
              <span key={n} style={{display:'inline-flex', alignItems:'center', gap:13, padding:'14px 26px', borderRadius:99,
                                    background:'#fff', border:'1px solid #D1FAE5', boxShadow:'0 10px 26px rgba(16,185,129,0.12)'}}>
                <svg width="26" height="26" 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.ultimo-i*0.2)/0.5,0,1))}/>
                </svg>
                <span className="f-plex" style={{fontSize:22, fontWeight:600, color:'#0F172A'}}>{n}</span>
              </span>
            ))}
            {0 < ciP && (
              <span style={{display:'inline-flex', alignItems:'center', gap:12, padding:'16px 32px', borderRadius:99,
                            background:'#059669', opacity:ciP, transform:`scale(${lerp(0.85,1,ciE)})`,
                            boxShadow:'0 16px 38px rgba(5,150,105,0.34)'}}>
                <span className="f-plex" style={{fontSize:24, fontWeight:700, color:'#fff', letterSpacing:'0.5px'}}>Completado</span>
              </span>
            )}
          </div>

          {/* Las tres descargas */}
          {0 < trP && (
            <div style={{display:'flex', justifyContent:'center', gap:34, marginTop:56}}>
              {CARDS.map(c=>{
                const p = clamp((t-c.start)/0.6,0,1), pe = Easing.easeOutBack(p);
                const esFirmado = c.k === 'Firmado';
                return (
                  <div key={c.k} style={{width:430, background:'#fff', borderRadius:20, border:`2px solid ${p < 0.5 ? '#E2E8F0' : c.col}`,
                                         boxShadow:0.5 < p ? `0 26px 60px ${c.col}26` : '0 10px 26px rgba(15,23,42,0.06)',
                                         padding:'28px 30px 30px', opacity:clamp(p*1.4,0,1),
                                         transform:`translateY(${(1-pe)*24}px)`}}>
                    <div style={{display:'flex', alignItems:'center', gap:14}}>
                      <span style={{width:52, height:52, borderRadius:14, background:c.bg, display:'grid', placeItems:'center'}}>
                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={c.col} strokeWidth="2.2" 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>
                      </span>
                      <div style={{lineHeight:1.3}}>
                        <div className="f-plex" style={{fontSize:27, fontWeight:700, color:'#0F172A'}}>{c.k}</div>
                        <div className="f-plex" style={{fontSize:18, color:'#94A3B8'}}>{c.d}</div>
                      </div>
                    </div>

                    {/* Las páginas: en el firmado, el certificado va DETRÁS y el original queda intacto */}
                    <div style={{display:'flex', gap:9, marginTop:26, alignItems:'flex-end', height:132}}>
                      {[0,1,2,3].map(k=>{
                        const esCert = esFirmado && 1 < k;
                        const vis = esCert ? clamp((t-T.detras-(k-2)*0.22)/0.5,0,1) : clamp(p*1.6,0,1);
                        if (esCert && vis <= 0) return <span key={k} style={{width:74}}/>;
                        return (
                          <span key={k} style={{width:74, height:104, borderRadius:6, opacity:vis,
                                                transform:`translateY(${(1-Easing.easeOutBack(vis))*16}px)`,
                                                background:esCert ? 'rgba(0,133,255,0.12)' : '#F8FAFC',
                                                border:`1px solid ${esCert ? '#93C5FD' : '#E2E8F0'}`,
                                                display:'grid', placeContent:'center', gap:5, padding:'0 10px'}}>
                            {[0,1,2,3].map(l=>(
                              <span key={l} style={{height:4, borderRadius:99, width:l === 3 ? 30 : 52,
                                                    background:esCert ? '#60A5FA' : '#E2E8F0'}}/>
                            ))}
                          </span>
                        );
                      })}
                    </div>
                    {esFirmado && 0 < clamp((t-T.detras)/0.6,0,1) && (
                      <div style={{display:'flex', justifyContent:'space-between', marginTop:14, opacity:clamp((t-T.detras)/0.6,0,1)}}>
                        <span className="f-plex" style={{fontSize:17, fontWeight:600, color:'#059669'}}>original intacto</span>
                        <span className="f-plex" style={{fontSize:17, fontWeight:600, color:'#0085FF'}}>certificado, detrás</span>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}

      {/* ─────────── Donde aterriza: la sección de tu empresa ─────────── */}
      {0 < fcP && (
        <div style={{position:'absolute', left:1010, top:250, width:790, opacity:fcE,
                     transform:`translateX(${(1-fcE)*70}px)`}}>
          {/* El aviso de la ficha: lo que le falta por firmar */}
          {0 < faP && (
            <div style={{display:'flex', alignItems:'center', gap:14, padding:'18px 26px', borderRadius:14, marginBottom:18,
                         background:'#FFF7ED', border:'2px solid #FED7AA', opacity:faP,
                         transform:`translateY(${(1-faE)*-12}px)`}}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#C2410C" strokeWidth="2.3" strokeLinecap="round">
                <circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><path d="M12 16.5h.01"/>
              </svg>
              <span className="f-plex" style={{fontSize:21, fontWeight:600, color:'#9A3412'}}>Le falta 1 documento requerido por firmar</span>
            </div>
          )}

          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 30px 72px rgba(15,23,42,0.13)', overflow:'hidden'}}>
            <div style={{padding:'20px 26px', borderBottom:'1px solid #EEF2F6', background:'#FBFCFE'}}>
              <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>Solicitudes de Firma</span>
              <span className="f-plex" style={{fontSize:18, color:'#94A3B8'}}> · en tu empresa</span>
            </div>
            {[['Contrato de mantenimiento anual','Laura Ortega Pinto','Completado','#059669'],
              ['Consentimiento de datos','Laura Ortega Pinto','Pendiente','#FB8C00'],
              ['Autorización de domiciliación','Marcos Ibarra Gil','Completado','#059669']].map(([tit,per,est,col],i)=>{
              const p = clamp((t-T.ficha-0.3-i*0.16)/0.5,0,1);
              return (
                <div key={tit} style={{display:'grid', gridTemplateColumns:'1fr 170px', alignItems:'center', gap:16,
                                       height:98, padding:'0 26px', borderBottom:'1px solid #F4F7FA', opacity:p,
                                       transform:`translateY(${(1-Easing.easeOutCubic(p))*10}px)`}}>
                  <div style={{lineHeight:1.34, minWidth:0}}>
                    <div className="f-plex" style={{fontSize:21, fontWeight:600, color:'#0F172A', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{tit}</div>
                    <div className="f-plex" style={{fontSize:17, color:'#94A3B8'}}>{per}</div>
                    {i === 0 && (
                      <div style={{display:'flex', gap:9, marginTop:8, opacity:clamp((t-T.ficha-0.9)/0.5,0,1)}}>
                        {['firmado.pdf','dossier.pdf'].map(a=>(
                          <span key={a} className="f-mono" style={{fontSize:15, padding:'5px 11px', borderRadius:7,
                                background:'rgba(0,133,255,0.09)', color:'#0066CC', border:'1px solid rgba(0,133,255,0.22)'}}>{a}</span>
                        ))}
                      </div>
                    )}
                  </div>
                  <span className="f-plex" style={{justifySelf:'end', padding:'9px 20px', borderRadius:99, fontSize:18, fontWeight:600,
                        color:col, background:`${col}18`, border:`1px solid ${col}44`}}>{est}</span>
                </div>
              );
            })}
          </div>

          {/* Es un dato tuyo: sale donde salen tus datos */}
          {0 < inP && (
            <div style={{display:'flex', gap:12, marginTop:22, opacity:inP}}>
              {['listados','informes','búsquedas'].map((s,i)=>{
                const p = clamp((t-T.informes-i*0.16)/0.4,0,1);
                return (
                  <span key={s} className="f-plex" style={{padding:'13px 26px', borderRadius:99, fontSize:20, fontWeight:600,
                        color:'#0F172A', background:'#fff', border:'1px solid #E2E8F0', opacity:p,
                        transform:`translateY(${(1-Easing.easeOutBack(p))*10}px)`,
                        boxShadow:'0 8px 20px rgba(15,23,42,0.05)'}}>{s}</span>
                );
              })}
            </div>
          )}
        </div>
      )}

      {/* ─────────── Lo que deja de hacer falta: se va, no se tacha ─────────── */}
      {0 < reP && (
        <div style={{position:'absolute', left:120, top:812, width:820, opacity:reP}}>
          <div className="f-plex" style={{fontSize:38, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em'}}>Nadie tiene que acordarse.</div>
          <div style={{display:'flex', gap:30, marginTop:26}}>
            {FUERA.map(f=>{
              const ida = Easing.easeInOutCubic(clamp((t-f.start)/0.7,0,1));
              return (
                <div key={f.n} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:12,
                                       opacity:1-ida*0.82, transform:`translateY(${ida*26}px) scale(${1-ida*0.14})`}}>
                  <div style={{width:84, height:84, borderRadius:20, display:'grid', placeItems:'center',
                               background:'#fff', border:`2px ${0.6 < ida ? 'dashed' : 'solid'} ${0.6 < ida ? '#CBD5E1' : '#E2E8F0'}`}}>
                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke={0.6 < ida ? '#CBD5E1' : '#64748B'}
                         strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d={f.d}/></svg>
                  </div>
                  <span className="f-plex" style={{fontSize:21, color:'#64748B'}}>{f.n}</span>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {0 < salE && (
        <div className="f-plex" style={{position:'absolute', left:1010, top:922, width:790, textAlign:'center', fontSize:34, fontWeight:500,
                                        color:'#64748B', opacity:salE, transform:`translateY(${(1-salE)*12}px)`}}>
          Recojamos lo que acabas de ver.
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSC05 });