// === Escena 03 — "Paso 3 · Aparece solo" (el pago del montaje) ===
// Nadie activa nada ficha por ficha: el tipo sale en las fichas de la sección a la que apunta su
// documento (DinaupSignView.AplicaAEstaFicha). Si el documento pregunta por la entidad, sale en
// clientes; si pregunta por el empleado, en empleados. Aquí cae LA ÚNICA COSA.
function EscenaSF03({ t }){
  // LOCUCIÓN (audio/escena-03.mp3): aquí viene lo que hace que esto merezca la pena → no tienes
  // que ir ficha por ficha → abre cualquier cliente → su pestaña de firmas → y ahí está → con el
  // botón para mandarlo → ha aparecido solo → en todas las fichas de esa sección → el sistema mira
  // a qué sección apunta el documento → lo pone donde toca → si preguntaba por el empleado → no en
  // la de los clientes → lo que le falta de lo requerido → lo montas una vez / aparece solo.
  const T = {
    head:0.99,       // "lo que hace que esto merezca la pena"
    fichas:3.18,     // "No tienes que ir ficha por ficha"
    abre:6.24,       // "Abre cualquier cliente"
    pestana:8.09,    // "su pestaña de firmas"
    ahi:9.40,        // "y ahí está"
    boton:12.83,     // "con el botón para mandarlo"
    solo:14.83,      // "Ha aparecido solo"
    todas:16.16,     // "en todas las fichas de esa sección"
    mira:18.76,      // "el sistema mira a qué sección apunta"
    toca:21.63,      // "lo pone donde toca"
    empleado:23.05,  // "Si preguntaba por el empleado"
    noclientes:26.54,// "no en la de los clientes"
    falta:30.00,     // "le falta por firmar de lo requerido"
    unica1:32.59,    // "Lo montas una vez"
    unica2:34.10,    // "Y aparece solo en cada ficha"
  };

  const CLIENTES = ['Laura Ortega Pinto','Marcos Ibarra Gil','Nuria Sanz Vega','Autotalleres Rey, S.L.',
                    'Elena Prats Coll','Suministros Vega'];

  const fiP = clamp((t-T.fichas)/0.6,0,1);
  const abP = clamp((t-T.abre)/0.7,0,1), abE = Easing.easeOutCubic(abP);
  const peGlow = t >= T.pestana && t < T.pestana+1.2 ? Math.sin((t-T.pestana)/1.2*Math.PI) : 0;
  const ahP = clamp((t-T.ahi)/0.6,0,1), ahE = Easing.easeOutBack(ahP);
  const boGlow = t >= T.boton && t < T.boton+1.2 ? Math.sin((t-T.boton)/1.2*Math.PI) : 0;
  const soP = clamp((t-T.solo)/0.5,0,1);
  const toP = clamp((t-T.todas)/0.6,0,1);
  const miP = clamp((t-T.mira)/0.7,0,1), miE = Easing.easeOutCubic(miP);
  const emP = clamp((t-T.empleado)/0.6,0,1);
  const ncP = clamp((t-T.noclientes)/0.5,0,1);
  const faP = clamp((t-T.falta)/0.6,0,1), faE = Easing.easeOutBack(faP);

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

  return (
    <SlideCanvas variant="promise">
      <DemoHeader t={t} eyebrow="TUTORIAL · PASO 3" color="#059669"
                  title={<span>Y ahora no tienes que hacer nada más</span>}/>
      <PasosSign t={t} activo={3}/>

      {/* ─────────── Las fichas que nadie ha tocado ─────────── */}
      {0 < fiP && (
        <div style={{position:'absolute', left:112, top:250, width:600, opacity:fiP*atenua}}>
          <div className="f-plex" style={{fontSize:19, fontWeight:700, letterSpacing:'2.2px', color:'#94A3B8'}}>TUS FICHAS DE CLIENTES</div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:18}}>
            {CLIENTES.map((c,i)=>{
              const p = clamp((t-T.fichas-i*0.07)/0.35,0,1);
              const abierta = i === 0 && t >= T.abre;
              const conLinea = t >= T.todas;
              return (
                <div key={c} style={{background:'#fff', borderRadius:14, padding:'18px 18px 16px', opacity:p,
                                     border:`2px solid ${abierta ? '#0085FF' : (conLinea ? '#A7F3D0' : '#E2E8F0')}`,
                                     transform:`translateY(${(1-Easing.easeOutCubic(p))*10}px)`,
                                     boxShadow:abierta ? '0 14px 34px rgba(0,133,255,0.20)' : '0 6px 16px rgba(15,23,42,0.05)'}}>
                  <div className="f-plex" style={{fontSize:18, fontWeight:600, color:'#0F172A', whiteSpace:'nowrap',
                                                  overflow:'hidden', textOverflow:'ellipsis'}}>{c}</div>
                  <div style={{display:'flex', alignItems:'center', gap:8, marginTop:12, height:26}}>
                    {conLinea && (
                      <span className="f-plex" style={{fontSize:15, padding:'5px 11px', borderRadius:99,
                            background:'rgba(16,185,129,0.12)', color:'#059669', border:'1px solid rgba(16,185,129,0.3)',
                            opacity:clamp((t-T.todas-i*0.09)/0.4,0,1)}}>Contrato de servicio</span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
          {0 < soP && (
            <div className="f-plex" style={{fontSize:34, fontWeight:800, color:'#059669', marginTop:26, opacity:soP, letterSpacing:'-0.02em'}}>
              Ha aparecido solo.
            </div>
          )}
        </div>
      )}

      {/* ─────────── La ficha abierta, con su pestaña de firmas ─────────── */}
      {0 < abP && (
        <div style={{position:'absolute', left:764, top:250, width:1044, opacity:abE*atenua,
                     transform:`translateX(${(1-abE)*50}px)`}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 30px 72px rgba(15,23,42,0.14)', overflow:'hidden'}}>
            <BrowserChrome url="play.dinaup.com/App/Pymes/Customers" title="Laura Ortega Pinto"/>
            <div style={{padding:'22px 30px 0'}}>
              <span className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A'}}>Laura Ortega Pinto</span>
              <div style={{display:'flex', gap:10, marginTop:18}}>
                {['General','Facturas','Contactos','Firmas'].map((s,i)=>{
                  const on = i === 3 && t >= T.pestana;
                  return (
                    <span key={s} className="f-plex" style={{padding:'12px 22px', borderRadius:'11px 11px 0 0', fontSize:19,
                          fontWeight:on ? 700 : 500, color:on ? '#0085FF' : '#64748B',
                          background:on ? 'rgba(0,133,255,0.09)' : 'transparent',
                          borderBottom:`3px solid ${on ? '#0085FF' : 'transparent'}`,
                          boxShadow:0 < peGlow && i === 3 ? `0 0 ${peGlow*30}px rgba(0,133,255,0.45)` : 'none'}}>{s}</span>
                  );
                })}
              </div>
            </div>
            <div style={{height:1, background:'#EEF2F6'}}/>

            <div style={{padding:'22px 30px 30px', minHeight:300}}>
              {/* El aviso de lo requerido */}
              {0 < faP && (
                <div style={{display:'flex', alignItems:'center', gap:14, padding:'16px 24px', borderRadius:13, marginBottom:18,
                             background:'#FFF7ED', border:'2px solid #FED7AA', opacity:faP,
                             transform:`translateY(${(1-faE)*-10}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>
              )}

              {0 < ahP && (
                <div style={{display:'grid', gridTemplateColumns:'1fr 160px 230px', alignItems:'center', gap:20,
                             minHeight:100, padding:'0 20px', borderRadius:14, opacity:ahP,
                             transform:`translateY(${(1-ahE)*16}px)`,
                             background:'rgba(0,133,255,0.05)', border:'2px solid rgba(0,133,255,0.28)'}}>
                  <div style={{lineHeight:1.34}}>
                    <div className="f-plex" style={{fontSize:23, fontWeight:600, color:'#0F172A'}}>Contrato de servicio</div>
                    <div className="f-plex" style={{fontSize:18, color:'#94A3B8'}}>Sin enviar</div>
                  </div>
                  <span className="f-plex" style={{justifySelf:'start', padding:'8px 18px', borderRadius:99, fontSize:17, fontWeight:600,
                        color:'#B42318', background:'#FEF2F2', border:'1px solid #FCA5A5'}}>Requerido</span>
                  <span className="f-plex" style={{justifySelf:'end', padding:'15px 26px', borderRadius:12, fontSize:20, fontWeight:700,
                        color:0 < boGlow ? '#fff' : '#0085FF', background:0 < boGlow ? '#0085FF' : '#fff',
                        border:'2px solid #0085FF', transform:`scale(${1+boGlow*0.05})`,
                        boxShadow:0 < boGlow ? `0 0 ${boGlow*38}px rgba(0,133,255,0.55)` : 'none'}}>Enviar a firmar</span>
                </div>
              )}

              {/* ── El mecanismo: a qué sección apunta el documento ── */}
              {0 < miP && (
                <div style={{marginTop:26, paddingTop:22, borderTop:'1px solid #F1F5F9', opacity:miE,
                             transform:`translateY(${(1-miE)*14}px)`}}>
                  <div className="f-plex" style={{fontSize:18, fontWeight:700, letterSpacing:'2.2px', color:'#94A3B8'}}>
                    POR QUÉ APARECE AQUÍ
                  </div>
                  {[{ q:'La Entidad', s:'Entidades', d:'las fichas de clientes', start:T.mira, col:'#0085FF', on:true },
                    { q:'El Empleado', s:'Empleados', d:'las fichas de empleados', start:T.empleado, col:'#7C3AED', on:false }].map(r=>{
                    const p = clamp((t-r.start)/0.55,0,1);
                    const tachado = r.on === false && 0 < ncP;
                    return (
                      <div key={r.q} style={{display:'flex', alignItems:'center', gap:16, marginTop:16, opacity:p}}>
                        <span className="f-plex" style={{fontSize:19, color:'#64748B'}}>pregunta por</span>
                        <span className="f-plex" style={{padding:'9px 18px', borderRadius:10, fontSize:20, fontWeight:700,
                              color:r.col, background:`${r.col}14`, border:`1px solid ${r.col}44`}}>{r.q}</span>
                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M8 5 L16 12 L8 19"/>
                        </svg>
                        <span className="f-plex" style={{fontSize:19, color:'#64748B'}}>sección</span>
                        <span className="f-mono" style={{fontSize:20, fontWeight:600, color:'#334155'}}>{r.s}</span>
                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M8 5 L16 12 L8 19"/>
                        </svg>
                        <span className="f-plex" style={{fontSize:20, fontWeight:600, color:tachado ? '#94A3B8' : '#0F172A',
                              textDecoration:tachado ? 'line-through' : 'none'}}>{r.d}</span>
                      </div>
                    );
                  })}
                  {0 < clamp((t-T.toca)/0.5,0,1) && (
                    <div className="f-plex" style={{fontSize:22, color:'#059669', marginTop:18, fontWeight:600,
                                                    opacity:clamp((t-T.toca)/0.5,0,1)}}>
                      El sistema lo pone donde toca. Tú no eliges ficha por ficha.
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* ─────────── LA ÚNICA COSA (promesa cumplida) ─────────── */}
      {0 < velo && <div style={{position:'absolute', inset:0, background:'#fff', opacity:velo}}/>}
      {0 < u1E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:408, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          Lo montas una vez.
        </div>
      )}
      {0 < u2E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:528, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">Y aparece solo en cada ficha.</span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSF03 });