// === Escena 02 — "Sale de tu ficha" ===
// La pestaña Firmas de la ficha → una línea por documento → el botón que dice lo que va a pasar
// (Enviar a firmar / Reenviar / Volver a firmar, literales del producto) → el documento se abre
// con los datos de esa persona dentro → el envío en tres gestos → los correos salen.
function EscenaSC02({ t }){
  // LOCUCIÓN (audio/escena-02.mp3): abre la ficha → entra en firmas → una línea por cada
  // documento → el botón dice lo que va a pasar → enviar a firmar / reenviar / volver a firmar →
  // pulsas y el documento se abre → su nombre, su domicilio, la fecha de hoy → nada que copiar →
  // revisas quién firma → cuántos días → y envías → los correos salen en ese momento.
  const T = {
    ficha:0.35,      // "Abre la ficha"
    tab:2.04,        // "entra en firmas"
    lineas:3.95,     // "una línea por cada documento"
    botones:6.84,    // "El botón dice lo que va a pasar"
    b1:8.85,         // "enviar a firmar la primera vez"
    b2:10.81,        // "reenviar si sigue pendiente"
    b3:12.66,        // "volver a firmar si quieres"
    doc:15.83,       // "Pulsas, y el documento"
    d1:19.53,        // "su nombre"
    d2:20.31,        // "su domicilio"
    d3:21.36,        // "la fecha de hoy"
    remate:23.25,    // "Nada que copiar"
    quien:25.52,     // "Revisas quién firma"
    dias:27.33,      // "cuántos días quieres"
    envia:29.42,     // "y envías"
    correos:30.51,   // "Los correos salen en ese momento"
    salida:32.81,    // "Ahora mira lo que le llega"
  };

  // Las tres líneas: cada botón es el literal que el producto enseña en ese estado.
  const LINEAS = [
    { tit:'Contrato de mantenimiento anual',    rel:'Requerido',  est:'Sin enviar',                boton:'Enviar a firmar',  start:T.b1, color:'#0085FF' },
    { tit:'Consentimiento de protección de datos', rel:'Requerido', est:'Pendiente desde el 6/08', boton:'Reenviar',         start:T.b2, color:'#FB8C00' },
    { tit:'Autorización de domiciliación',      rel:'Ordinario',  est:'Firmado el 2/07',           boton:'Volver a firmar',  start:T.b3, color:'#64748B' },
  ];

  const fiE = Easing.easeOutCubic(clamp((t-T.ficha)/0.7,0,1));
  const tabP = clamp((t-T.tab)/0.5,0,1);
  const tabGlow = t >= T.tab && t < T.tab+1.2 ? Math.sin((t-T.tab)/1.2*Math.PI) : 0;
  const botCol = clamp((t-T.botones)/0.5,0,1);

  // El documento entra por la derecha (continuidad: viene del botón que se pulsó ahí)
  const docP = clamp((t-T.doc)/0.7,0,1), docE = Easing.easeOutCubic(docP);
  const docOut = clamp((t-T.quien)/0.5,0,1);
  const remP = clamp((t-T.remate)/0.5,0,1);

  // El diálogo de envío releva al documento
  const dlgP = clamp((t-T.quien)/0.7,0,1), dlgE = Easing.easeOutBack(dlgP);
  const diasGlow = t >= T.dias && t < T.dias+1.3 ? Math.sin((t-T.dias)/1.3*Math.PI) : 0;
  const enviaP = clamp((t-T.envia)/0.35,0,1);
  const corP = clamp((t-T.correos)/0.9,0,1), corE = Easing.easeOutCubic(corP);
  const salE = Easing.easeOutCubic(clamp((t-T.salida)/0.6,0,1));

  const panelAtenuado = 0 < docP;   // mientras hay overlay, la ventana acompaña sin competir

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL ENVÍO · DESDE LA FICHA" title={<span>Un botón, y ya está enviado</span>}/>

      {/* ─────────── La ventana de play con la ficha ─────────── */}
      {0 < fiE && (
        <div style={{position:'absolute', left:130, top:238, width:1660, opacity:fiE*(panelAtenuado ? 0.5 : 1),
                     transform:`translateY(${(1-fiE)*24}px)`, filter:panelAtenuado ? 'saturate(0.6)' : 'none'}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 32px 78px rgba(15,23,42,0.13)', overflow:'hidden'}}>
            <BrowserChrome url="play.dinaup.com/App/Pymes/Customers" title="Laura Ortega Pinto"/>

            {/* Cabecera de la ficha + pestañas */}
            <div style={{padding:'26px 34px 0'}}>
              <div style={{display:'flex', alignItems:'baseline', gap:18}}>
                <span className="f-plex" style={{fontSize:34, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em'}}>Laura Ortega Pinto</span>
                <span className="f-mono" style={{fontSize:19, color:'#94A3B8'}}>CLI-2041</span>
              </div>
              <div style={{display:'flex', gap:10, marginTop:22}}>
                {['General','Facturas','Contactos','Firmas'].map((s,i)=>{
                  const on = i === 3 && 0 < tabP;
                  return (
                    <span key={s} className="f-plex" style={{padding:'13px 24px', borderRadius:'12px 12px 0 0', fontSize:20,
                          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 < tabGlow && i === 3 ? `0 0 ${tabGlow*30}px rgba(0,133,255,0.45)` : 'none'}}>{s}</span>
                  );
                })}
              </div>
            </div>
            <div style={{height:1, background:'#EEF2F6'}}/>

            {/* El aviso de lo Requerido que falta */}
            <div style={{padding:'22px 34px 0', opacity:clamp((t-T.lineas)/0.6,0,1)}}>
              <div style={{display:'inline-flex', alignItems:'center', gap:14, padding:'16px 26px', borderRadius:14,
                           background:'#FFF7ED', border:'1px solid #FED7AA'}}>
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#C2410C" strokeWidth="2.3" strokeLinecap="round">
                  <path d="M12 9v5"/><path d="M12 17h.01"/><circle cx="12" cy="12" r="9"/>
                </svg>
                <span className="f-plex" style={{fontSize:21, fontWeight:600, color:'#9A3412'}}>Le faltan 2 documentos requeridos por firmar</span>
              </div>
            </div>

            {/* Una línea por tipo configurado */}
            <div style={{padding:'20px 34px 34px'}}>
              {LINEAS.map((l,i)=>{
                const ent = clamp((t-T.lineas-i*0.22)/0.5,0,1), entE = Easing.easeOutCubic(ent);
                const on = t >= l.start;
                const glow = t >= l.start && t < l.start+1.1 ? Math.sin((t-l.start)/1.1*Math.PI) : 0;
                return (
                  <div key={l.tit} style={{display:'grid', gridTemplateColumns:'1fr 190px 250px', alignItems:'center', gap:24,
                                           height:96, padding:'0 22px', borderBottom:'1px solid #F1F5F9', opacity:ent,
                                           transform:`translateY(${(1-entE)*12}px)`}}>
                    <div style={{lineHeight:1.34}}>
                      <div className="f-plex" style={{fontSize:23, fontWeight:600, color:'#0F172A'}}>{l.tit}</div>
                      <div className="f-plex" style={{fontSize:18, color:'#94A3B8'}}>{l.est}</div>
                    </div>
                    <span className="f-plex" style={{justifySelf:'start', padding:'8px 18px', borderRadius:99, fontSize:17, fontWeight:600,
                          color:l.rel === 'Requerido' ? '#9A3412' : '#64748B',
                          background:l.rel === 'Requerido' ? '#FFF7ED' : '#F1F5F9',
                          border:`1px solid ${l.rel === 'Requerido' ? '#FED7AA' : '#E2E8F0'}`}}>{l.rel}</span>
                    <span className="f-plex" style={{justifySelf:'end', padding:'15px 28px', borderRadius:12, fontSize:20, fontWeight:700,
                          color:on ? '#fff' : l.color, background:on ? l.color : '#fff',
                          border:`2px solid ${l.color}`, opacity:0 < botCol ? 1 : 0.45,
                          boxShadow:0 < glow ? `0 0 ${glow*40}px ${l.color}88` : 'none',
                          transform:`scale(${1+glow*0.05})`}}>{l.boton}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {/* ─────────── El documento, con los datos de esa persona dentro ─────────── */}
      {0 < docP && docOut < 1 && (
        <div style={{position:'absolute', left:1055, top:212, width:700, opacity:docP*(1-docOut),
                     transform:`translateX(${(1-docE)*70 + docOut*50}px)`}}>
          <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', boxShadow:'0 40px 90px rgba(15,23,42,0.22)', overflow:'hidden'}}>
            <div style={{padding:'22px 34px', borderBottom:'1px solid #EEF2F6', background:'#F8FAFC', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>Contrato de mantenimiento anual</span>
              <span className="f-mono" style={{fontSize:17, color:'#94A3B8'}}>A4 · 2 páginas</span>
            </div>
            <div style={{padding:'40px 44px 46px', fontSize:22, lineHeight:1.85, color:'#334155'}} className="f-plex">
              {/* Los tres datos que vienen de la ficha, resaltados cuando la voz los nombra */}
              {(()=>{
                const Dato = ({ start, children })=>{
                  const p = clamp((t-start)/0.45,0,1);
                  const glow = t >= start && t < start+1.0 ? Math.sin((t-start)/1.0*Math.PI) : 0;
                  return (
                    <b style={{padding:'2px 8px', borderRadius:7, color:p < 0.5 ? '#94A3B8' : '#0F172A',
                               background:`rgba(0,133,255,${0.06+glow*0.22})`,
                               boxShadow:0 < glow ? `0 0 ${glow*22}px rgba(0,133,255,0.45)` : 'none'}}>{children}</b>
                  );
                };
                return (
                  <>
                    <div>De una parte <b style={{color:'#0F172A'}}>Talleres Marbán, S.L.</b>, y de la otra <Dato start={T.d1}>Laura Ortega Pinto</Dato>,</div>
                    <div>con domicilio en <Dato start={T.d2}>Av. de la Constitución 44, Cáceres</Dato>,</div>
                    <div>acuerdan el mantenimiento anual del equipo instalado.</div>
                    <div style={{marginTop:26}}>En Cáceres, a <Dato start={T.d3}>13 de agosto de 2026</Dato>.</div>
                  </>
                );
              })()}
              <div style={{marginTop:40, paddingTop:26, borderTop:'1px dashed #D3DDE8'}}>
                {[0,1,2].map(k=> <div key={k} style={{height:11, borderRadius:99, background:'#EEF2F6', marginBottom:13, width:[96,88,54][k]+'%'}}/>)}
              </div>
            </div>
          </div>
          {0 < remP && (
            <div className="f-plex" style={{marginTop:24, textAlign:'center', fontSize:34, fontWeight:700, color:'#059669', opacity:remP}}>
              Nada que copiar de un sitio a otro.
            </div>
          )}
        </div>
      )}

      {/* ─────────── El diálogo de envío: quién firma, cuántos días, enviar ─────────── */}
      {0 < dlgP && (
        <div style={{position:'absolute', left:1055, top:236, width:700, opacity:dlgP,
                     transform:`translateY(${(1-dlgE)*24}px)`}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 40px 92px rgba(15,23,42,0.24)', overflow:'hidden'}}>
            <div style={{padding:'24px 34px', borderBottom:'1px solid #EEF2F6', display:'flex', alignItems:'center', gap:14}}>
              <DinaupLogo mark size={30}/>
              <span className="f-plex" style={{fontSize:23, fontWeight:700, color:'#0F172A'}}>Enviar PDF a firmar</span>
            </div>
            <div style={{padding:'28px 34px 34px'}}>
              <div className="f-plex" style={{fontSize:17, color:'#94A3B8'}}>Título del documento</div>
              <div className="f-plex" style={{fontSize:22, fontWeight:600, color:'#0F172A', padding:'14px 18px', marginTop:9,
                                              border:'1px solid #E2E8F0', borderRadius:11, background:'#F8FAFC'}}>Contrato de mantenimiento anual</div>

              <div className="f-plex" style={{fontSize:17, color:'#94A3B8', marginTop:26}}>Firmante</div>
              <div style={{display:'flex', alignItems:'center', gap:16, padding:'16px 18px', marginTop:9,
                           border:`2px solid ${T.dias > t ? '#0085FF' : '#E2E8F0'}`, borderRadius:12}}>
                <div style={{width:48, height:48, borderRadius:99, background:'rgba(0,133,255,0.12)', display:'grid', placeItems:'center'}}>
                  <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0085FF'}}>LO</span>
                </div>
                <div style={{lineHeight:1.35}}>
                  <div className="f-plex" style={{fontSize:21, fontWeight:600, color:'#0F172A'}}>Laura Ortega Pinto</div>
                  <div className="f-mono" style={{fontSize:18, color:'#64748B'}}>laura.ortega@correo.es</div>
                </div>
              </div>

              <div className="f-plex" style={{fontSize:17, color:'#94A3B8', marginTop:26}}>El enlace caduca en</div>
              <div style={{display:'flex', gap:9, marginTop:10}}>
                {[3,7,15,30,60,90].map(d=>(
                  <span key={d} className="f-mono" style={{flex:1, textAlign:'center', padding:'13px 0', borderRadius:10, fontSize:19,
                        fontWeight:d === 7 ? 700 : 500,
                        color:d === 7 ? '#fff' : '#64748B',
                        background:d === 7 ? '#0085FF' : '#F1F5F9',
                        border:`1px solid ${d === 7 ? '#0085FF' : '#E2E8F0'}`,
                        boxShadow:d === 7 && 0 < diasGlow ? `0 0 ${diasGlow*32}px rgba(0,133,255,0.55)` : 'none'}}>{d}</span>
                ))}
              </div>

              <div style={{marginTop:30, padding:'18px 0', borderRadius:13, textAlign:'center',
                           background:0 < enviaP ? '#0085FF' : '#CBD5E1',
                           boxShadow:0 < enviaP ? '0 16px 38px rgba(0,133,255,0.36)' : 'none',
                           transform:`scale(${1-enviaP*0.02})`}}>
                <span className="f-plex" style={{fontSize:23, fontWeight:700, color:'#fff'}}>Enviar a firmar</span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* El correo sale: un sobre viaja hacia fuera del diálogo */}
      {0 < corP && (
        <div style={{position:'absolute', left:1240 - corE*640, top:790 - corE*300, opacity:clamp(1-(corP-0.55)/0.45,0,1),
                     transform:`scale(${lerp(0.7,1.1,corE)})`}}>
          <svg width="120" height="86" viewBox="0 0 24 18" fill="#fff" stroke="#0085FF" strokeWidth="1.5" style={{filter:'drop-shadow(0 14px 30px rgba(0,133,255,0.35))'}}>
            <rect x="1" y="1" width="22" height="16" rx="2"/><path d="M1.6 2.2 L12 10 L22.4 2.2" fill="none"/>
          </svg>
        </div>
      )}
      {0 < corP && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:986, textAlign:'center', fontSize:32, fontWeight:700,
                                        color:'#0085FF', opacity:clamp(corP*1.6,0,1)}}>
          El correo sale en ese momento.
        </div>
      )}
      {0 < salE && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:986, textAlign:'center', fontSize:32, fontWeight:500,
                                        color:'#64748B', opacity:salE, background:'linear-gradient(180deg,rgba(255,255,255,0) 0%, #F4F9FF 22%)', padding:'14px 0'}}>
          Ahora mira lo que le llega a él.
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSC02 });