// === Escena 02 — "Paso 2 · El tipo" ===
// Sección Tipos de Solicitudes de Firma: nombre, el documento que se enviará, y la Relevancia de
// Firma, que es lo único que cambia el comportamiento (Requerido reclama arriba en la ficha;
// Importante se lista; Ordinario se queda al final). Valores del enum EnumRelevanciaDeFirmaE.
function EscenaSF02({ t }){
  // LOCUCIÓN (audio/escena-02.mp3): entra en la sección tipos de solicitudes de firma y crea uno →
  // le pones nombre → le asignas el documento → eso es todo lo que hay que rellenar → y la
  // relevancia → requerido, la ficha lo reclamará arriba → importante, se lista sin dar la lata →
  // ordinario, se queda al final → piensa cuáles son de verdad obligatorios → guardas.
  const T = {
    seccion:0.35,    // "Entra en la sección tipos"
    crea:3.22,       // "crea uno"
    nombre:4.37,     // "Le pones nombre"
    documento:5.38,  // "le asignas el documento"
    todo:8.34,       // "todo lo que hay que rellenar"
    relevancia:12.84,// "la relevancia"
    req:14.76,       // "como requerido"
    reclama:16.09,   // "lo reclamará arriba"
    imp:19.52,       // "como importante"
    sinlata:21.39,   // "sin dar la lata"
    ord:23.51,       // "como ordinario"
    alfinal:24.32,   // "se queda al final"
    piensa:28.47,    // "cuáles son de verdad obligatorios"
    guarda:33.38,    // "Guardas, y ya está montado"
  };

  const RELEV = [
    { n:'Requerido',  q:'la ficha lo reclama arriba mientras siga sin firmar', start:T.req, col:'#B42318', bg:'#FEF2F2', bd:'#FCA5A5' },
    { n:'Importante', q:'se lista, pero sin dar la lata',                      start:T.imp, col:'#C2410C', bg:'#FFF7ED', bd:'#FED7AA' },
    { n:'Ordinario',  q:'se queda al final, con los que no tienen actividad',  start:T.ord, col:'#64748B', bg:'#F8FAFC', bd:'#E2E8F0' },
  ];

  const seP = clamp((t-T.seccion)/0.6,0,1), seE = Easing.easeOutCubic(seP);
  const crP = clamp((t-T.crea)/0.7,0,1), crE = Easing.easeOutBack(crP);
  const nbGlow = t >= T.nombre && t < T.nombre+1.0 ? Math.sin((t-T.nombre)/1.0*Math.PI) : 0;
  const doGlow = t >= T.documento && t < T.documento+1.3 ? Math.sin((t-T.documento)/1.3*Math.PI) : 0;
  const toP = clamp((t-T.todo)/0.5,0,1);
  const rvP = clamp((t-T.relevancia)/0.6,0,1);
  const reP = clamp((t-T.reclama)/0.6,0,1), reE = Easing.easeOutBack(reP);
  const piP = clamp((t-T.piensa)/0.6,0,1);
  const guP = clamp((t-T.guarda)/0.4,0,1);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="TUTORIAL · PASO 2"
                  title={<span>Dalo de alta como tipo de firma</span>}/>
      <PasosSign t={t} activo={2}/>

      {/* ─────────── La sección, detrás ─────────── */}
      {0 < seP && (
        <div style={{position:'absolute', left:120, top:246, width:760, opacity:seE*(0 < crP ? 0.5 : 1),
                     transform:`translateY(${(1-seE)*20}px)`, filter:0 < crP ? 'saturate(0.6)' : 'none'}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 24px 58px rgba(15,23,42,0.10)', overflow:'hidden'}}>
            <BrowserChrome url="play.dinaup.com/App/Pymes/SignatureTypes" title="Tipos de Solicitudes de Firma"/>
            <div style={{padding:'24px 28px', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span className="f-plex" style={{fontSize:26, fontWeight:800, color:'#0F172A'}}>Tipos de Solicitudes de Firma</span>
              <span className="f-plex" style={{padding:'12px 22px', borderRadius:11, fontSize:19, fontWeight:700, color:'#fff', background:'#0085FF'}}>Nuevo</span>
            </div>
            {['Consentimiento de protección de datos','Autorización de domiciliación'].map(s=>(
              <div key={s} style={{display:'flex', justifyContent:'space-between', alignItems:'center', height:76, padding:'0 28px', borderTop:'1px solid #F4F7FA'}}>
                <span className="f-plex" style={{fontSize:20, color:'#334155'}}>{s}</span>
                <span className="f-plex" style={{fontSize:17, color:'#94A3B8'}}>Requerido</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ─────────── La ficha del tipo: dos campos y la relevancia ─────────── */}
      {0 < crP && (
        <div style={{position:'absolute', left:206, top:268, width:740, opacity:crP,
                     transform:`translateY(${(1-crE)*24}px)`}}>
          <div style={{background:'#fff', borderRadius:20, border:'1px solid #E2E8F0', boxShadow:'0 40px 92px rgba(15,23,42,0.22)', overflow:'hidden'}}>
            <div style={{padding:'24px 32px', borderBottom:'1px solid #EEF2F6'}}>
              <span className="f-plex" style={{fontSize:24, fontWeight:700, color:'#0F172A'}}>Nuevo tipo de solicitud de firma</span>
            </div>
            <div style={{padding:'26px 32px 30px'}}>
              <div className="f-plex" style={{fontSize:18, color:'#94A3B8'}}>Nombre</div>
              <div style={{marginTop:9, padding:'16px 18px', borderRadius:11, minHeight:60,
                           border:`2px solid ${0 < nbGlow ? '#0085FF' : '#E2E8F0'}`,
                           boxShadow:0 < nbGlow ? `0 0 ${nbGlow*28}px rgba(0,133,255,0.4)` : 'none'}}>
                <Typewriter text="Contrato de servicio" start={T.nombre} cps={16} t={t} caret
                            style={{fontSize:22, fontWeight:600, color:'#0F172A'}}/>
              </div>

              <div className="f-plex" style={{fontSize:18, color:'#94A3B8', marginTop:24}}>Documento dinámico</div>
              <div style={{display:'flex', alignItems:'center', gap:14, marginTop:9, padding:'16px 18px', borderRadius:11,
                           border:`2px solid ${0 < doGlow ? '#0085FF' : '#E2E8F0'}`,
                           background:t >= T.documento ? 'rgba(0,133,255,0.05)' : '#fff',
                           boxShadow:0 < doGlow ? `0 0 ${doGlow*28}px rgba(0,133,255,0.4)` : 'none'}}>
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#0085FF" 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>
                <span className="f-plex" style={{fontSize:22, fontWeight:600, color:t >= T.documento ? '#0F172A' : '#CBD5E1'}}>
                  {t >= T.documento ? 'Contrato de servicio' : 'Sin asignar'}
                </span>
              </div>

              {0 < toP && (
                <div className="f-plex" style={{fontSize:21, fontWeight:600, color:'#059669', marginTop:18, opacity:toP}}>
                  Y con esto ya está: no hay nada más que rellenar.
                </div>
              )}

              {/* La relevancia */}
              {0 < rvP && (
                <div style={{marginTop:26, paddingTop:24, borderTop:'1px solid #F1F5F9', opacity:rvP}}>
                  <div className="f-plex" style={{fontSize:18, color:'#94A3B8'}}>Relevancia de firma</div>
                  {RELEV.map(r=>{
                    const p = clamp((t-r.start)/0.5,0,1);
                    const on = t >= r.start;
                    return (
                      <div key={r.n} style={{display:'flex', alignItems:'center', gap:18, marginTop:12, padding:'16px 20px', borderRadius:12,
                                             border:`2px solid ${on ? r.bd : '#EEF2F6'}`, background:on ? r.bg : '#fff',
                                             opacity:clamp(p*1.6,0,1), transform:`translateY(${(1-Easing.easeOutCubic(p))*10}px)`}}>
                        <span style={{width:22, height:22, borderRadius:99, flexShrink:0, border:`2px solid ${on ? r.col : '#CBD5E1'}`,
                                      background:on ? r.col : '#fff', boxShadow:on ? `0 0 0 4px ${r.col}22` : 'none'}}/>
                        <span className="f-plex" style={{fontSize:22, fontWeight:700, color:on ? r.col : '#94A3B8', width:170}}>{r.n}</span>
                        <span className="f-plex" style={{fontSize:19, color:'#64748B'}}>{r.q}</span>
                      </div>
                    );
                  })}
                </div>
              )}

              {0 < guP && (
                <div style={{marginTop:26, padding:'17px 0', borderRadius:12, textAlign:'center', background:'#0085FF',
                             boxShadow:'0 16px 38px rgba(0,133,255,0.34)', opacity:guP, transform:`scale(${1-guP*0.02})`}}>
                  <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#fff'}}>Guardar</span>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* ─────────── Qué hace "Requerido" en la ficha ─────────── */}
      {0 < reP && (
        <div style={{position:'absolute', left:1030, top:300, width:770, opacity:reP,
                     transform:`translateY(${(1-reE)*20}px)`}}>
          <div className="f-plex" style={{fontSize:19, fontWeight:700, letterSpacing:'2.2px', color:'#94A3B8'}}>
            LO QUE VERÁS DESPUÉS EN LA FICHA
          </div>
          <div style={{marginTop:20, background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 24px 58px rgba(15,23,42,0.10)', padding:'26px 28px 20px'}}>
            <div style={{display:'flex', alignItems:'center', gap:14, padding:'18px 24px', borderRadius:13,
                         background:'#FFF7ED', border:'2px solid #FED7AA'}}>
              <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>
            {RELEV.map((r,i)=>{
              const p = clamp((t-r.start-0.4)/0.5,0,1);
              return (
                <div key={r.n} style={{display:'grid', gridTemplateColumns:'1fr 150px 190px', alignItems:'center', gap:16,
                                       height:88, borderBottom:'1px solid #F4F7FA', opacity:p}}>
                  <span className="f-plex" style={{fontSize:20, color:'#0F172A'}}>{['Contrato de servicio','Consentimiento de datos','Encuesta de satisfacción'][i]}</span>
                  <span className="f-plex" style={{justifySelf:'start', padding:'7px 16px', borderRadius:99, fontSize:16, fontWeight:600,
                        color:r.col, background:r.bg, border:`1px solid ${r.bd}`}}>{r.n}</span>
                  <span className="f-plex" style={{justifySelf:'end', padding:'11px 20px', borderRadius:10, fontSize:18, fontWeight:700,
                        color:'#0085FF', border:'2px solid #0085FF'}}>Enviar a firmar</span>
                </div>
              );
            })}
            {0 < piP && (
              <div className="f-plex" style={{fontSize:20, color:'#64748B', marginTop:18, opacity:piP, lineHeight:1.45}}>
                Piensa bien cuáles son de verdad obligatorios: <b style={{color:'#0F172A'}}>son los que la ficha va a reclamar.</b>
              </div>
            )}
          </div>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSF02 });