// === Escena 01 — "El circuito de hoy" (contrato) ===
// Tres papeles que hay que firmar → la cinta de cinco pasos y los tres días → la foto torcida
// dentro de un correo, y la duda → cambio de fondo: entra la marca, la ficha y el documento que
// nace relleno → LA ÚNICA COSA como promesa.
// El fondo cambia de "problem" a claro en T.marca: es la frontera perceptible entre el dolor y
// la promesa (guia-presentaciones.md, partes visibles).
function EscenaSC01({ t }){
  // LOCUCIÓN (audio/escena-01.mp3): un contrato / un consentimiento / una autorización →
  // hoy son cinco pasos → imprimes, persigues, firmas, escaneas, guardas → con suerte tres días →
  // una foto torcida en un correo → podría discutirla → esto es Dinaup Sign → vive dentro del
  // programa → no empieza en blanco → empieza con los datos → sale de tu ficha / cualquiera puede
  // comprobarlo → empecemos por el envío.
  const T = {
    doc1:0.0,        // "Un contrato"
    doc2:1.29,       // "Un consentimiento"
    doc3:2.93,       // "Una autorización"
    cinta:7.70,      // "Hoy son cinco pasos"
    p1:9.83,         // "imprimes"
    p2:10.61,        // "persigues"
    p3:11.45,        // "firmas, escaneas"
    p4:12.16,        // "escaneas"
    p5:13.08,        // "guardas"
    dias:14.30,      // "con suerte, tres días"
    foto:17.75,      // "una foto torcida"
    duda:21.28,      // "podría discutirla"
    marca:22.94,     // "Esto es Dinaup Sign"
    dentro:25.40,    // "Vive dentro del programa"
    blanco:30.06,    // "no empieza en blanco"
    datos:31.79,     // "empieza con los datos"
    unica1:34.76,    // "Sale de tu ficha"
    unica2:37.98,    // "Y cualquiera puede comprobarlo"
    salida:40.20,    // "Empecemos por el envío"
  };

  // ── Los tres papeles: lo que una pyme hace firmar de verdad ──
  const PAPELES = [
    { t:'Contrato de mantenimiento',  sub:'cliente',   start:T.doc1 },
    { t:'Consentimiento de datos',    sub:'paciente',  start:T.doc2 },
    { t:'Autorización de domiciliación', sub:'proveedor', start:T.doc3 },
  ];

  // ── La cinta de cinco pasos. verde = instante en que la voz lo nombra ──
  const PASOS = [
    { n:'Imprimes',  start:T.p1, d:'M6 9V2h12v7' },
    { n:'Persigues', start:T.p2, d:'M22 2 L11 13' },
    { n:'Firmas',    start:T.p3, d:'M3 21c3-1 5-3 7-7' },
    { n:'Escaneas',  start:T.p4, d:'M3 7V3h4' },
    { n:'Guardas',   start:T.p5, d:'M4 4h12l4 4v12H4z' },
  ];

  const dolorOut = clamp((t-T.marca)/0.6,0,1);            // el dolor se apaga bajo el velo claro
  const dolorVis = dolorOut < 1;

  const p1e = Easing.easeOutCubic(clamp((t-T.cinta)/0.6,0,1));
  const diasP = clamp((t-T.dias)/0.5,0,1);
  const dias = useCountUp(0, 3, T.dias, 1.0, t);
  const fotoP = clamp((t-T.foto)/0.7,0,1), fotoE = Easing.easeOutBack(fotoP);
  const dudaP = clamp((t-T.duda)/0.5,0,1);
  const dudaPulse = t >= T.duda && t < T.duda+1.2 ? Math.sin((t-T.duda)/1.2*Math.PI) : 0;

  // Acto claro
  const veloClaro = clamp((t-T.marca)/0.7,0,1);
  const mcP = clamp((t-T.marca)/0.7,0,1), mcE = Easing.easeOutBack(mcP);
  const mcSube = Easing.easeInOutCubic(clamp((t-T.dentro)/0.8,0,1));   // la marca sube y deja sitio
  const vnP = clamp((t-T.dentro)/0.8,0,1), vnE = Easing.easeOutCubic(vnP);
  const blP = clamp((t-T.blanco)/0.6,0,1), blE = Easing.easeOutBack(blP);
  const dtP = clamp((t-T.datos)/0.6,0,1);

  // Acto Única Cosa
  const veloU = t < T.unica1 ? 0 : clamp((t-T.unica1)/0.7,0,1)*0.94;
  const u1E = Easing.easeOutCubic(clamp((t-T.unica1)/0.6,0,1));
  const u2E = Easing.easeOutCubic(clamp((t-T.unica2)/0.6,0,1));
  const salE = Easing.easeOutCubic(clamp((t-T.salida)/0.6,0,1));

  // ── Un papel esperando firma ──
  const Papel = ({ p, i })=>{
    const e = Easing.easeOutBack(clamp((t-p.start)/0.6,0,1));
    return (
      <div style={{width:400, background:'#fff', borderRadius:18, border:'1px solid #E7D9D9',
                   boxShadow:'0 24px 56px rgba(120,30,25,0.10)', padding:'30px 32px 28px',
                   opacity:clamp((t-p.start)/0.45,0,1), transform:`translateY(${(1-e)*26}px) rotate(${(i-1)*1.1}deg)`}}>
        <div style={{display:'flex', gap:5, marginBottom:20}}>
          {[0,1,2,3].map(k=> <span key={k} style={{height:9, borderRadius:99, background:'#EEF2F6', width:k === 3 ? 70 : 108}}/>)}
        </div>
        <div className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A', lineHeight:1.22}}>{p.t}</div>
        <div className="f-plex" style={{fontSize:19, color:'#94A3B8', marginTop:8}}>pendiente de firma · {p.sub}</div>
        <div style={{marginTop:26, paddingTop:20, borderTop:'1px dashed #D3DDE8', display:'flex', alignItems:'center', gap:12}}>
          <span style={{width:150, height:2, background:'#CBD5E1', display:'inline-block'}}/>
          <span className="f-plex" style={{fontSize:17, color:'#B0BCC9'}}>Firma</span>
        </div>
      </div>
    );
  };

  // ── Un paso de la cinta ──
  const Paso = ({ p, i })=>{
    const ent = clamp((t-T.cinta-i*0.08)/0.35,0,1);
    const on = t >= p.start;
    const pulse = t >= p.start && t < p.start+0.7 ? Math.sin((t-p.start)/0.7*Math.PI) : 0;
    return (
      <div style={{display:'flex', alignItems:'center', gap:26}}>
        {0 < i && (
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke={on ? '#FCA5A5' : '#E0D5D5'} strokeWidth="2.6"
               strokeLinecap="round" strokeLinejoin="round" style={{opacity:ent, marginTop:-40}}>
            <path d="M8 5 L16 12 L8 19"/>
          </svg>
        )}
        <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:18, opacity:ent,
                     transform:`translateY(${(1-ent)*10}px) scale(${1+pulse*0.06})`}}>
          <div style={{width:150, height:150, borderRadius:34, display:'grid', placeItems:'center',
                       background:on ? '#FEF2F2' : '#fff', border:`2px solid ${on ? '#EF4444' : '#E7DEDE'}`,
                       boxShadow:0 < pulse ? `0 0 ${pulse*48}px rgba(239,68,68,0.45)` : '0 10px 26px rgba(120,30,25,0.07)'}}>
            <svg width="70" height="70" viewBox="0 0 24 24" fill="none" stroke={on ? '#EF4444' : '#C6B7B7'}
                 strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <path d={p.d}/><rect x="3" y="9" width="18" height="8" rx="1.6"/>
            </svg>
          </div>
          <span className="f-plex" style={{fontSize:32, fontWeight:on ? 700 : 500, color:on ? '#B42318' : '#A79797'}}>{p.n}</span>
        </div>
      </div>
    );
  };

  return (
    <SlideCanvas variant="problem">
      {/* El fondo claro entra en T.marca: frontera perceptible entre el dolor y la promesa */}
      {0 < veloClaro && (
        <div style={{position:'absolute', inset:0, opacity:veloClaro,
                     background:'radial-gradient(ellipse 70% 50% at 50% 22%, rgba(0,133,255,0.12), transparent 62%), linear-gradient(180deg,#FFFFFF 0%,#F0F7FF 100%)'}}/>
      )}

      {dolorVis && (
        <div style={{opacity:1-dolorOut}}>
          <DemoHeader t={t} eyebrow="DINAUP SIGN · FIRMA ELECTRÓNICA" color="#B42318"
                      title={<span>Lo que hoy cuesta una firma</span>}/>

          {/* ── Los tres papeles ── */}
          <div style={{position:'absolute', left:0, right:0, top:236, display:'flex', justifyContent:'center', gap:34,
                       opacity:clamp(1-(t-T.cinta)/0.7,0,1), transform:`translateY(${clamp((t-T.cinta)/0.7,0,1)*-24}px)`}}>
            {PAPELES.map((p,i)=> <Papel key={p.t} p={p} i={i}/>)}
          </div>

          {/* ── La cinta de cinco pasos ── */}
          {0 < p1e && (
            <div style={{position:'absolute', left:0, right:0, top:336, opacity:p1e*clamp(1-(t-T.foto)/0.6,0,1),
                         transform:`translateY(${(1-p1e)*22}px)`}}>
              <div style={{display:'flex', justifyContent:'center', alignItems:'flex-start', gap:22}}>
                {PASOS.map((p,i)=> <Paso key={p.n} p={p} i={i}/>)}
              </div>
              {0 < diasP && (
                <div style={{display:'flex', justifyContent:'center', marginTop:96, opacity:diasP}}>
                  <div style={{display:'inline-flex', alignItems:'baseline', gap:24, padding:'30px 62px', borderRadius:99,
                               background:'#fff', border:'2px solid #FCA5A5', boxShadow:'0 24px 56px rgba(180,35,24,0.16)'}}>
                    <span className="f-plex" style={{fontSize:32, color:'#64748B'}}>y con suerte</span>
                    <b className="f-mono" style={{fontSize:96, fontWeight:700, color:'#B42318', lineHeight:1}}>{dias}</b>
                    <span className="f-plex" style={{fontSize:44, fontWeight:700, color:'#B42318'}}>días</span>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* ── El correo con la foto torcida ── */}
          {0 < fotoP && (
            <div style={{position:'absolute', left:560, top:268, width:800, opacity:fotoP,
                         transform:`translateY(${(1-fotoE)*26}px)`}}>
              <div style={{background:'#fff', borderRadius:20, border:'1px solid #E6ECF3', boxShadow:'0 30px 70px rgba(15,23,42,0.13)', overflow:'hidden'}}>
                <div style={{padding:'22px 30px', borderBottom:'1px solid #EEF2F6', background:'#F8FAFC'}}>
                  <div className="f-plex" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>RE: contrato firmado</div>
                  <div className="f-plex" style={{fontSize:18, color:'#94A3B8', marginTop:6}}>de laura.ortega@correo.es · 1 archivo adjunto</div>
                </div>
                <div style={{padding:'42px 30px 48px', display:'grid', placeItems:'center', background:'#F6F8FB'}}>
                  <div style={{width:392, height:296, background:'#fff', border:'1px solid #E2E8F0', borderRadius:8,
                               transform:'rotate(-3.4deg)', boxShadow:'0 16px 40px rgba(15,23,42,0.14)', overflow:'hidden',
                               filter:'saturate(0.35) contrast(0.92)'}}>
                    <div style={{padding:'26px 28px'}}>
                      {[0,1,2,3,4,5].map(k=>(
                        <div key={k} style={{height:11, borderRadius:99, background:'#E7ECF2', marginBottom:14,
                                             width:[100,92,96,64,88,42][k]+'%'}}/>
                      ))}
                      <div style={{marginTop:34, height:44, width:210, borderRadius:6, background:'linear-gradient(105deg,#E9EEF4,#DCE4EC)'}}/>
                    </div>
                  </div>
                  <div className="f-mono" style={{fontSize:19, color:'#94A3B8', marginTop:22}}>contrato_escaneado_final_2.jpg · 4,1 MB</div>
                </div>
              </div>
              {0 < dudaP && (
                <div style={{position:'absolute', left:0, right:0, top:474, display:'flex', justifyContent:'center', opacity:dudaP}}>
                  <div style={{display:'inline-flex', alignItems:'center', gap:16, padding:'20px 40px', borderRadius:99,
                               background:'#B42318', boxShadow:`0 18px 44px rgba(180,35,24,${0.3+dudaPulse*0.35})`}}>
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round">
                      <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>
                    </svg>
                    <span className="f-plex" style={{fontSize:32, fontWeight:700, color:'#fff'}}>¿y si alguien la discute?</span>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* ─────────── La promesa: la marca, la ficha, el documento que nace relleno ─────────── */}
      {0 < mcP && (
        <div style={{position:'absolute', left:0, right:0, top:lerp(400, 132, mcSube), textAlign:'center',
                     opacity:mcE*(1-veloU/0.94), transform:`scale(${lerp(1.14, 1, Math.max(mcE, mcSube))})`}}>
          {/* Logo oficial, siempre desde el CDN y en la variante del fondo (doc-in · marca) */}
          <img src="https://dinaupcdn.com/dinaup/logo-sign.svg" alt="Dinaup Sign"
               style={{height:0 < mcSube ? 84 : 106, width:'auto', display:'block', margin:'0 auto'}}/>
          <div className="f-plex" style={{fontSize:26, color:'#64748B', marginTop:14, opacity:1-mcSube}}>
            firma electrónica, dentro de tu programa
          </div>
        </div>
      )}

      {0 < vnP && (
        <div style={{position:'absolute', left:150, top:290, width:1620, opacity:vnE*(1-veloU/0.94),
                     transform:`translateY(${(1-vnE)*28}px)`, filter:0 < veloU ? 'saturate(0.5)' : 'none'}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 34px 84px rgba(15,23,42,0.14)', overflow:'hidden'}}>
            <BrowserChrome url="play.dinaup.com/App/Pymes/Customers" title="Talleres Marbán, S.L."/>
            <div style={{display:'flex', height:600}}>
              {/* Izquierda: la ficha del cliente */}
              <div style={{width:700, flexShrink:0, borderRight:'1px solid #EEF2F6', padding:'30px 34px'}}>
                <div className="f-plex" style={{fontSize:15, fontWeight:700, letterSpacing:'2.4px', color:'#94A3B8'}}>FICHA DE CLIENTE</div>
                <div className="f-plex" style={{fontSize:38, fontWeight:800, color:'#0F172A', marginTop:10, letterSpacing:'-0.02em'}}>Laura Ortega Pinto</div>
                <div className="f-mono" style={{fontSize:20, color:'#94A3B8', marginTop:8}}>CLI-2041 · Alta 14/03/2024</div>
                <div style={{display:'flex', gap:10, marginTop:26}}>
                  {['General','Facturas','Contactos','Firmas'].map((s,i)=>(
                    <span key={s} className="f-plex" style={{padding:'11px 20px', borderRadius:10, fontSize:19,
                          fontWeight:i === 3 ? 700 : 500,
                          color:i === 3 ? '#0085FF' : '#64748B',
                          background:i === 3 ? 'rgba(0,133,255,0.10)' : 'transparent',
                          border:`1px solid ${i === 3 ? 'rgba(0,133,255,0.30)' : 'transparent'}`}}>{s}</span>
                  ))}
                </div>
                <div style={{marginTop:30, paddingTop:24, borderTop:'1px solid #F1F5F9'}}>
                  {[['Domicilio','Av. de la Constitución 44, Cáceres'],['Documento de identidad','· · · · · 812 K'],['Teléfono','606 41 02 88']].map(([k,v])=>(
                    <div key={k} style={{display:'flex', justifyContent:'space-between', alignItems:'center', height:66, borderBottom:'1px solid #F4F7FA'}}>
                      <span className="f-plex" style={{fontSize:19, color:'#94A3B8'}}>{k}</span>
                      <span className="f-plex" style={{fontSize:19, fontWeight:500, color:'#334155'}}>{v}</span>
                    </div>
                  ))}
                </div>
              </div>
              {/* Derecha: el documento que nace relleno */}
              <div style={{flex:'1 1 auto', background:'#F6F8FB', display:'grid', placeItems:'center'}}>
                {0 < blP && (
                  <div style={{width:560, background:'#fff', borderRadius:12, border:'1px solid #E2E8F0',
                               boxShadow:'0 24px 56px rgba(15,23,42,0.12)', padding:'40px 44px', opacity:blP,
                               transform:`translateY(${(1-blE)*20}px)`}}>
                    <div className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>Contrato de mantenimiento anual</div>
                    <div style={{marginTop:28}}>
                      {[['Firmante','Laura Ortega Pinto'],['Domicilio','Av. de la Constitución 44'],['Fecha','13 de agosto de 2026']].map(([k,v],i)=>{
                        const p = clamp((t-T.datos-i*0.28)/0.5,0,1);
                        return (
                          <div key={k} style={{height:68, borderBottom:'1px solid #F4F7FA', display:'flex', flexDirection:'column', justifyContent:'center', gap:7}}>
                            <span className="f-plex" style={{fontSize:16, color:'#94A3B8'}}>{k}</span>
                            {p < 1 && (
                              <span style={{display:'block', height:15, width:`${[74,86,58][i]}%`, borderRadius:99,
                                            border:'2px dashed #CBD5E1', opacity:1-p}}/>
                            )}
                            {0 < p && (
                              <span className="f-plex" style={{position:'relative', marginTop:p < 1 ? -15 : 0, fontSize:21, fontWeight:600, color:'#0F172A',
                                        opacity:p, transform:`translateY(${(1-Easing.easeOutCubic(p))*8}px)`}}>{v}</span>
                            )}
                          </div>
                        );
                      })}
                    </div>
                    {0 < dtP && (
                      <div className="f-plex" style={{marginTop:26, fontSize:20, fontWeight:600, color:'#059669', opacity:dtP}}>
                        · sale de la ficha, ya relleno
                      </div>
                    )}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ─────────── LA ÚNICA COSA (promesa) ─────────── */}
      {0 < veloU && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloU}}/>}
      {0 < u1E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:392, textAlign:'center', fontSize:72, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          Sale de tu ficha, y vuelve firmado a tu ficha.
        </div>
      )}
      {0 < u2E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:516, textAlign:'center', fontSize:72, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">Y cualquiera puede comprobarlo.</span>
        </div>
      )}
      {0 < salE && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:684, textAlign:'center', fontSize:34, fontWeight:500,
                                        color:'#64748B', opacity:salE, transform:`translateY(${(1-salE)*12}px)`}}>
          Empecemos por el envío.
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSC01 });