// === Escena 03 — "Quien firma" (valle) ===
// El correo → el móvil → las tres cosas que NO hace falta → leer, aceptar, nombre, trazo →
// firmado en veinte segundos → un recordatorio, no una serie.
// Es el valle que protege el clímax: una persona, un móvil, cero cifras grandes.
// Los textos de la pantalla del firmante son literales de Plantillas/sign.html.
function EscenaSC03({ t }){
  // LOCUCIÓN (audio/escena-03.mp3): le llega un correo → lo abre en el móvil → no instala nada /
  // no crea cuenta / no recuerda contraseñas → ve el documento entero → marca que lo acepta →
  // escribe su nombre → traza la firma con el dedo → confirma y ha terminado → veinte segundos →
  // menos de dos días, un recordatorio → uno, no una serie → qué queda guardado.
  const T = {
    correo:0.32,     // "Le llega un correo"
    movil:4.08,      // "Lo abre en el móvil"
    no1:8.92,        // "no instala nada"
    no2:10.13,       // "no crea ninguna cuenta"
    no3:11.63,       // "no tiene que recordar contraseñas"
    doc:14.12,       // "Ve el documento entero"
    acepta:16.21,    // "marca que lo acepta"
    nombre:17.49,    // "escribe su nombre"
    trazo:18.97,     // "traza la firma con el dedo"
    hecho:20.99,     // "Confirma, y ha terminado"
    veinte:23.50,    // "Han pasado veinte segundos"
    recuerda:27.27,  // "menos de dos días"
    uno:30.37,       // "Uno, no una serie"
    salida:36.07,    // "qué queda guardado"
  };

  const NOES = [
    { txt:'instalar una aplicación', start:T.no1 },
    { txt:'crear una cuenta',        start:T.no2 },
    { txt:'recordar una contraseña', start:T.no3 },
  ];

  const coP = clamp((t-T.correo)/0.7,0,1), coE = Easing.easeOutCubic(coP);
  const coOut = clamp((t-T.movil)/0.6,0,1);                  // el correo se mete en el móvil
  const mvP = clamp((t-T.movil)/0.8,0,1), mvE = Easing.easeOutBack(mvP);

  // Estado de la pantalla del firmante (deriva solo de t: nada de useState).
  // El documento se ve DESDE que abre el enlace: el móvil no está en blanco esperando a que la
  // voz lo nombre. En T.doc lo que ocurre es que se recorre entero (scroll), no que aparezca.
  const enDoc   = t >= T.movil+0.5 && t < T.trazo;
  const enFirma = t >= T.trazo && t < T.hecho;
  const enHecho = t >= T.hecho;
  const scrollDoc = Easing.easeInOutCubic(clamp((t-T.doc)/1.7,0,1));   // "ve el documento entero"

  const acP = clamp((t-T.acepta)/0.35,0,1);
  const nbP = clamp((t-T.nombre)/0.4,0,1);
  const trazoP = Easing.easeInOutCubic(clamp((t-T.trazo)/1.5,0,1));
  const hchP = clamp((t-T.hecho)/0.6,0,1), hchE = Easing.easeOutBack(hchP);
  const seg = useCountUp(0, 20, T.veinte, 1.1, t);
  const vtP = clamp((t-T.veinte)/0.5,0,1);
  const rcP = clamp((t-T.recuerda)/0.6,0,1), rcE = Easing.easeOutCubic(rcP);
  const unoP = clamp((t-T.uno)/0.6,0,1);
  const unoTacha = Easing.easeInOutCubic(clamp((t-T.uno-0.35)/0.7,0,1));
  const salE = Easing.easeOutCubic(clamp((t-T.salida)/0.6,0,1));

  // El trazo de la firma: se dibuja, no aparece
  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-soft">
      <DemoHeader t={t} eyebrow="EL FIRMANTE · SIN CUENTA, SIN INSTALAR"
                  title={<span>Lo abre, lo lee y firma</span>}/>

      {/* ─────────── El correo que le llega ─────────── */}
      {coOut < 1 && (
        <div style={{position:'absolute', left:610, top:300, width:700, opacity:coP*(1-coOut),
                     transform:`translateY(${(1-coE)*24}px) scale(${lerp(1,0.62,coOut)})`}}>
          <div style={{background:'#fff', borderRadius:20, border:'1px solid #E6ECF3', boxShadow:'0 32px 74px rgba(15,23,42,0.14)', overflow:'hidden'}}>
            <div style={{padding:'26px 34px', borderBottom:'1px solid #EEF2F6', display:'flex', alignItems:'center', gap:18}}>
              {/* Logo oficial desde el CDN (doc-in · marca): nunca copia local ni recoloreado */}
              <img src="https://dinaupcdn.com/dinaup/logo-sign.svg" alt="Dinaup Sign" style={{height:38, width:'auto', display:'block'}}/>
              <div style={{width:1, height:34, background:'#EEF2F6'}}/>
              <span className="f-mono" style={{fontSize:18, color:'#94A3B8'}}>sign@dinaup.com</span>
            </div>
            <div style={{padding:'34px 34px 40px'}}>
              <div className="f-plex" style={{fontSize:20, color:'#64748B'}}>Talleres Marbán, S.L.</div>
              <div className="f-plex" style={{fontSize:28, fontWeight:700, color:'#0F172A', marginTop:8}}>te envía un documento para firmar</div>
              <div className="f-plex" style={{fontSize:23, color:'#334155', marginTop:22, padding:'18px 22px', background:'#F6F9FC', borderRadius:12, border:'1px solid #EEF2F6'}}>
                Contrato de mantenimiento anual
              </div>
              <div style={{marginTop:28, padding:'18px 0', borderRadius:13, textAlign:'center', background:'#0c8fce'}}>
                <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#fff'}}>Ver el documento</span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ─────────── El móvil del firmante ─────────── */}
      {0 < mvP && (
        <div style={{position:'absolute', left:334, top:214, opacity:mvP, transform:`translateY(${(1-mvE)*30}px)`}}>
          <PhoneFrame w={470} h={846}>
            {/* Cabecera de sign.html */}
            <div style={{padding:'34px 24px 18px', borderBottom:'1px solid #e6ecf3', background:'#fff'}}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                <img src="https://dinaupcdn.com/dinaup/logo-sign.svg" alt="Dinaup Sign" style={{height:26, width:'auto', display:'block'}}/>
                <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:6, fontSize:14, fontWeight:600,
                      color:'#0a76ac', background:'#e2f2fb', padding:'6px 12px', borderRadius:99}}>Enlace seguro</span>
              </div>
            </div>

            {/* Cuerpo: documento → firma → firmado */}
            {enDoc && (
              <div style={{padding:'20px 22px'}}>
                <div className="f-plex" style={{fontSize:15, color:'#8b99a8'}}>Talleres Marbán, S.L.</div>
                <div className="f-plex" style={{fontSize:21, fontWeight:700, color:'#16222e', marginTop:6, lineHeight:1.25}}>Contrato de mantenimiento anual</div>
                <div style={{marginTop:16, height:452, borderRadius:10, border:'1px solid #e6ecf3', background:'#fff', padding:'20px 18px', overflow:'hidden', position:'relative'}}>
                  <div style={{transform:`translateY(${-scrollDoc*268}px)`}}>
                    {[96,88,94,72,90,84,60,92,86,78,94,66,88,52,90,74,86,58,92,68].map((w,k)=>(
                      <div key={k} style={{height:9, borderRadius:99, background:k === 0 || k === 8 ? '#d3dde8' : '#eef2f6', marginBottom:12, width:w+'%'}}/>
                    ))}
                  </div>
                  {/* La barra de lectura: el documento se recorre entero */}
                  <div style={{position:'absolute', right:6, top:8, bottom:8, width:4, borderRadius:99, background:'#eef2f6'}}>
                    <div style={{position:'absolute', left:0, width:4, borderRadius:99, background:'#0c8fce',
                                 height:140, top:scrollDoc*(436-140)}}/>
                  </div>
                </div>
                <div style={{marginTop:16, display:'flex', alignItems:'center', gap:12}}>
                  <span style={{width:26, height:26, borderRadius:7, flexShrink:0, display:'grid', placeItems:'center',
                                border:`2px solid ${0 < acP ? '#0c8fce' : '#d3dde8'}`, background:0 < acP ? '#0c8fce' : '#fff'}}>
                    {0 < acP && (
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M5 12.5 L10 17 L19 7" strokeDasharray="24" strokeDashoffset={24*(1-acP)}/>
                      </svg>
                    )}
                  </span>
                  <span className="f-plex" style={{fontSize:15, color:'#566472', lineHeight:1.3}}>He leído y acepto el contenido del documento</span>
                </div>
                <div style={{marginTop:16, padding:'15px 0', borderRadius:11, textAlign:'center',
                             background:0 < acP ? '#0c8fce' : '#d3dde8'}}>
                  <span className="f-plex" style={{fontSize:18, fontWeight:700, color:'#fff'}}>Firmar documento</span>
                </div>
              </div>
            )}

            {enFirma && (
              <div style={{padding:'22px 22px'}}>
                <div className="f-plex" style={{fontSize:21, fontWeight:700, color:'#16222e'}}>Firma el documento</div>
                <div className="f-plex" style={{fontSize:14, color:'#8b99a8', marginTop:20}}>Nombre completo</div>
                <div style={{marginTop:8, padding:'14px 16px', border:'1px solid #d3dde8', borderRadius:10}}>
                  <Typewriter text="Laura Ortega Pinto" start={T.nombre} cps={13} t={t} caret
                              style={{fontSize:19, color:'#16222e'}}/>
                </div>
                <div className="f-plex" style={{fontSize:14, color:'#8b99a8', marginTop:22}}>Tu firma</div>
                <div style={{marginTop:8, height:250, borderRadius:12, border:'2px dashed #d3dde8', background:'#fbfdff', position:'relative'}}>
                  {trazoP <= 0.02 && (
                    <span className="f-plex" style={{position:'absolute', left:0, right:0, top:112, textAlign:'center', fontSize:16, color:'#b6c3d0'}}>
                      Dibuja aquí tu firma
                    </span>
                  )}
                  <svg width="290" height="110" viewBox="0 0 290 110" fill="none" style={{position:'absolute', left:66, top:72}}>
                    <path d={FIRMA_D} stroke="#16222e" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round"
                          strokeDasharray="420" strokeDashoffset={420*(1-trazoP)}/>
                  </svg>
                </div>
                <div style={{marginTop:20, padding:'15px 0', borderRadius:11, textAlign:'center',
                             background:0.9 < trazoP ? '#0c8fce' : '#d3dde8'}}>
                  <span className="f-plex" style={{fontSize:18, fontWeight:700, color:'#fff'}}>Firmar</span>
                </div>
              </div>
            )}

            {enHecho && (
              <div style={{padding:'56px 26px', textAlign:'center'}}>
                <div style={{width:104, height:104, margin:'0 auto', borderRadius:99, background:'#e4f6e8', display:'grid', placeItems:'center',
                             transform:`scale(${lerp(0.6,1,hchE)})`}}>
                  <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#1f9d3a" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12.5 L10 17 L19 7" strokeDasharray="24" strokeDashoffset={24*(1-clamp((t-T.hecho-0.2)/0.5,0,1))}/>
                  </svg>
                </div>
                <div className="f-plex" style={{fontSize:25, fontWeight:700, color:'#16222e', marginTop:26, opacity:hchP}}>Documento firmado</div>
                <div style={{marginTop:26, textAlign:'left', opacity:clamp((t-T.hecho-0.4)/0.6,0,1)}}>
                  {[['Firmado por','Laura Ortega Pinto'],['Fecha y hora','13/08/2026 · 11.24'],['Referencia','F-2026-000412']].map(([k,v])=>(
                    <div key={k} style={{display:'flex', justifyContent:'space-between', alignItems:'center', height:58, borderBottom:'1px solid #eef2f6'}}>
                      <span className="f-plex" style={{fontSize:15, color:'#8b99a8'}}>{k}</span>
                      <span className="f-mono" style={{fontSize:15, fontWeight:600, color:'#16222e'}}>{v}</span>
                    </div>
                  ))}
                </div>
                <div style={{marginTop:26, padding:'15px 0', borderRadius:11, background:'#e2f2fb', opacity:clamp((t-T.hecho-0.9)/0.6,0,1)}}>
                  <span className="f-plex" style={{fontSize:17, fontWeight:700, color:'#0a76ac'}}>Descargar tu copia</span>
                </div>
              </div>
            )}
          </PhoneFrame>
          {/* El dedo que traza */}
          <FingerTap t={t} taps={[{t:T.acepta, x:52, y:592},{t:T.trazo+1.45, x:235, y:508}]}/>
        </div>
      )}

      {/* ─────────── Las tres cosas que NO hace falta ─────────── */}
      {0 < clamp((t-T.no1)/0.4,0,1) && (
        <div style={{position:'absolute', left:960, top:262, width:800}}>
          <div className="f-plex" style={{fontSize:21, fontWeight:700, letterSpacing:'2.4px', color:'#94A3B8',
                                          opacity:clamp((t-T.no1)/0.4,0,1)}}>NO TIENE QUE</div>
          {NOES.map((n,i)=>{
            const p = clamp((t-n.start)/0.45,0,1);
            const tacha = Easing.easeInOutCubic(clamp((t-n.start-0.25)/0.55,0,1));
            return (
              <div key={n.txt} style={{position:'relative', display:'inline-block', marginTop:i === 0 ? 26 : 20, opacity:p,
                                       transform:`translateY(${(1-Easing.easeOutCubic(p))*14}px)`, width:'100%'}}>
                <span className="f-plex" style={{fontSize:46, fontWeight:700, color:'#94A3B8', letterSpacing:'-0.02em'}}>{n.txt}</span>
                <span style={{position:'absolute', left:-6, top:'52%', height:5, borderRadius:3, background:'#EF4444',
                              width:`${tacha*100}%`, maxWidth:'calc(100% + 12px)'}}/>
              </div>
            );
          })}
        </div>
      )}

      {/* ─────────── Veinte segundos ─────────── */}
      {0 < vtP && (
        <div style={{position:'absolute', left:960, top:534, opacity:vtP*clamp(1-(t-T.recuerda)/0.6,0,1),
                     transform:`translateY(${(1-Easing.easeOutBack(clamp((t-T.veinte)/0.6,0,1)))*18}px)`}}>
          <div style={{display:'inline-flex', alignItems:'baseline', gap:20, padding:'30px 56px', borderRadius:24,
                       background:'#fff', border:'2px solid #A7F3D0', boxShadow:'0 26px 60px rgba(16,185,129,0.20)'}}>
            <b className="f-mono" style={{fontSize:118, fontWeight:700, color:'#059669', lineHeight:1}}>{seg}</b>
            <span className="f-plex" style={{fontSize:44, fontWeight:700, color:'#059669'}}>segundos</span>
          </div>
          <div className="f-plex" style={{fontSize:30, color:'#64748B', marginTop:22}}>de principio a fin, sin salir del móvil</div>
        </div>
      )}

      {/* ─────────── El recordatorio: uno, no una serie ─────────── */}
      {0 < rcP && (
        <div style={{position:'absolute', left:960, top:512, width:800, opacity:rcP, transform:`translateY(${(1-rcE)*20}px)`}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:16, padding:'18px 30px', borderRadius:99,
                       background:'#FFF7ED', border:'2px solid #FED7AA'}}>
            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#C2410C" strokeWidth="2.3" strokeLinecap="round">
              <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
            </svg>
            <span className="f-plex" style={{fontSize:27, fontWeight:700, color:'#9A3412'}}>quedan menos de dos días y no ha firmado</span>
          </div>

          <div style={{display:'flex', alignItems:'center', gap:20, marginTop:38}}>
            {[0,1,2,3,4].map(k=>{
              const vivo = k === 0;
              const tacha = vivo ? 0 : Easing.easeInOutCubic(clamp((t-T.uno-0.2-k*0.09)/0.45,0,1));
              return (
                <div key={k} style={{position:'relative', opacity:vivo ? 1 : 1-unoTacha*0.55}}>
                  <svg width="104" height="76" viewBox="0 0 24 18" fill="#fff"
                       stroke={vivo ? '#FB8C00' : '#CBD5E1'} strokeWidth="1.5"
                       style={{filter:vivo ? 'drop-shadow(0 12px 26px rgba(251,140,0,0.30))' : 'none'}}>
                    <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>
                  {0 < tacha && (
                    <span style={{position:'absolute', left:6, top:'50%', height:4, borderRadius:2, background:'#EF4444',
                                  width:`${tacha*92}px`}}/>
                  )}
                </div>
              );
            })}
          </div>
          {0 < unoP && (
            <div className="f-plex" style={{fontSize:40, fontWeight:800, color:'#0F172A', marginTop:30, opacity:unoP, letterSpacing:'-0.02em'}}>
              Un recordatorio. No una serie.
            </div>
          )}
        </div>
      )}

      {0 < salE && (
        <div className="f-plex" style={{position:'absolute', left:960, top:880, width:820, fontSize:36, fontWeight:600,
                                        color:'#64748B', opacity:salE, transform:`translateY(${(1-salE)*14}px)`}}>
          Y ahora la parte que casi nadie te enseña: <span style={{color:'#0F172A', fontWeight:800}}>qué queda guardado.</span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSC03 });