// === Escena 01 — "Cuatro botones, una sola clase" (contrato) ===
// La ventana de alta de Dinaup Terminal: «Agregar Documentos dinámicos», cuatro botones en
// rejilla 2x2 + «Cancelar», y nada más (TERM\SeleccionarTipoDePlantillaScriptF.Designer.vb:258-262).
// Los cuatro fijan la MISMA clase (Documento_Lectura_Libre) y solo cambian la extensión y el
// HTML de ejemplo que se baja del CDN (:23-25, 47-49, 71-73, 93-95). Si la descarga falla se
// sigue en silencio (timeout 3 s, catch vacío, :27-34) y entra un saludo de fábrica
// (TERM\FuncionAPIF.vb:489-491, 1002). Al pulsar, el editor sale ENCIMA: la ventana de alta NO
// se cierra (:37-39; el único Me.Close() es «Cancelar», :11-13).
function EscenaPL01({ t }){
  const T = {
    head:0.1,        // "En Dinaup Terminal"
    ventana:1.4,     // "un documento nuevo empieza en esta ventana"
    botones:4.5,     // "Cuatro botones."
    tipos:6.8,       // "cuatro tipos distintos"
    nolo:9.6,        // "No lo son."
    clase:13.0,      // "la misma clase"
    ext:16.0,        // "la extensión del archivo"
    cdn:17.6,        // "el ejemplo que se descarga"
    falla:22.0,      // "Si esa descarga falla"
    saludo:24.0,     // "queda un saludo de ejemplo"
    sinAviso:25.6,   // "nadie te avisa"
    click:27.4,      // "Pulsas el primero"
    unica1:33.2,     // "El documento es una plantilla tuya"
    unica2:37.8,     // "no sale impreso"
    salida:41.1,     // "se abre ahora"
    botonStep:0.13,   // cascada entre los cuatro botones
    tipoStep:0.15,    // cascada de las cuatro etiquetas de "tipo"
    extStep:0.10,     // cascada de las cuatro extensiones
  };

  // ── Geometría del lienzo ──
  const WX=150, WY=210, WW=1080, WH=556;      // ventana de alta
  const BODY = WY + 64;                        // techo del cuerpo (bajo la barra de título)
  const BW=400, BH=94;
  const COL=[112, 568], ROW=[96, 222];         // coordenadas LOCALES de la rejilla 2x2
  const cx = i => WX + COL[i%2] + BW/2;        // centro X del botón i, en lienzo
  const cy = i => BODY + ROW[i<2?0:1] + BH/2;  // centro Y del botón i, en lienzo
  const RX=1290, RW=570;                       // columna derecha (CDN + saludo)
  const CHIP = { x:690, y:826 };               // chip «Documento - Libre»

  const BTN = [
    { label:'Plantilla A4',  ext:'.pdf',  tipo:'un PDF' },
    { label:'Archivo CSV',   ext:'.csv',  tipo:'una hoja' },
    { label:'Reporte HTML',  ext:'.html', tipo:'una web' },
    { label:'Archivo JSON',  ext:'.json', tipo:'unos datos' },
  ];

  // ── Progresos ──
  const hdP  = clamp((t-T.head)/0.6,0,1);
  const vnP  = clamp((t-T.ventana)/0.8,0,1), vnE = Easing.easeOutCubic(vnP);
  const tpOut= clamp((t-T.nolo)/0.35,0,1);                    // las etiquetas de "tipo" se apagan
  const clP  = clamp((t-T.clase)/0.9,0,1), clDot = Easing.easeInOutCubic(clP);
  const chP  = clamp((t-T.clase-0.55)/0.55,0,1), chE = Easing.easeOutBack(chP);
  const cdnP = clamp((t-T.cdn)/0.6,0,1), cdnE = Easing.easeOutBack(cdnP);
  const cdnDraw = Easing.easeInOutCubic(clamp((t-T.cdn)/0.85,0,1));
  const faP  = clamp((t-T.falla)/0.5,0,1);
  const saP  = clamp((t-T.saludo)/0.6,0,1), saE = Easing.easeOutBack(saP);
  const avP  = clamp((t-T.sinAviso)/0.5,0,1);
  const press= t >= T.click && t < T.click+0.34;

  // La Única Cosa (promesa) — el velo entra y se retira para la salida
  const veloIn  = clamp((t-T.unica1)/0.7,0,1);
  const veloOut = clamp((t-(T.salida-0.85))/0.55,0,1);
  const veloOp  = veloIn*(1-veloOut)*0.93;
  const u1P = clamp((t-T.unica1)/0.6,0,1)*(1-veloOut), u1E = Easing.easeOutCubic(clamp((t-T.unica1)/0.6,0,1));
  const u2P = clamp((t-T.unica2)/0.6,0,1)*(1-veloOut), u2E = Easing.easeOutCubic(clamp((t-T.unica2)/0.6,0,1));

  // Salida: el editor entra ENCIMA y la de alta se queda detrás
  const edP = clamp((t-T.salida)/0.75,0,1), edE = Easing.easeOutBack(edP);
  const atenuaSal = 1 - edP*0.78;   // lo demás cede el sitio a las dos ventanas

  // ── Ventana de escritorio de Dinaup Terminal ──
  const Ventana = ({ x, y, w, h, titulo, op=1, dy=0, sc=1, dim=0, children })=>(
    <div style={{position:'absolute', left:x, top:y, width:w, height:h, opacity:op,
                 transform:`translateY(${dy}px) scale(${sc})`, transformOrigin:'50% 50%'}}>
      <div style={{position:'absolute', inset:0, background:'#313236', borderRadius:14,
                   border:'1px solid #45484F', boxShadow:'0 42px 96px rgba(2,6,23,0.50)', overflow:'hidden'}}>
        <div style={{position:'absolute', left:0, right:0, top:0, height:64, background:'linear-gradient(180deg,#2C2E33,#25272B)',
                     borderBottom:'1px solid #3C3F45', display:'flex', alignItems:'center', gap:15, padding:'0 18px'}}>
          <div style={{width:36, height:36, borderRadius:9, background:'linear-gradient(135deg,#0085FF,#0063BE)',
                       display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.9">
              <path d="M6 3 H14 L19 8 V21 H6 Z" strokeLinejoin="round"/><path d="M14 3 V8 H19"/>
            </svg>
          </div>
          <span className="f-plex" style={{fontSize:28, fontWeight:700, color:'#F2F5F9', letterSpacing:'-0.01em'}}>{titulo}</span>
          <div style={{flex:1}}/>
          <div style={{display:'flex', gap:24, opacity:0.65}}>
            <svg width="15" height="15" viewBox="0 0 16 16"><path d="M2 8 H14" stroke="#A9B0BA" strokeWidth="1.6"/></svg>
            <svg width="15" height="15" viewBox="0 0 16 16"><rect x="2.5" y="2.5" width="11" height="11" fill="none" stroke="#A9B0BA" strokeWidth="1.6"/></svg>
            <svg width="15" height="15" viewBox="0 0 16 16"><path d="M3 3 L13 13 M13 3 L3 13" stroke="#A9B0BA" strokeWidth="1.6"/></svg>
          </div>
        </div>
        <div style={{position:'absolute', left:0, right:0, top:64, bottom:0}}>{children}</div>
        {dim > 0 && <div style={{position:'absolute', inset:0, background:'#0B1220', opacity:dim}}/>}
      </div>
    </div>
  );

  // ── Un botón de la rejilla ──
  const Boton = ({ i })=>{
    const b = BTN[i];
    const p = clamp((t-T.botones-i*T.botonStep)/0.45,0,1), e = Easing.easeOutBack(p);
    const marca = clP > 0;
    const pulsado = press && i === 0;
    const exP = clamp((t-T.ext-i*T.extStep)/0.4,0,1);
    return (
      <div style={{position:'absolute', left:COL[i%2], top:ROW[i<2?0:1], width:BW, height:BH,
                   borderRadius:10, background:pulsado ? '#0F6FD1' : 'linear-gradient(180deg,#43464D,#3A3D43)',
                   border:`2px solid ${pulsado ? '#0085FF' : (marca ? 'rgba(0,133,255,0.85)' : '#565A62')}`,
                   boxShadow: marca ? '0 0 0 4px rgba(0,133,255,0.14), 0 14px 30px rgba(2,6,23,0.35)' : '0 10px 24px rgba(2,6,23,0.30)',
                   display:'flex', alignItems:'center', gap:14, padding:'0 22px',
                   opacity:clamp(p*1.3,0,1), transform:`scale(${lerp(0.88,1,e)}) translateY(${(1-e)*10}px)`}}>
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#CFD6DF" strokeWidth="1.8" style={{flexShrink:0}}>
          <path d="M6 3 H14 L19 8 V21 H6 Z" strokeLinejoin="round"/><path d="M14 3 V8 H19"/>
        </svg>
        <span className="f-plex" style={{fontSize:27, fontWeight:600, color:'#F2F5F9'}}>{b.label}</span>
        <div style={{flex:1}}/>
        {exP > 0 && (
          <span className="f-mono" style={{fontSize:19, fontWeight:700, color:'#56E16A', background:'rgba(86,225,106,0.12)',
                        border:'1px solid rgba(86,225,106,0.28)', borderRadius:7, padding:'4px 10px', opacity:exP}}>{b.ext}</span>
        )}
      </div>
    );
  };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="PLANTILLAS DE IMPRESIÓN · CÓMO SE MONTAN" title={<span>Dónde empieza un documento</span>}/>

      {/* Chip de contexto — en qué aplicación estamos */}
      <div style={{position:'absolute', left:1546, top:46, opacity:hdP, transform:`translateY(${(1-hdP)*-10}px)`}}>
        <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:10, padding:'11px 20px',
                      background:'rgba(15,23,42,0.94)', color:'#fff', borderRadius:12, fontSize:17, fontWeight:700, letterSpacing:'2.4px'}}>
          <span style={{width:9, height:9, borderRadius:99, background:'#56E16A'}}/>
          DINAUP TERMINAL
        </span>
      </div>

      {/* ─────────── La ventana de alta ─────────── */}
      {vnP > 0 && (
        <Ventana x={WX} y={WY} w={WW} h={WH} titulo="Agregar Documentos dinámicos"
                 op={clamp(vnP*1.4,0,1)} dy={(1-vnE)*22} dim={edP*0.55}>
          {[0,1,2,3].map(i => <Boton key={i} i={i}/>)}
          {/* «Cancelar» — el quinto y último control de esta ventana */}
          <div style={{position:'absolute', left:WW-40-180, top:406, width:180, height:58, borderRadius:9,
                       background:'#3A3D43', border:'1px solid #565A62', display:'flex', alignItems:'center', justifyContent:'center',
                       opacity:clamp((t-T.botones-4*T.botonStep)/0.45,0,1)}}>
            <span className="f-plex" style={{fontSize:24, fontWeight:600, color:'#C3CAD4'}}>Cancelar</span>
          </div>
        </Ventana>
      )}

      {/* Las cuatro etiquetas de "tipo": lo que el principiante cree que está eligiendo */}
      {clamp((t-T.tipos)/0.4,0,1) > 0 && tpOut < 1 && (
        <>
          {BTN.map((b,i)=>{
            const p = clamp((t-T.tipos-i*T.tipoStep)/0.4,0,1), e = Easing.easeOutBack(p);
            return (
              <div key={b.tipo} style={{position:'absolute', left:WX+COL[i%2]+18, top:BODY+ROW[i<2?0:1]-24,
                                        opacity:clamp(p*1.3,0,1)*(1-tpOut), transform:`scale(${lerp(0.7,1,e)}) translateY(${tpOut*-10}px)`,
                                        transformOrigin:'left center'}}>
                <span className="f-plex" style={{display:'inline-block', padding:'6px 16px', borderRadius:99,
                              background:'#FFF7EC', border:'1px solid #FBCB8C', color:'#B45309', fontSize:21, fontWeight:700,
                              boxShadow:'0 8px 20px rgba(251,140,0,0.22)'}}>¿{b.tipo}?</span>
              </div>
            );
          })}
        </>
      )}

      {/* Los cuatro convergen: puntos que viajan del botón al chip de la clase */}
      {clP > 0 && (
        <svg style={{position:'absolute', inset:0, pointerEvents:'none'}} width="1920" height="1080">
          {[0,1,2,3].map(i=>{
            const d = clamp((clDot - i*0.05)/0.9, 0, 1);
            const px = lerp(cx(i), CHIP.x, d);
            const py = lerp(cy(i), CHIP.y-6, d) - Math.sin(d*Math.PI)*26;
            return <circle key={i} cx={px} cy={py} r={9} fill="#0085FF" opacity={d < 1 ? 0.9 : 0}/>;
          })}
        </svg>
      )}
      {chP > 0 && (
        <div style={{position:'absolute', left:CHIP.x, top:CHIP.y, textAlign:'center', whiteSpace:'nowrap',
                     opacity:clamp(chP*1.3,0,1)*atenuaSal, transform:`translateX(-50%) scale(${lerp(0.8,1,chE)})`,
                     transformOrigin:'50% 0'}}>
          <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:14, padding:'16px 34px', borderRadius:14,
                        background:'#fff', border:'2px solid #0085FF', boxShadow:'0 20px 46px rgba(0,133,255,0.24)'}}>
            <span className="f-mono" style={{fontSize:16, fontWeight:700, letterSpacing:'2.4px', color:'#94A3B8'}}>CLASE</span>
            <span style={{fontSize:34, fontWeight:800, color:'#0085FF', letterSpacing:'-0.02em'}}>Documento - Libre</span>
            <span className="f-plex" style={{fontSize:24, fontWeight:600, color:'#64748B'}}>· los cuatro</span>
          </span>
          <div className="f-mono" style={{fontSize:18, color:'#94A3B8', marginTop:14}}>
            TipoPlantillaImpresionE.Documento_Lectura_Libre
          </div>
        </div>
      )}

      {/* ─────────── El ejemplo que se descarga del CDN ─────────── */}
      {cdnP > 0 && (
        <>
          <svg style={{position:'absolute', inset:0, pointerEvents:'none'}} width="1920" height="1080">
            <path d={`M ${WX+COL[1]+BW} ${BODY+ROW[0]+BH/2} C 1210 ${BODY+ROW[0]+BH/2}, 1230 372, ${RX-14} 372`}
                  pathLength="100" fill="none" stroke={faP > 0 ? '#B6BDC8' : '#0085FF'} strokeWidth="3.5"
                  strokeDasharray="100" strokeDashoffset={100*(1-cdnDraw*(faP > 0 ? 0.52 : 1))} strokeLinecap="round"/>
            {faP > 0 && (
              <g opacity={faP} transform="translate(1215,362)">
                <path d="M-13 -13 L13 13 M13 -13 L-13 13" stroke="#94A3B8" strokeWidth="4" strokeLinecap="round"/>
              </g>
            )}
          </svg>
          <div style={{position:'absolute', left:RX, top:250, width:RW, opacity:clamp(cdnP*1.3,0,1)*atenuaSal,
                       transform:`scale(${lerp(0.9,1,cdnE)})`, filter:faP > 0 ? 'saturate(0.2)' : 'none'}}>
            <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', boxShadow:'0 24px 56px rgba(15,23,42,0.10)', padding:'26px 28px'}}>
              <div style={{display:'flex', alignItems:'center', gap:14}}>
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke={faP > 0 ? '#94A3B8' : '#0085FF'} strokeWidth="1.8">
                  <path d="M6.5 18 A4.5 4.5 0 0 1 7 9 A5.5 5.5 0 0 1 17.5 9.5 A3.8 3.8 0 0 1 17 18 Z" strokeLinejoin="round"/>
                </svg>
                <div style={{lineHeight:1.25}}>
                  <div className="f-mono" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>dinaupcdn.com</div>
                  <div className="f-plex" style={{fontSize:18, color:'#94A3B8'}}>el HTML de ejemplo del botón</div>
                </div>
              </div>
              <div style={{marginTop:20, paddingTop:18, borderTop:'1px solid #F1F5F9', display:'flex', alignItems:'center', gap:12}}>
                <span className="f-mono" style={{fontSize:20, color:'#334155'}}>ejemplo-a4.html</span>
                <div style={{flex:1}}/>
                {faP > 0
                  ? <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#64748B', background:'#F1F5F9', borderRadius:99, padding:'5px 14px'}}>sin respuesta · 3 s</span>
                  : <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#059669', background:'rgba(16,185,129,0.12)', borderRadius:99, padding:'5px 14px'}}>descargando</span>}
              </div>
            </div>
          </div>
        </>
      )}

      {/* Lo que queda cuando esa descarga se cae: el ejemplo de fábrica, en silencio */}
      {saP > 0 && (
        <div style={{position:'absolute', left:RX, top:560, width:RW, opacity:clamp(saP*1.3,0,1)*atenuaSal,
                     transform:`scale(${lerp(0.9,1,saE)})`}}>
          <div style={{background:'#fff', borderRadius:16, border:'2px solid #FB8C00', boxShadow:'0 24px 56px rgba(251,140,0,0.18)', padding:'22px 26px'}}>
            <div className="f-plex" style={{fontSize:17, fontWeight:700, letterSpacing:'2.2px', color:'#B45309'}}>EN SU LUGAR, EL DE FÁBRICA</div>
            <div className="f-mono" style={{fontSize:17, color:'#334155', marginTop:14, lineHeight:1.75}}>
              ¡Hola <span style={{color:'#94A3B8'}}>&lt;b&gt;</span><span style={{color:'#0085FF', fontWeight:700}}>&lt;!--:</span> F.WriteText(<br/>
              <span style={{paddingLeft:24, display:'inline-block'}}/>d.SesionActual.TextoPrincipal) <span style={{color:'#0085FF', fontWeight:700}}>:--&gt;</span><span style={{color:'#94A3B8'}}>&lt;/b&gt;</span>!<br/>
              <span style={{color:'#94A3B8'}}>&lt;br/&gt;</span> Este es un documento de ejemplo.
            </div>
            {avP > 0 && (
              <div style={{marginTop:18, paddingTop:16, borderTop:'1px solid #F1F5F9', display:'flex', alignItems:'center', gap:12,
                           opacity:avP, transform:`translateY(${(1-avP)*8}px)`}}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2">
                  <path d="M3 3 L21 21"/><path d="M12 8 V13" strokeLinecap="round"/><circle cx="12" cy="16.5" r="0.9" fill="#94A3B8" stroke="none"/>
                </svg>
                <span className="f-plex" style={{fontSize:22, fontWeight:600, color:'#64748B'}}>Ni un aviso: el fallo es silencioso</span>
              </div>
            )}
          </div>
        </div>
      )}

      {/* ─────────── La Única Cosa · PROMESA ─────────── */}
      {veloOp > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {u1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:398, textAlign:'center', fontSize:74, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:u1P, transform:`translateY(${(1-u1E)*18}px)`}}>
          El documento es una plantilla tuya.
        </div>
      )}
      {u2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:512, textAlign:'center', fontSize:74, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:u2P, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">Lo que no escribas en ella, no sale impreso.</span>
        </div>
      )}

      {/* ─────────── Salida: el editor entra ENCIMA; la de alta se queda detrás ─────────── */}
      {edP > 0 && (
        <>
          <Ventana x={WX+118} y={WY+96} w={WW} h={WH} titulo="Agregar documento dinámico"
                   op={clamp(edP*1.5,0,1)} dy={(1-edE)*46} sc={lerp(0.94,1,edE)}>
            <div style={{position:'absolute', left:0, right:0, top:0, height:52, background:'#2A2C30', borderBottom:'1px solid #3C3F45',
                         display:'flex', alignItems:'flex-end', gap:2, padding:'0 16px'}}>
              {['Básico','Variables','Código','Previa'].map((s,i)=>(
                <span key={s} className="f-plex" style={{padding:'11px 26px', fontSize:21, fontWeight:i===0?700:500,
                              color:i===0?'#F2F5F9':'#8C939E', background:i===0?'#313236':'transparent',
                              borderTop:i===0?'3px solid #0085FF':'3px solid transparent', borderRadius:'6px 6px 0 0'}}>{s}</span>
              ))}
            </div>
          </Ventana>
          <div className="f-plex" style={{position:'absolute', left:0, right:0, top:964, textAlign:'center', fontSize:26, fontWeight:600,
                                          color:'#64748B', opacity:clamp((t-T.salida-0.35)/0.5,0,1)}}>
            La ventana de alta no se cierra: se queda detrás.
          </div>
        </>
      )}

      {t < T.unica1-0.25 && (
        <ScriptedCursor t={t} clickTimes={[T.click]} frames={[
          { t:0.8,  x:1730, y:990 },
          { t:25.6, x:1730, y:990 },
          { t:27.3, x:cx(0), y:cy(0) },
          { t:32.0, x:cx(0), y:cy(0) },
        ]}/>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPL01 });