// === Escena 05 — "Cuándo la tecla no responde" ===
// Dos casos contrastados. Izquierda: con el diálogo «Editar Entidad» delante, cada TECLA mira
// antes la bandera y no hace nada (RCS.razor:309, 326, 342, 364); la guarda se sostiene porque
// MostrarDialogGenerico no vuelve hasta cerrar (UpDialogServices.Tools.cs:126-129). Derecha: el
// punto de venta NO es un diálogo, es una ventana del gestor (Pymes.cs:41-76) sin máscara
// (DnzWindowHost.razor:7-19), y engancha SU escuchador encima sin quitar el de la ficha
// (TPVDialog.razor:216-228 → js.js:302-303; la ficha solo lo retira en DisposeAsync,
// RCS.razor:275-288). Dos bandas encendidas a la vez: no hay traspaso, y quién gana no se afirma.
function EscenaFC05({ t }){
  // LOCUCIÓN (audio/escena-05.mp3): con la ficha completa abierta encima, las teclas se callan →
  // cada tecla mira si hay un diálogo delante → cierras la ficha y vuelven → el punto de venta es
  // otra cosa: una ventana flotante → puedes moverla → engancha sus propias teclas encima →
  // al salir de esta pantalla el escuchador se retira → si no, quedaban secuestradas → queda decir
  // lo que estas teclas no hacen.
  const T = {
    encima:1.4,      // "abierta encima"
    callan:2.5,      // "las teclas de esta pantalla se callan"
    guarda:6.9,      // "si hay un diálogo delante"
    vuelven:10.9,    // "Cierras la ficha y vuelven"
    flotante:18.0,   // "es una ventana flotante"
    mover:20.5,      // "Puedes moverla"
    propias:25.8,    // "sus propias teclas"
    retira:31.0,     // "el escuchador de teclado se retira"
    secuestro:35.9,  // "secuestradas en toda la aplicación"
    salida:39.7,     // "lo que estas teclas no hacen"
    teclaStep:0.10,   // cascada al reencenderse las cuatro teclas
  };

  const TECLAS = ['F2','F3','F4','F6'];

  // ── Acto A: se encoge a la izquierda cuando entra el acto B ──
  const moveP = Easing.easeInOutCubic(clamp((t-T.flotante)/0.9,0,1));
  const aScale = lerp(1, 0.44, moveP);
  const aTx = lerp(0, -200, moveP), aTy = lerp(0, 150, moveP);
  const aOp = lerp(1, 0.5, moveP) * lerp(1, 0.24, clamp((t-T.secuestro)/0.6,0,1));

  const modalP = clamp((t-T.encima)/0.5,0,1) * (1-clamp((t-T.vuelven)/0.45,0,1));
  const modalE = Easing.easeOutCubic(clamp((t-T.encima)/0.5,0,1));
  const salidaDlg = clamp((t-T.vuelven)/0.45,0,1);
  const guardaP = clamp((t-T.guarda)/0.45,0,1) * (1-clamp((t-T.vuelven)/0.4,0,1));
  const mute = (i)=> clamp((t-T.callan)/0.3,0,1) * (1-clamp((t-T.vuelven-i*T.teclaStep)/0.35,0,1));

  // ── Acto B ──
  const bP = clamp((t-T.flotante)/0.8,0,1), bE = Easing.easeOutCubic(bP);
  const mvP = Easing.easeInOutCubic(clamp((t-T.mover)/0.8,0,1));
  const b2P = clamp((t-T.propias)/0.55,0,1), b2E = Easing.easeOutBack(b2P);
  const kbGo = clamp((t-T.retira)/0.4,0,1);
  const seP = clamp((t-T.secuestro)/0.6,0,1), seE = Easing.easeOutCubic(seP);
  const salP = 1 - clamp((t-T.salida)/0.9,0,1)*0.5;

  const Ico = ({ n, s=22, c='#64748B', w=1.9 })=>{
    const g = {
      badge:        <><rect x="3.4" y="5" width="17.2" height="14" rx="2"/><circle cx="9" cy="10.6" r="2.2"/><path d="M5.8 16.2c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4"/><path d="M14.6 9.6h4 M14.6 13.6h4"/></>,
      shopping_cart:<><circle cx="9.6" cy="19.4" r="1.5"/><circle cx="17.2" cy="19.4" r="1.5"/><path d="M2.4 3.6h2.5l2.7 11.2h10.2l2-7.7H6.6"/></>,
      handshake:    <><path d="M2.5 10.5 L6.5 6.5 L11.5 8.5 L16.5 6.5 L21.5 10.5"/><path d="M6.5 12.5 L9.8 15.8 L12 13.8 L14.6 16.4 L16.8 14.2"/></>,
      event:        <><rect x="3.4" y="5" width="17.2" height="15" rx="2"/><path d="M3.4 9.6 H20.6 M8 3 V6.4 M16 3 V6.4"/></>,
      cake:         <><path d="M4 20.5h16"/><rect x="4.6" y="12.4" width="14.8" height="5.8" rx="2"/><path d="M8 12.4V9.4 M12 12.4V9.4 M16 12.4V9.4 M8 6.6v.9 M12 6.6v.9 M16 6.6v.9"/></>,
      keyboard:     <><rect x="2.4" y="6" width="19.2" height="12" rx="2.2"/><path d="M6 9.6h.01M9.6 9.6h.01M13.2 9.6h.01M16.8 9.6h.01M6 12.9h.01M9.6 12.9h.01M13.2 12.9h.01M16.8 12.9h.01M8 15.7h8"/></>,
    }[n];
    return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={w}
                strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>{g}</svg>;
  };

  const Controles = ({ s=24 })=> (
    <div style={{display:'flex', alignItems:'center', gap:18, marginLeft:'auto'}}>
      <svg width={s} height={s} viewBox="0 0 24 24"><path d="M5 12 H19" stroke="#64748B" strokeWidth="2" strokeLinecap="round"/></svg>
      <svg width={s} height={s} viewBox="0 0 24 24"><rect x="5.5" y="5.5" width="13" height="13" rx="1.5" fill="none" stroke="#64748B" strokeWidth="2"/></svg>
      <svg width={s} height={s} viewBox="0 0 24 24"><path d="M6 6 L18 18 M18 6 L6 18" stroke="#64748B" strokeWidth="2" strokeLinecap="round"/></svg>
    </div>
  );

  // Maqueta compacta de la ficha, para el fondo de los dos actos
  const FichaFondo = ({ w })=> (
    <>
      <div style={{position:'absolute', left:30, top:160, width:w-60, height:78, background:'#fff',
                   border:'1px solid #E2E8F0', borderRadius:12, display:'flex', alignItems:'center', gap:16, padding:'0 20px'}}>
        <div style={{width:'42%', height:48, borderRadius:9, border:'1px solid #CBD5E1', display:'flex', alignItems:'center', padding:'0 14px'}}>
          <span className="f-plex" style={{fontSize:20, fontWeight:600, color:'#0F172A'}}>Talleres Marbán, S.L.</span>
        </div>
      </div>
      <div style={{position:'absolute', left:30, top:252, width:w-60, height:92, background:'#fff',
                   border:'1px solid #E2E8F0', borderRadius:12, display:'flex', alignItems:'center', gap:14, padding:'0 20px'}}>
        {[['Ver ficha','#0085FF'], ['Pedido','#10B981'], ['Venta','#10B981']].map(b=>(
          <div key={b[0]} style={{height:64, borderRadius:9, background:b[1], display:'flex', alignItems:'center', padding:'0 20px'}}>
            <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#fff'}}>{b[0]}</span>
          </div>
        ))}
      </div>
      {[0,1,2].map(i=>(
        <div key={i} style={{position:'absolute', left:30, top:358+i*62, width:w-60, height:50, background:'#fff',
                             border:'1px solid #E2E8F0', borderRadius:10}}/>
      ))}
    </>
  );

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL BORDE" title={<span>Cuándo la tecla no responde</span>}/>

      <div style={{position:'absolute', inset:0, opacity:salP}}>

        {/* ══════════ ACTO A · con un diálogo delante ══════════ */}
        <div style={{position:'absolute', inset:0, opacity:aOp,
                     transform:`translate(${aTx}px, ${aTy}px) scale(${aScale})`, transformOrigin:'300px 150px'}}>
          <div className="f-mono" style={{position:'absolute', left:300, top:118, fontSize:19, fontWeight:700,
                 letterSpacing:'2.6px', color:'#94A3B8', opacity:clamp((t-T.encima)/0.5,0,1)}}>
            CON UN DIÁLOGO DELANTE
          </div>

          <div style={{position:'absolute', left:300, top:150, width:1320, height:660, borderRadius:16, overflow:'hidden',
                       background:'#F6F8FB', border:'1px solid #E2E8F0', boxShadow:'0 28px 70px rgba(15,23,42,0.12)'}}>
            <BrowserChrome url="play.dinaup.com/App/CRM/ClienteLookup" title="Dinaup — CRM"/>
            <DinaupAppHeader breadcrumb={['CRM','Ficha de Cliente']} company="Suministros Ebro, S.L." initials="AM"/>
            <div style={{position:'absolute', left:0, top:140, width:270, bottom:0, background:'#F8FAFC', borderRight:'1px solid #E9EEF4'}}/>
            <div style={{position:'absolute', left:270, top:0, right:0, bottom:0}}>
              <FichaFondo w={1050}/>
            </div>
            {/* .rz-dialog-mask */}
            {modalP > 0 && <div style={{position:'absolute', left:0, top:140, right:0, bottom:0, background:'#0F172A', opacity:modalP*0.45}}/>}
          </div>

          {/* «Editar Entidad» */}
          {modalP > 0 && (
            <div style={{position:'absolute', left:510, top:300, width:900, height:380,
                         opacity:clamp(modalP*1.3,0,1),
                         transform:`translateY(${(1-modalE)*-30 - salidaDlg*50}px)`}}>
              <div style={{height:'100%', background:'#fff', borderRadius:14, overflow:'hidden',
                           boxShadow:'0 40px 100px rgba(15,23,42,0.42)'}}>
                <div style={{display:'flex', alignItems:'center', gap:12, padding:'18px 26px', borderBottom:'1px solid #EEF2F6'}}>
                  <Ico n="badge" s={26} c="#0085FF" w={2.2}/>
                  <span className="f-plex" style={{fontSize:28, fontWeight:800, color:'#0F172A'}}>Editar Entidad</span>
                  <Controles/>
                </div>
                <div style={{padding:'24px 26px', display:'flex', flexWrap:'wrap', gap:'16px 22px'}}>
                  {[380,280,280,170,200,380,240].map((w,i)=>(
                    <div key={i} style={{width:w}}>
                      <div style={{height:11, width:'46%', borderRadius:4, background:'#EDF1F6'}}/>
                      <div style={{height:36, marginTop:6, borderRadius:8, border:'1px solid #E7ECF2', background:'#FBFCFE'}}/>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* La anotación: la guarda es de las TECLAS, literal del código */}
          {guardaP > 0 && (
            <div className="f-mono" style={{position:'absolute', left:0, right:0, top:718, textAlign:'center',
                   opacity:clamp(guardaP*1.3,0,1)}}>
              <span style={{display:'inline-block', padding:'12px 26px', borderRadius:10, background:'rgba(15,23,42,0.92)',
                            color:'#8FD0FF', fontSize:26, letterSpacing:'0.02em'}}>
                if (modalAbierto) return;
              </span>
            </div>
          )}

          {/* La banda de teclas de la ficha: se apagan y se tachan; al cerrar, vuelven */}
          {TECLAS.map((k,i)=>{
            const m = mute(i);
            const x = 647 + i*172;
            return (
              <div key={k} style={{position:'absolute', left:x, top:850, width:110,
                     opacity:lerp(1, 0.4, m), filter:`grayscale(${m}) saturate(${lerp(1,0.4,m)})`}}>
                <KeyCap t={t} label={k} start={0} size={110}/>
                <div style={{position:'absolute', left:6, right:6, top:52, height:5, borderRadius:3, background:'#94A3B8',
                             transform:`scaleX(${Easing.easeInOutCubic(clamp((t-T.callan-i*0.05)/0.35,0,1)) * (1-clamp((t-T.vuelven-i*T.teclaStep)/0.3,0,1))})`,
                             transformOrigin:'left'}}/>
              </div>
            );
          })}
        </div>

        {/* ══════════ ACTO B · con la ventana delante ══════════ */}
        {bP > 0 && (
          <div style={{position:'absolute', inset:0, opacity:clamp(bP*1.3,0,1)}}>
            <div className="f-mono" style={{position:'absolute', left:760, top:186, fontSize:20, fontWeight:700,
                   letterSpacing:'2.6px', color:'#0085FF'}}>
              CON LA VENTANA DELANTE
            </div>

            <div style={{position:'absolute', left:760, top:230, width:1090, height:600, borderRadius:16, overflow:'hidden',
                         background:'#F6F8FB', border:'1px solid #E2E8F0', boxShadow:'0 30px 76px rgba(15,23,42,0.14)',
                         transform:`translateY(${(1-bE)*20}px)`}}>
              <BrowserChrome url="play.dinaup.com/App/CRM/ClienteLookup" title="Dinaup — CRM"/>
              <DinaupAppHeader breadcrumb={['CRM','Ficha de Cliente']} company="Suministros Ebro, S.L." initials="AM"/>
              <div style={{position:'absolute', left:0, top:140, width:230, bottom:0, background:'#F8FAFC', borderRight:'1px solid #E9EEF4'}}/>
              <div style={{position:'absolute', left:230, top:0, right:0, bottom:0}}>
                <FichaFondo w={860}/>
              </div>
              {/* Sin velo: la ficha de detrás sigue nítida. Ese contraste es toda la escena. */}
              <div style={{position:'absolute', left:0, right:0, bottom:0, height:64, background:'#0F172A',
                           display:'flex', alignItems:'center', padding:'0 18px'}}>
                <span style={{display:'inline-flex', alignItems:'center', gap:9, padding:'7px 16px', borderRadius:8,
                              background:'rgba(255,255,255,0.14)', border:'1px solid rgba(255,255,255,0.16)'}}>
                  <Ico n="shopping_cart" s={18} c="#fff" w={2.1}/>
                  <span className="f-plex" style={{fontSize:17, fontWeight:600, color:'#fff'}}>Pedido rápido</span>
                </span>
              </div>
            </div>

            {/* La ventana flotante: se separa del plano y se puede mover */}
            <div style={{position:'absolute', left:800+mvP*64, top:396+mvP*46, width:620, height:300,
                         borderRadius:12, overflow:'hidden', background:'#fff', border:'1px solid #D6DEE8',
                         boxShadow:`0 ${28+mvP*14}px ${70+mvP*24}px rgba(15,23,42,0.34)`,
                         transform:`scale(${lerp(0.9,1,Easing.easeOutBack(clamp((t-T.flotante)/0.6,0,1)))})`}}>
              <div style={{height:48, display:'flex', alignItems:'center', gap:11, padding:'0 16px',
                           background:'#F4F7FA', borderBottom:'1px solid #E2E8F0'}}>
                <Ico n="shopping_cart" s={21} c="#0F172A" w={2.1}/>
                <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>Pedido rápido</span>
                <Controles s={20}/>
              </div>
              <div style={{padding:'16px 18px'}}>
                <div className="f-plex" style={{fontSize:15, fontWeight:600, color:'#94A3B8'}}>Cliente</div>
                <div style={{height:50, marginTop:5, borderRadius:8, border:'2px solid #0085FF', display:'flex',
                             alignItems:'center', padding:'0 14px'}}>
                  <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>Talleres Marbán, S.L.</span>
                </div>
                {[0,1,2].map(i=>(
                  <div key={i} style={{height:11, borderRadius:4, background:'#EDF1F6', marginTop:16, width:`${86-i*16}%`}}/>
                ))}
              </div>
            </div>

            {/* SEGUNDA banda, sobre la ventana. La de la ficha sigue encendida debajo. */}
            {b2P > 0 && (
              <div style={{position:'absolute', left:0, top:0, opacity:clamp(b2P*1.3,0,1)}}>
                <div className="f-mono" style={{position:'absolute', left:930, top:632, width:500, textAlign:'center',
                       fontSize:17, letterSpacing:'1.4px', color:'#0F172A'}}>
                  <span style={{display:'inline-flex', alignItems:'center', gap:8}}>
                    <span style={{width:9, height:9, borderRadius:99, background:'#0085FF'}}/>
                    teclas del punto de venta
                  </span>
                </div>
                {TECLAS.map((k,i)=>(
                  <div key={k} style={{position:'absolute', left:985+i*102, top:660,
                         transform:`scale(${lerp(0.7,1,b2E)})`, transformOrigin:'50% 100%'}}>
                    <KeyCap t={t} label={k} start={T.propias} size={72}/>
                  </div>
                ))}
                <div className="f-mono" style={{position:'absolute', left:1164, top:742, width:120, textAlign:'center',
                       fontSize:15, color:'#64748B'}}>
                  cobro rápido
                </div>
              </div>
            )}

            {/* La banda de la ficha, encendida, donde estaba */}
            <div className="f-mono" style={{position:'absolute', left:1055, top:966, width:500, fontSize:17,
                   letterSpacing:'1.4px', color:'#0F172A', opacity:clamp(bP*1.3,0,1)*(1-kbGo*0.55)}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:8}}>
                <span style={{width:9, height:9, borderRadius:99, background:'#0085FF'}}/>
                teclas de la ficha
              </span>
            </div>
            {TECLAS.map((k,i)=>(
              <div key={k} style={{position:'absolute', left:1047+i*140, top:862, opacity:1-kbGo*0.55}}>
                <KeyCap t={t} label={k} start={T.flotante} size={96}/>
              </div>
            ))}

            {/* Al salir de la pantalla, el escuchador se desengancha */}
            <div style={{position:'absolute', left:930, top:876, opacity:1-kbGo,
                         transform:`translate(${-kbGo*54}px, ${kbGo*84}px)`}}>
              <div style={{width:72, height:72, borderRadius:14, background:'#fff', border:'1px solid #DDE4EC',
                           display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 8px 22px rgba(15,23,42,0.10)'}}>
                <Ico n="keyboard" s={40} c="#0F172A" w={1.9}/>
              </div>
            </div>
          </div>
        )}

        {/* ══════════ Lo que eso evitaba: la tecla disparando en otras pantallas ══════════ */}
        {seP > 0 && (
          <div style={{position:'absolute', left:110, top:700, width:600, opacity:clamp(seP*1.3,0,1)*0.75,
                       transform:`translateY(${(1-seE)*16}px)`}}>
            <div className="f-mono" style={{fontSize:18, fontWeight:700, letterSpacing:'2.4px', color:'#EF4444', marginBottom:14}}>
              SIN RETIRARLO
            </div>
            {[['handshake','Oportunidades'], ['event','Eventos'], ['cake','Cumpleaños']].map((s,i)=>(
              <div key={s[1]} style={{display:'flex', alignItems:'center', gap:14, height:78, marginBottom:12,
                     background:'#fff', border:'1px solid #F3D0D0', borderRadius:12, padding:'0 18px',
                     opacity:clamp((t-T.secuestro-i*0.12)/0.4,0,1)}}>
                <Ico n={s[0]} s={24} c="#94A3B8" w={2}/>
                <span className="f-plex" style={{fontSize:21, color:'#64748B'}}>{s[1]}</span>
                <span className="f-mono" style={{marginLeft:'auto', display:'inline-flex', alignItems:'center',
                       justifyContent:'center', minWidth:56, height:40, borderRadius:8, background:'rgba(239,68,68,0.12)',
                       border:'1px solid rgba(239,68,68,0.35)', color:'#DC2626', fontSize:20, fontWeight:700}}>F4</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaFC05 });