// === Escena 06 — "Los tres límites + eco" ===
// Los tres se dicen en voz alta y los tres están verificados:
//  1. El cuadro no llega puesto: si la plantilla no lleva la condición y la llamada, la factura
//     sale sin él y nadie protesta — DOCD\API\Factura JSON.vb:226-228.
//  2. Esa línea NO está en la plantilla de la factura: «Factura - Moderna» solo tiene el v-if y
//     el <img> (:375-379); la llamada vive en el documento incluido (:394 → API\Factura JSON.vb).
//  3. «Imprimir» abre el diálogo del navegador sobre un iframe, no fabrica archivo —
//     DnzDynamicDocumentView.razor:315-325 → DNZ\wwwroot\dinazen.js:19-41.
// Cierre en ECO (bookend con la escena 1): sin traca, sin salida, la pantalla queda fija.
function EscenaPL06({ t }){
  const T = {
    tres:0.1,          // "Tres límites"
    uno:3.3,           // "Uno:"
    limite1:3.9,       // "el cuadro no llega puesto"
    noEscrito:6.2,     // "Si tu plantilla no lo lleva escrito"
    sinEl:8.3,         // "la factura sale sin él"
    protesta:9.7,      // "y nadie protesta"
    dos:11.5,          // "Dos:"
    limite2:12.6,      // "no está en la plantilla de la factura"
    estaEn:15.6,       // "el documento que le trae los datos"
    buscas:18.3,       // "Si la buscas donde maquetas"
    noEncuentras:20.0, // "no la encuentras"
    tresL:21.8,        // "Y tres:"
    limite3:22.6,      // "imprimir no fabrica un archivo"
    dialogo:25.1,      // "Abre el diálogo del navegador"
    guardas:27.0,      // "el archivo lo guardas tú"
    eco1:29.2,         // "El documento es una plantilla tuya"
    eco2:33.7,         // "no sale impreso"
    huecoStep:0.15,     // cascada de los tres huecos de tarjeta
  };

  // ── Geometría: tres tarjetas de límite ──
  const CW=560, CGAP=40, CX0=80, CY=204, CH=726;
  const cx = i => CX0 + i*(CW+CGAP);
  const NUMERO = [T.uno, T.dos, T.tresL];          // "Uno:" · "Dos:" · "Y tres:"
  const ENTRA  = [T.limite1, T.limite2, T.limite3];
  const TITULOS = ['El cuadro no llega puesto', 'No está donde la buscas', 'Imprimir no fabrica archivo'];

  // ── Progresos ──
  const trP = clamp((t-T.tres)/0.6,0,1);
  const seP = clamp((t-T.sinEl)/0.6,0,1), seE = Easing.easeOutCubic(seP);
  const prP = clamp((t-T.protesta)/0.5,0,1);
  const l2a = clamp((t-T.limite2)/0.6,0,1);                 // «Factura - Moderna» se apaga
  const l2b = clamp((t-T.estaEn)/0.6,0,1), l2bE = Easing.easeOutBack(l2b);
  const flecha = Easing.easeInOutCubic(clamp((t-T.estaEn-0.1)/0.7,0,1));
  const buP = clamp((t-T.buscas)/0.6,0,1), buE = Easing.easeOutCubic(buP);
  const neP = clamp((t-T.noEncuentras)/0.5,0,1);
  const diP = clamp((t-T.dialogo)/0.6,0,1), diE = Easing.easeOutBack(diP);
  const guGlow = t >= T.guardas && t < T.guardas+1.4 ? Math.sin((t-T.guardas)/1.4*Math.PI) : 0;

  // El eco: la pantalla casi se apaga y la frase queda fija hasta el corte
  const apaga = clamp((t-T.eco1)/0.9,0,1)*0.94;
  const e1P = clamp((t-T.eco1)/0.7,0,1), e1E = Easing.easeOutCubic(e1P);
  const e2P = clamp((t-T.eco2)/0.7,0,1), e2E = Easing.easeOutCubic(e2P);
  const mkP = clamp((t-T.eco2-0.7)/0.7,0,1);

  // ── El hueco de tarjeta y su contenido ──
  const Tarjeta = ({ i, children })=>{
    const hu = clamp((t-T.tres-i*T.huecoStep)/0.5,0,1), huE = Easing.easeOutCubic(hu);
    const nu = clamp((t-NUMERO[i])/0.4,0,1), nuE = Easing.easeOutBack(nu);
    const p  = clamp((t-ENTRA[i])/0.6,0,1), e = Easing.easeOutBack(p);
    const viva = p > 0;
    return (
      <div style={{position:'absolute', left:cx(i), top:CY, width:CW, height:CH, borderRadius:18,
                   background: viva ? '#fff' : 'rgba(255,255,255,0.45)',
                   border: viva ? '1px solid #E2E8F0' : '2px dashed #CBD5E1',
                   boxShadow: viva ? `0 ${20+e*10}px ${44+e*16}px rgba(15,23,42,${0.06+p*0.06})` : 'none',
                   opacity: hu*(viva ? 1 : 0.9),
                   transform:`translateY(${(1-huE)*16}px) scale(${viva ? lerp(0.975,1,e) : 1})`}}>
        {/* el número entra con «Uno:»; el título, con la frase del límite */}
        <div style={{position:'absolute', left:32, top:30, right:32, display:'flex', alignItems:'center', gap:18}}>
          <span className="f-plex" style={{width:56, height:56, borderRadius:99, flexShrink:0,
                        background:'rgba(0,133,255,0.10)', border:'2px solid rgba(0,133,255,0.4)', color:'#0085FF',
                        fontSize:28, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center',
                        opacity:clamp(nu*1.4,0,1), transform:`scale(${lerp(0.6,1,nuE)})`}}>{i+1}</span>
          <span className="f-plex" style={{fontSize:30, fontWeight:700, color:'#0F172A', lineHeight:1.2, letterSpacing:'-0.02em',
                        opacity:clamp(p*1.4,0,1), transform:`translateX(${(1-e)*10}px)`}}>{TITULOS[i]}</span>
        </div>
        {viva && <div style={{position:'absolute', left:32, right:32, top:118, bottom:28,
                              display:'flex', flexDirection:'column', justifyContent:'center'}}>{children}</div>}
      </div>
    );
  };

  const Doc = ({ nombre, sub, apagado, marco })=>(
    <div style={{padding:'16px 18px', borderRadius:12, background:apagado ? '#F6F8FB' : '#fff',
                 border:`2px solid ${marco}`, opacity:apagado ? 0.55 : 1}}>
      <div style={{display:'flex', alignItems:'center', gap:12}}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={apagado ? '#94A3B8' : '#0085FF'} strokeWidth="1.8">
          <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:24, fontWeight:700, color:apagado ? '#94A3B8' : '#0F172A'}}>{nombre}</span>
      </div>
      <div className="f-mono" style={{fontSize:17, color:apagado ? '#A9B2BE' : '#0085FF', marginTop:10, lineHeight:1.5}}>{sub}</div>
    </div>
  );

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="LO QUE ESTO NO HACE SOLO" title={<span>Los tres límites</span>}/>

      {/* ─────────── Límite 1 · el cuadro no llega puesto ─────────── */}
      {trP > 0 && (
        <Tarjeta i={0}>
          <div style={{position:'absolute', left:0, right:0, top:0, height:404, background:'#fff',
                       border:'1px solid #E2E8F0', borderRadius:8, padding:'20px 22px',
                       opacity:clamp((t-T.noEscrito)/0.6,0,1), transform:`translateY(${(1-Easing.easeOutCubic(clamp((t-T.noEscrito)/0.6,0,1)))*12}px)`}}>
            <div className="f-plex" style={{fontSize:22, fontWeight:800, color:'#0F172A'}}>FACTURA</div>
            <div className="f-mono" style={{fontSize:15, color:'#64748B', marginTop:2}}>V-2026-0184 · 12/08/2026</div>
            {[88,64,80,58].map((w,i)=>(
              <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderBottom:'1px solid #F4F7FA'}}>
                <div style={{height:9, width:`${w*0.6}%`, borderRadius:5, background:'#E2E8F0'}}/>
                <div style={{flex:1}}/><div style={{height:9, width:54, borderRadius:5, background:'#CBD5E1'}}/>
              </div>
            ))}
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginTop:14}}>
              <span className="f-plex" style={{fontSize:14, letterSpacing:'2px', color:'#94A3B8', fontWeight:700}}>TOTAL</span>
              <span className="f-mono" style={{fontSize:24, fontWeight:800, color:'#0F172A'}}>875,83 €</span>
            </div>
            {/* la esquina, vacía: gris — «aquí no está», no «no existe» */}
            {seP > 0 && (
              <div style={{position:'absolute', right:22, bottom:20, width:124, textAlign:'center', opacity:seP,
                           transform:`scale(${lerp(0.9,1,seE)})`}}>
                <div style={{width:124, height:124, borderRadius:8, border:'3px dashed #B6BDC8', background:'#FAFBFC'}}/>
                <div className="f-plex" style={{fontSize:16, fontWeight:700, color:'#94A3B8', marginTop:8}}>sin cuadro</div>
              </div>
            )}
          </div>
          {prP > 0 && (
            <div style={{position:'absolute', left:0, right:0, top:436, opacity:prP, transform:`translateY(${(1-prP)*10}px)`}}>
              <div style={{display:'flex', alignItems:'center', gap:14, padding:'18px 20px', borderRadius:12, background:'#F6F8FB',
                           border:'1px solid #E2E8F0'}}>
                <svg width="26" height="26" 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:23, fontWeight:600, color:'#64748B', lineHeight:1.35}}>Ni error, ni aviso, ni hueco</span>
              </div>
            </div>
          )}
        </Tarjeta>
      )}

      {/* ─────────── Límite 2 · el mapa que se lleva el técnico ─────────── */}
      {trP > 0 && (
        <Tarjeta i={1}>
          <div style={{position:'relative', opacity:clamp(l2a*1.3,0,1)}}>
            <Doc nombre="Factura - Moderna" sub={'v-if="resumen.VerifactuQR"\n<img …>'} apagado={l2b > 0} marco={l2b > 0 ? '#E2E8F0' : '#CBD5E1'}/>
            {/* la lupa que busca donde se maqueta, y no encuentra */}
            {buP > 0 && (
              <div style={{position:'absolute', right:-6, top:-14, opacity:buP, transform:`translateY(${(1-buE)*-8}px)`}}>
                <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="1.9">
                  <circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.5 15.5 L21 21" strokeLinecap="round"/>
                </svg>
                {neP > 0 && (
                  <div className="f-plex" style={{position:'absolute', right:0, top:56, width:180, textAlign:'right',
                                fontSize:19, fontWeight:700, color:'#94A3B8', opacity:neP}}>sin resultado</div>
                )}
              </div>
            )}
          </div>

          {/* la flecha del F.Include */}
          <div style={{position:'relative', height:132, marginTop:6}}>
            <svg width="100%" height="132" style={{position:'absolute', left:0, top:0}}>
              <path d="M64 8 V96" pathLength="100" stroke="#0085FF" strokeWidth="3.5" strokeLinecap="round" fill="none"
                    strokeDasharray="100" strokeDashoffset={100*(1-flecha)}/>
              <path d="M54 86 L64 98 L74 86" stroke="#0085FF" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" fill="none"
                    opacity={clamp((flecha-0.8)/0.2,0,1)}/>
            </svg>
            <span className="f-mono" style={{position:'absolute', left:94, top:38, fontSize:19, fontWeight:700, color:'#0085FF',
                          opacity:clamp((flecha-0.3)/0.4,0,1)}}>F.Include(…)</span>
          </div>

          <div style={{opacity:clamp(l2b*1.3,0,1), transform:`scale(${lerp(0.94,1,l2bE)})`}}>
            <Doc nombre="Factura JSON" sub={'F.BuildQR_Verifactu( … )'} marco={l2b > 0 ? '#0085FF' : '#CBD5E1'}/>
          </div>
        </Tarjeta>
      )}

      {/* ─────────── Límite 3 · el diálogo del navegador ─────────── */}
      {trP > 0 && (
        <Tarjeta i={2}>
          <div style={{position:'absolute', left:0, right:0, top:0}}>
            <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:12, padding:'14px 24px', borderRadius:10,
                          background:'#0085FF', color:'#fff', fontSize:23, fontWeight:700,
                          opacity:clamp((t-T.limite3)/0.5,0,1)}}>
              <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.9" strokeLinejoin="round">
                <path d="M7 9 V4 H17 V9 M7 17 H5 A2 2 0 0 1 3 15 V11 A2 2 0 0 1 5 9 H19 A2 2 0 0 1 21 11 V15 A2 2 0 0 1 19 17 H17 M7 14 H17 V21 H7 Z"/>
              </svg>
              Imprimir
            </span>
          </div>
          {/* lo que sale es el diálogo del navegador, no un archivo */}
          {diP > 0 && (
            <div style={{position:'absolute', left:0, right:0, top:92, opacity:clamp(diP*1.3,0,1),
                         transform:`translateY(${(1-diE)*-18}px) scale(${lerp(0.93,1,diE)})`}}>
              <div style={{background:'#fff', borderRadius:12, border:'1px solid #DCE1E8', boxShadow:'0 26px 60px rgba(15,23,42,0.22)', overflow:'hidden'}}>
                <div style={{height:56, background:'#F4F5F7', borderBottom:'1px solid #E3E5E8', display:'flex', alignItems:'center', padding:'0 20px'}}>
                  <span className="f-plex" style={{fontSize:21, fontWeight:600, color:'#202124'}}>Imprimir</span>
                  <div style={{flex:1}}/>
                  <span className="f-plex" style={{fontSize:18, color:'#5F6368'}}>1 página</span>
                </div>
                <div style={{padding:'20px 22px'}}>
                  {[['Destino','Guardar como PDF'], ['Páginas','Todas'], ['Diseño','Vertical']].map((f,i)=>(
                    <div key={f[0]} style={{marginBottom:14}}>
                      <div className="f-plex" style={{fontSize:16, color:'#5F6368'}}>{f[0]}</div>
                      <div style={{height:44, marginTop:5, borderRadius:6, border:'1px solid #DADCE0', display:'flex', alignItems:'center', padding:'0 12px',
                                   boxShadow:i === 0 && guGlow > 0 ? `0 0 ${guGlow*26}px rgba(0,133,255,0.5)` : 'none',
                                   borderColor:i === 0 && guGlow > 0 ? '#0085FF' : '#DADCE0'}}>
                        <span className="f-plex" style={{fontSize:19, color:'#202124'}}>{f[1]}</span>
                        <div style={{flex:1}}/><span style={{color:'#5F6368', fontSize:14}}>▾</span>
                      </div>
                    </div>
                  ))}
                  <div style={{display:'flex', justifyContent:'flex-end', gap:12, marginTop:20}}>
                    <span className="f-plex" style={{padding:'11px 22px', borderRadius:7, background:'#F1F3F4', fontSize:19, color:'#3C4043'}}>Cancelar</span>
                    <span className="f-plex" style={{padding:'11px 26px', borderRadius:7, background:'#1A73E8', color:'#fff', fontSize:19, fontWeight:600,
                                  boxShadow:guGlow > 0 ? `0 0 ${guGlow*30}px rgba(26,115,232,0.6)` : 'none'}}>Guardar</span>
                  </div>
                </div>
              </div>
            </div>
          )}
        </Tarjeta>
      )}

      {/* ─────────── ECO · bookend con la apertura. Pantalla fija. ─────────── */}
      {apaga > 0 && <div style={{position:'absolute', inset:0, background:'#0B1220', opacity:apaga}}/>}
      {e1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:392, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#F8FAFC', opacity:e1P, transform:`translateY(${(1-e1E)*18}px)`}}>
          El documento es una plantilla tuya.
        </div>
      )}
      {e2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:508, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:e2P, transform:`translateY(${(1-e2E)*18}px)`}}>
          <span className="grad-text">Lo que no escribas en ella, no sale impreso.</span>
        </div>
      )}
      {mkP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:700, display:'flex', justifyContent:'center', opacity:mkP}}>
          <DinaupLogo mark size={54}/>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPL06 });
