// === Escena 01 — "Paso 1 · El documento" (contrato) ===
// El documento dinámico y sus preguntas. La pregunta que apunta a una sección es la que decide en
// qué ficha aparecerá luego el tipo (DinaupSignView.CargarSeccionDeLosDocumentosAsync: se recogen
// la sección propia del documento y las secciones relacionadas de sus variables Guid).
// Y la regla que evita el error clásico: lo que la persona acepta va IMPRESO desde su ficha,
// nunca como casilla para marcar encima del visor.
function EscenaSF01({ t }){
  // LOCUCIÓN (audio/escena-01.mp3): vamos a montar un documento de principio a fin → sin que
  // vuelvas a tocar nada → empezamos por el documento dinámico → el texto y las preguntas → de
  // quién habla → una es la importante: a qué ficha apunta → si preguntas por la entidad / por el
  // empleado → lo que esa persona tiene que aceptar → va impreso dentro del texto → nada de
  // casillas → vamos a darlo de alta.
  const T = {
    head:0.0,        // "Vamos a montar un documento"
    mapa:2.22,       // "de principio a fin"
    promesa:7.28,    // "sin que tú vuelvas a tocar nada"
    doc:9.78,        // "Empezamos por el documento dinámico"
    texto:14.48,     // "el texto, y las preguntas"
    dequien:17.68,   // "de quién habla"
    clave:20.65,     // "es la importante"
    apunta:22.34,    // "a qué ficha apunta"
    entidad:24.35,   // "Si preguntas por la entidad"
    empleado:28.77,  // "Si preguntas por el empleado"
    acepta:32.86,    // "lo que esa persona tiene que aceptar"
    comercial:35.94, // "comunicaciones comerciales"
    impreso:37.86,   // "va impreso dentro del texto"
    casillas:41.65,  // "Nada de casillas"
    salida:44.14,    // "Vamos a darlo de alta"
  };

  const prP = clamp((t-T.promesa)/0.6,0,1);
  const prOut = clamp((t-T.doc)/0.5,0,1);
  const dcP = clamp((t-T.doc)/0.7,0,1), dcE = Easing.easeOutCubic(dcP);
  const txP = clamp((t-T.texto)/0.6,0,1);
  const clGlow = t >= T.clave && t < T.clave+1.4 ? Math.sin((t-T.clave)/1.4*Math.PI) : 0;
  const apP = clamp((t-T.apunta)/0.5,0,1);
  const enP = clamp((t-T.entidad)/0.5,0,1);
  const emP = clamp((t-T.empleado)/0.5,0,1);
  const acP = clamp((t-T.acepta)/0.6,0,1), acE = Easing.easeOutCubic(acP);
  const coGlow = t >= T.comercial && t < T.comercial+1.2 ? Math.sin((t-T.comercial)/1.2*Math.PI) : 0;
  const imP = clamp((t-T.impreso)/0.5,0,1);
  const csP = clamp((t-T.casillas)/0.5,0,1);
  const csTacha = Easing.easeInOutCubic(clamp((t-T.casillas-0.25)/0.6,0,1));
  const salE = Easing.easeOutCubic(clamp((t-T.salida)/0.6,0,1));

  // Las preguntas del documento. La de tipo ficha es la que decide dónde aparecerá el tipo.
  const PREGUNTAS = [
    { n:'La Entidad',        tipo:'ficha de Entidades', clave:true,  start:T.dequien },
    { n:'Fecha del contrato', tipo:'fecha',             clave:false, start:T.dequien+0.5 },
    { n:'Comercial asignado', tipo:'texto',             clave:false, start:T.dequien+1.0 },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="TUTORIAL · MONTAR UN DOCUMENTO PARA FIRMAR"
                  title={<span>Paso 1: el documento y sus preguntas</span>}/>
      <PasosSign t={t} activo={1} start={T.mapa}/>

      {/* Lo que vamos a conseguir (contrato), antes de tocar nada */}
      {0 < prP && prOut < 1 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:296, textAlign:'center',
                                        fontSize:38, fontWeight:600, color:'#64748B',
                                        opacity:prP*(1-prOut), transform:`translateY(${-prOut*18}px)`}}>
          Al acabar, tus clientes lo tendrán en su ficha <b style={{color:'#0F172A'}}>sin que vuelvas a tocar nada.</b>
        </div>
      )}

      {/* ─────────── El documento dinámico: texto a la izquierda, preguntas a la derecha ─────────── */}
      {0 < dcP && (
        <div style={{position:'absolute', left:120, right:120, top:270, opacity:dcE,
                     transform:`translateY(${(1-dcE)*24}px)`}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 640px', gap:36, alignItems:'start'}}>

            {/* El texto del documento */}
            <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 24px 58px rgba(15,23,42,0.10)', overflow:'hidden'}}>
              <div style={{padding:'20px 30px', 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 servicio</span>
                <span className="f-mono" style={{fontSize:17, color:'#94A3B8'}}>documento dinámico</span>
              </div>
              <div style={{padding:'34px 36px 38px', fontSize:21, lineHeight:1.9, color:'#334155'}} className="f-plex">
                <div style={{opacity:txP}}>
                  De una parte <b style={{color:'#0F172A'}}>Talleres Marbán, S.L.</b>, y de la otra
                  <span style={{padding:'2px 8px', margin:'0 4px', borderRadius:7, background:'rgba(0,133,255,0.10)',
                                color:'#0066CC', fontWeight:600}}>{'{la entidad}'}</span>,
                </div>
                <div style={{opacity:txP}}>acuerdan la prestación del servicio en las condiciones que siguen.</div>

                {/* El consentimiento: impreso, resuelto desde la ficha */}
                {0 < acP && (
                  <div style={{marginTop:26, paddingTop:22, borderTop:'1px dashed #D3DDE8', opacity:acP,
                               transform:`translateY(${(1-acE)*12}px)`}}>
                    <span style={{textShadow:0 < coGlow ? `0 0 ${coGlow*20}px rgba(0,133,255,0.5)` : 'none'}}>
                      ¿Acepta recibir comunicaciones comerciales?
                    </span>
                    <b className="f-plex" style={{marginLeft:14, padding:'4px 16px', borderRadius:8, fontSize:22,
                          background:0 < imP ? 'rgba(16,185,129,0.14)' : '#F1F5F9',
                          color:0 < imP ? '#059669' : '#94A3B8', opacity:clamp(imP*1.4,0,1)}}>Sí</b>
                    {0 < imP && (
                      <div className="f-plex" style={{fontSize:18, color:'#059669', marginTop:10, opacity:imP}}>
                        impreso desde la ficha, no marcado por quien firma
                      </div>
                    )}
                  </div>
                )}

                {/* La casilla que NO se pone */}
                {0 < csP && (
                  <div style={{position:'relative', display:'inline-flex', alignItems:'center', gap:14, marginTop:22,
                               padding:'14px 18px', borderRadius:11, border:'2px dashed #FCA5A5', background:'#FEF2F2', opacity:csP}}>
                    <span style={{width:26, height:26, borderRadius:6, border:'2px solid #CBD5E1', background:'#fff', flexShrink:0}}/>
                    <span className="f-plex" style={{fontSize:20, color:'#94A3B8'}}>Acepto recibir comunicaciones</span>
                    <span style={{position:'absolute', left:10, right:10, top:'50%', height:4, borderRadius:2, background:'#EF4444',
                                  transform:`scaleX(${csTacha})`, transformOrigin:'left'}}/>
                  </div>
                )}
              </div>
            </div>

            {/* Las preguntas del documento */}
            <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 24px 58px rgba(15,23,42,0.10)', overflow:'hidden'}}>
              <div style={{padding:'20px 28px', borderBottom:'1px solid #EEF2F6', background:'#F8FAFC'}}>
                <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>Preguntas del documento</span>
              </div>
              <div style={{padding:'14px 28px 24px'}}>
                {PREGUNTAS.map(q=>{
                  const p = clamp((t-q.start)/0.5,0,1);
                  const encendida = q.clave && t >= T.clave;
                  return (
                    <div key={q.n} style={{display:'flex', alignItems:'center', gap:16, minHeight:88, padding:'12px 16px', borderRadius:12,
                                           marginTop:10, opacity:p, transform:`translateY(${(1-Easing.easeOutCubic(p))*12}px)`,
                                           border:`2px solid ${encendida ? '#0085FF' : '#EEF2F6'}`,
                                           background:encendida ? 'rgba(0,133,255,0.06)' : '#fff',
                                           boxShadow:0 < clGlow && q.clave ? `0 0 ${clGlow*34}px rgba(0,133,255,0.4)` : 'none'}}>
                      <span style={{width:44, height:44, borderRadius:11, flexShrink:0, display:'grid', placeItems:'center',
                                    background:encendida ? 'rgba(0,133,255,0.14)' : '#F1F5F9'}}>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={encendida ? '#0085FF' : '#94A3B8'}
                             strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round">
                          {q.clave ? <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>
                                   : <><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 10h16"/></>}
                        </svg>
                      </span>
                      <div style={{lineHeight:1.32}}>
                        <div className="f-plex" style={{fontSize:22, fontWeight:600, color:'#0F172A'}}>{q.n}</div>
                        <div className="f-plex" style={{fontSize:18, color:encendida ? '#0066CC' : '#94A3B8'}}>{q.tipo}</div>
                      </div>
                    </div>
                  );
                })}

                {/* La consecuencia de esa pregunta: dónde va a aparecer luego */}
                {0 < apP && (
                  <div style={{marginTop:24, paddingTop:20, borderTop:'1px solid #F1F5F9', opacity:apP}}>
                    <div className="f-plex" style={{fontSize:18, fontWeight:700, letterSpacing:'2px', color:'#94A3B8'}}>
                      A QUÉ FICHA APUNTA
                    </div>
                    {[{n:'Preguntas por la entidad', r:'saldrá en las fichas de clientes', on:0 < enP, start:T.entidad},
                      {n:'Preguntas por el empleado', r:'saldrá en las fichas de empleados', on:0 < emP, start:T.empleado}].map(o=>{
                      const p = clamp((t-o.start)/0.5,0,1);
                      return (
                        <div key={o.n} style={{display:'flex', alignItems:'center', gap:14, marginTop:14, opacity:p}}>
                          <span className="f-plex" style={{fontSize:20, fontWeight:600, color:'#0F172A'}}>{o.n}</span>
                          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                            <path d="M8 5 L16 12 L8 19"/>
                          </svg>
                          <span className="f-plex" style={{fontSize:20, color:'#0066CC'}}>{o.r}</span>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

      {0 < salE && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:996, textAlign:'center', fontSize:34, fontWeight:500,
                                        color:'#64748B', opacity:salE, transform:`translateY(${(1-salE)*12}px)`}}>
          Vamos a darlo de alta.
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSF01 });