// === Escena 04 — "Paso 4 · Lo envías" ===
// El botón dice lo que va a pasar (Enviar a firmar / Reenviar / Volver a firmar, literales de
// DinaupSignView), el documento se abre relleno con los datos de esa ficha, y el firmante lo
// resuelve desde su móvil sin instalar nada ni crear cuenta.
function EscenaSF04({ t }){
  // LOCUCIÓN (audio/escena-04.mp3): mandarlo es un botón → te dice lo que va a pasar → enviar a
  // firmar / reenviar / volver a firmar → se abre el documento ya relleno → revisas quién firma →
  // cuántos días → y envías → le llega su enlace → en el móvil → lo firma con el dedo → sin
  // instalar nada → y cuando termina, te toca a ti.
  const T = {
    boton:0.65,      // "mandarlo es un botón"
    dice:3.08,       // "te dice lo que va a pasar"
    b1:4.53,         // "enviar a firmar la primera vez"
    b2:6.43,         // "reenviar si sigue pendiente"
    b3:8.33,         // "volver a firmar si quieres"
    doc:12.45,       // "se abre el documento"
    relleno:13.90,   // "ya relleno con los datos"
    quien:16.72,     // "Revisas quién firma"
    dias:18.64,      // "cuántos días quieres"
    envia:20.96,     // "y envías"
    enlace:26.35,    // "le llega su enlace"
    movil:28.42,     // "en el móvil"
    firma:30.69,     // "lo firma con el dedo"
    sininstalar:32.53,// "Sin instalar nada"
    salida:36.68,    // "te toca a ti"
  };

  const BOTONES = [
    { n:'Enviar a firmar',  c:'la primera vez',        start:T.b1, col:'#0085FF' },
    { n:'Reenviar',         c:'si sigue pendiente',    start:T.b2, col:'#FB8C00' },
    { n:'Volver a firmar',  c:'si quieres una versión nueva', start:T.b3, col:'#059669' },
  ];

  const boP = clamp((t-T.boton)/0.6,0,1);
  const sube = Easing.easeInOutCubic(clamp((t-T.doc)/0.8,0,1));      // los botones se apartan arriba
  const dcP = clamp((t-T.doc)/0.7,0,1), dcE = Easing.easeOutCubic(dcP);
  const reGlow = t >= T.relleno && t < T.relleno+1.4 ? Math.sin((t-T.relleno)/1.4*Math.PI) : 0;
  const quP = clamp((t-T.quien)/0.5,0,1);
  const diGlow = t >= T.dias && t < T.dias+1.2 ? Math.sin((t-T.dias)/1.2*Math.PI) : 0;
  const enP = clamp((t-T.envia)/0.35,0,1);
  const mvP = clamp((t-T.enlace)/0.8,0,1), mvE = Easing.easeOutBack(mvP);
  const trazoP = Easing.easeInOutCubic(clamp((t-T.firma)/1.4,0,1));
  const siP = clamp((t-T.sininstalar)/0.6,0,1);
  const salE = Easing.easeOutCubic(clamp((t-T.salida)/0.6,0,1));

  const FIRMA_D = 'M8 62 C 34 18, 52 92, 78 44 S 118 8, 142 58 C 158 92, 176 30, 206 46 C 228 58, 244 36, 262 52';

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="TUTORIAL · PASO 4" title={<span>Mandarlo es un botón</span>}/>
      <PasosSign t={t} activo={4}/>

      {/* ─────────── El botón dice lo que va a pasar ─────────── */}
      {0 < boP && (
        <div style={{position:'absolute', left:0, right:0, top:lerp(268, 232, sube), display:'flex', justifyContent:'center', gap:30,
                     opacity:boP*(1-sube*0.45), transform:`scale(${lerp(1, 0.72, sube)})`}}>
          {BOTONES.map(b=>{
            const p = clamp((t-b.start)/0.5,0,1), pe = Easing.easeOutBack(p);
            const glow = t >= b.start && t < b.start+1.1 ? Math.sin((t-b.start)/1.1*Math.PI) : 0;
            return (
              <div key={b.n} style={{width:470, background:'#fff', borderRadius:20, border:`2px solid ${p < 0.4 ? '#E2E8F0' : b.col}`,
                                     padding:'30px 32px 28px', opacity:clamp(p*1.5,0,1), transform:`translateY(${(1-pe)*20}px)`,
                                     boxShadow:0 < glow ? `0 22px 52px ${b.col}33` : '0 12px 30px rgba(15,23,42,0.06)'}}>
                <span className="f-plex" style={{display:'inline-block', padding:'14px 26px', borderRadius:12, fontSize:22, fontWeight:700,
                      color:'#fff', background:b.col}}>{b.n}</span>
                <div className="f-plex" style={{fontSize:23, color:'#64748B', marginTop:20}}>{b.c}</div>
              </div>
            );
          })}
        </div>
      )}

      {/* ─────────── El documento y el envío ─────────── */}
      {0 < dcP && (
        <div style={{position:'absolute', left:130, top:432, width:900, opacity:dcE,
                     transform:`translateY(${(1-dcE)*24}px)`}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 30px 72px rgba(15,23,42,0.14)', overflow:'hidden'}}>
            <div style={{padding:'20px 30px', borderBottom:'1px solid #EEF2F6', background:'#F8FAFC'}}>
              <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>Contrato de servicio</span>
              <span className="f-plex" style={{fontSize:18, color:'#94A3B8'}}> · con los datos de esta ficha</span>
            </div>
            <div style={{padding:'26px 30px 30px'}}>
              {/* Los datos que llegan solos */}
              <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
                {['Laura Ortega Pinto','Av. de la Constitución 44','13 de agosto de 2026'].map((d,i)=>(
                  <span key={d} className="f-plex" style={{padding:'11px 20px', borderRadius:99, fontSize:19, fontWeight:600,
                        color:'#0066CC', background:'rgba(0,133,255,0.09)', border:'1px solid rgba(0,133,255,0.22)',
                        opacity:clamp((t-T.relleno-i*0.16)/0.4,0,1),
                        boxShadow:0 < reGlow ? `0 0 ${reGlow*20}px rgba(0,133,255,0.35)` : 'none'}}>{d}</span>
                ))}
              </div>

              {/* Firmante y caducidad */}
              {0 < quP && (
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:26, marginTop:26, opacity:quP}}>
                  <div>
                    <div className="f-plex" style={{fontSize:17, color:'#94A3B8'}}>Firmante</div>
                    <div style={{display:'flex', alignItems:'center', gap:14, marginTop:9, padding:'14px 18px', borderRadius:11, border:'2px solid #E2E8F0'}}>
                      <span style={{width:42, height:42, borderRadius:99, background:'rgba(0,133,255,0.12)', display:'grid', placeItems:'center'}}>
                        <span className="f-plex" style={{fontSize:17, fontWeight:700, color:'#0085FF'}}>LO</span>
                      </span>
                      <span className="f-mono" style={{fontSize:18, color:'#334155'}}>laura.ortega@correo.es</span>
                    </div>
                  </div>
                  <div>
                    <div className="f-plex" style={{fontSize:17, color:'#94A3B8'}}>El enlace caduca en</div>
                    <div style={{display:'flex', gap:7, marginTop:9}}>
                      {[3,7,15,30,60,90].map(d=>(
                        <span key={d} className="f-mono" style={{flex:1, textAlign:'center', padding:'12px 0', borderRadius:9, fontSize:18,
                              fontWeight:d === 7 ? 700 : 500, color:d === 7 ? '#fff' : '#64748B',
                              background:d === 7 ? '#0085FF' : '#F1F5F9', border:'1px solid #E2E8F0',
                              boxShadow:d === 7 && 0 < diGlow ? `0 0 ${diGlow*28}px rgba(0,133,255,0.5)` : 'none'}}>{d}</span>
                      ))}
                    </div>
                  </div>
                </div>
              )}

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

      {/* ─────────── Lo que hace el firmante ─────────── */}
      {0 < mvP && (
        <div style={{position:'absolute', left:1120, top:394, display:'flex', alignItems:'flex-start', gap:44,
                     opacity:mvP, transform:`translateY(${(1-mvE)*24}px)`}}>
          <PhoneFrame w={330} h={584}>
            <div style={{padding:'26px 18px 14px', borderBottom:'1px solid #e6ecf3'}}>
              {/* Logo oficial desde el CDN (doc-in · marca) */}
              <img src="https://dinaupcdn.com/dinaup/logo-sign.svg" alt="Dinaup Sign" style={{height:22, width:'auto', display:'block'}}/>
            </div>
            {t < T.firma ? (
              <div style={{padding:'16px 16px'}}>
                <div className="f-plex" style={{fontSize:16, fontWeight:700, color:'#16222e'}}>Contrato de servicio</div>
                <div style={{marginTop:12, height:352, borderRadius:9, border:'1px solid #e6ecf3', padding:'14px 13px', overflow:'hidden'}}>
                  {[96,88,94,72,90,84,60,92,86,78,94,66].map((w,k)=>(
                    <div key={k} style={{height:7, borderRadius:99, background:k === 0 ? '#d3dde8' : '#eef2f6', marginBottom:10, width:w+'%'}}/>
                  ))}
                </div>
                <div style={{display:'flex', alignItems:'center', gap:10, marginTop:14}}>
                  <span style={{width:20, height:20, borderRadius:5, flexShrink:0, display:'grid', placeItems:'center',
                                border:'2px solid #0c8fce', background:'#0c8fce'}}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5 L10 17 L19 7"/></svg>
                  </span>
                  <span className="f-plex" style={{fontSize:12, color:'#566472', lineHeight:1.3}}>He leído y acepto el contenido del documento</span>
                </div>
              </div>
            ) : (
              <div style={{padding:'18px 16px'}}>
                <div className="f-plex" style={{fontSize:16, fontWeight:700, color:'#16222e'}}>Firma el documento</div>
                <div className="f-plex" style={{fontSize:12, color:'#8b99a8', marginTop:16}}>Nombre completo</div>
                <div style={{marginTop:7, padding:'11px 13px', border:'1px solid #d3dde8', borderRadius:9}}>
                  <span className="f-plex" style={{fontSize:15, color:'#16222e'}}>Laura Ortega Pinto</span>
                </div>
                <div className="f-plex" style={{fontSize:12, color:'#8b99a8', marginTop:16}}>Tu firma</div>
                <div style={{marginTop:7, height:196, borderRadius:11, border:'2px dashed #d3dde8', background:'#fbfdff', position:'relative'}}>
                  <svg width="252" height="96" viewBox="0 0 290 110" fill="none" style={{position:'absolute', left:24, top:56}}>
                    <path d={FIRMA_D} stroke="#16222e" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"
                          strokeDasharray="420" strokeDashoffset={420*(1-trazoP)}/>
                  </svg>
                </div>
                <div style={{marginTop:14, padding:'12px 0', borderRadius:9, textAlign:'center', background:0.9 < trazoP ? '#0c8fce' : '#d3dde8'}}>
                  <span className="f-plex" style={{fontSize:15, fontWeight:700, color:'#fff'}}>Firmar</span>
                </div>
              </div>
            )}
          </PhoneFrame>
          <FingerTap t={t} taps={[{t:T.firma+1.35, x:170, y:430}]}/>

          <div style={{width:400, paddingTop:20}}>
            {[{n:'Le llega su enlace', s:'personal, solo suyo', start:T.enlace},
              {n:'Lo abre en el móvil', s:'y lo lee entero', start:T.movil},
              {n:'Lo firma con el dedo', s:'y ha terminado', start:T.firma}].map(p=>{
              const pr = clamp((t-p.start)/0.5,0,1);
              return (
                <div key={p.n} style={{display:'flex', alignItems:'center', gap:16, height:92, opacity:pr,
                                       transform:`translateX(${(1-Easing.easeOutCubic(pr))*-16}px)`}}>
                  <span style={{width:14, height:14, borderRadius:99, flexShrink:0, background:'#0085FF'}}/>
                  <div style={{lineHeight:1.32}}>
                    <div className="f-plex" style={{fontSize:24, fontWeight:700, color:'#0F172A'}}>{p.n}</div>
                    <div className="f-plex" style={{fontSize:19, color:'#94A3B8'}}>{p.s}</div>
                  </div>
                </div>
              );
            })}
            {0 < siP && (
              <div style={{display:'flex', gap:12, flexWrap:'wrap', marginTop:20, opacity:siP}}>
                {['sin instalar nada','sin crear cuenta'].map((s,i)=>(
                  <span key={s} className="f-plex" style={{padding:'12px 22px', borderRadius:99, fontSize:19, fontWeight:600,
                        color:'#059669', background:'rgba(16,185,129,0.12)', border:'1px solid rgba(16,185,129,0.3)',
                        opacity:clamp((t-T.sininstalar-i*0.22)/0.4,0,1)}}>{s}</span>
                ))}
              </div>
            )}
          </div>
        </div>
      )}

      {0 < salE && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:1004, textAlign:'center', fontSize:34, fontWeight:500,
                                        color:'#64748B', opacity:salE, transform:`translateY(${(1-salE)*12}px)`}}>
          Y cuando termina, <b style={{color:'#0F172A'}}>te toca a ti.</b>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSF04 });