// === Escena 05 — "La carpeta" · audio real 21.05s ===
// LOCUCIÓN: "¿Y las que guardas por carpetas? Abres tu explorador de Windows, agarras la
//   carpeta entera... y la sueltas. Ciento veinte facturas de golpe. Y fíjate en el aviso: se
//   han añadido ciento diez... las otras diez ya estaban, y no entran dos veces. Tú todavía no
//   has tecleado nada."
// BEATS: SIN rectángulo — se agarra LA CARPETA (ghost amarillo con badge 120) · misma UI del
//   buzón como destino · stream rápido · TOAST central "Se han añadido 110 · 10 ya existían".
function Escena05({ t }){
  const T = {
    exp:       0.5,  // "Y las que guardas"                    → explorador
    front:     2.8,  // "Abres tu explorador de Windows"       → al frente
    cur0:      3.0,                                          // (apoyo) cursor
    cur1:      4.2,                                          // (apoyo) cursor
    grab:      4.5,  // "agarras la carpeta entera"            → agarra
    drag0:     4.7,                                          // (apoyo) arrastre
    drag1:     6.2,                                          // (apoyo) arrastre
    drop:      6.6,  // "y la sueltas"                         → suelta
    stream0:   7.4,                                          // (apoyo) filas entrando
    badge:     8.1,  // "Ciento veinte facturas de golpe"      → badge 120
    streamDur: 3.2,                                          // (duración, no instante)
    toast:    10.5,  // "fíjate en el aviso"                   → toast
    sub10:    12.0,  // "se han añadido ciento diez"           → subrayado 110
    zero:     18.3,  // "Tú todavía no has tecleado nada"      → cero teclas
  };
  const expP = clamp((t-T.exp)/0.6, 0, 1), expE = Easing.easeOutCubic(expP);
  const frontP = clamp((t-T.front)/0.5, 0, 1);

  const FILES = [
    { n:'Noviembre 2025', s:'120 archivos', folder:true },
    { n:'contrato-nave.pdf', s:'1,2 MB' },
    { n:'presupuesto-old.xlsx', s:'44 KB', xls:true },
    { n:'renting-furgon.pdf', s:'96 KB' },
    { n:'fotos-obra.zip', s:'8,4 MB', zip:true },
  ];

  // Cursor: park → carpeta → arrastre a la lista de Dinaup
  const leg = (t0, t1, A, B, bend)=>{
    const p = clamp((t-t0)/(t1-t0), 0, 1);
    const e = Easing.easeInOutCubic(Math.pow(p, 0.82));
    const len = Math.hypot(B.x-A.x, B.y-A.y) || 1;
    const C = { x:(A.x+B.x)/2 - (B.y-A.y)/len*bend, y:(A.y+B.y)/2 + (B.x-A.x)/len*bend };
    const v = 1-e;
    return { x: v*v*A.x + 2*v*e*C.x + e*e*B.x, y: v*v*A.y + 2*v*e*C.y + e*e*B.y, p };
  };
  const P0 = {x:1750, y:1000}, P1 = {x:340, y:388}, P2 = {x:1250, y:520};
  let cur;
  if (t < T.grab)      cur = leg(T.cur0, T.cur1, P0, P1, -120);
  else                 cur = leg(T.drag0, T.drag1, P1, P2, -150);
  const dragging = t >= T.grab && t < T.drop;
  const dropped  = t >= T.drop;
  const wakeP = clamp((t-(T.drag0+0.6))/0.5, 0, 1);
  const badgePulse = t >= T.badge && t < T.badge+0.5;

  // Stream en la lista destino
  const POOL = [
    ['iberdrola-taller.pdf','Iberdrola','IB-99213','142,10 €'],
    ['mutua-noviembre.pdf','Mapfre','MP-2025-8841','96,40 €'],
    ['recibo-luz-taller.pdf','Endesa','END-91002','88,20 €'],
    ['correos-franqueo.pdf','Correos','CO-1123','18,75 €'],
    ['orange-lineas.pdf','Orange','OR-556231','64,30 €'],
    ['repsol-gasoleo.pdf','Repsol','RP-77120','210,80 €'],
    ['makro-compra.pdf','Makro','MK-90218','387,22 €'],
    ['seur-envios-2.pdf','SEUR','SE-88291','41,10 €'],
  ];
  const rowP = (i)=> dropped ? clamp((t-(T.stream0+0.4+i*0.22))/0.32, 0, 1) : 0;
  const addN = dropped ? Math.min(110, Math.round(110 * clamp((t-T.stream0-0.3)/T.streamDur, 0, 1))) : 0;

  const toastP = clamp((t-T.toast)/0.5, 0, 1), toastE = Easing.easeOutBack(toastP);
  const subOn = t >= T.sub10 && t < T.sub10+1.2;
  const subPulse = subOn ? Math.sin((t-T.sub10)/1.2*Math.PI) : 0;
  const zeroP = clamp((t-T.zero)/0.5, 0, 1);

  return (
    <SlideCanvas variant="light-soft">
      {/* Ventana Dinaup (derecha) — LA MISMA pantalla del buzón */}
      <div style={{position:'absolute', left:830, top:130, width:860, height:800, background:'#fff', borderRadius:12, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:'0 36px 90px rgba(0,133,255,0.15), 0 10px 24px rgba(15,23,42,0.09)', opacity:expP}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/FacturasRecibidas" title="Dinaup — Facturas recibidas"/>
        <DinaupAppHeader breadcrumb={["Compras","Facturas recibidas"]}/>
        <div style={{padding:'12px 24px 0'}}>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:8}}>
            <div className="f-mono" style={{fontSize:11, color:'#94A3B8'}}>Dinaup Drive » Facturas Recibidas</div>
            <div style={{flex:1}}/>
            <div className="f-mono" style={{fontSize:10.5, fontWeight:700, color:'#0085FF', borderBottom:'2px solid #0085FF', paddingBottom:2}}>NUEVOS</div>
          </div>

          {/* Banner compacto del buzón (continuidad con la escena anterior) */}
          <div style={{background:'linear-gradient(120deg,#0085FF,#00A2FF)', borderRadius:10, padding:'10px 16px', display:'flex', alignItems:'center', gap:12, marginBottom:9}}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 7l10 6L22 7"/></svg>
            <span className="f-mono" style={{fontSize:11, color:'#E0F2FE'}}>pymes_facturas@dinaup-mail.com</span>
            <div style={{flex:1}}/>
            <span className="f-mono" style={{fontSize:10.5, fontWeight:800, color:'#475569', background:'#E2E8F0', borderRadius:100, padding:'4px 11px'}}>0 EN BUZÓN</span>
          </div>

          {/* Stats */}
          <div style={{display:'flex', alignItems:'center', gap:16, padding:'0 2px 7px'}}>
            <span className="f-mono" style={{fontSize:11, fontWeight:700, color: addN>0?'#0085FF':'#475569'}}>{156 + addN} facturas</span>
            {dropped && addN < 110 && <span className="f-mono" style={{fontSize:11, fontWeight:700, color:'#059669'}}>⬆ añadiendo… {addN} / 110</span>}
            {zeroP > 0 && <span className="f-mono" style={{fontSize:11, fontWeight:800, color:'#059669', background:'rgba(16,185,129,0.10)', borderRadius:100, padding:'2px 10px', opacity:zeroP}}>0 teclas pulsadas</span>}
          </div>

          {/* Lista destino (misma UI: fila + CONTABILIZAR) */}
          <div style={{position:'relative', border:`2px dashed ${dragging&&wakeP>0?'#0085FF':'transparent'}`, borderRadius:10, background: dragging&&wakeP>0?'rgba(0,133,255,0.05)':'transparent'}}>
            <div style={{border:'1px solid #E2E8F0', borderRadius:9, overflow:'hidden', background:'#fff', minHeight:378}}>
              {POOL.map((r,i)=>{
                const p = rowP(i);
                if (p <= 0) return null;
                const e = Easing.easeOutCubic(p);
                return (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'8px 14px', borderBottom:'1px solid #F1F5F9', borderLeft:`3px solid ${p<1?'#0085FF':'transparent'}`, opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*-10}px)`}}>
                    <div style={{width:24, height:30, background:'#FEE2E2', border:'1px solid #FCA5A5', borderRadius:4, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                      <span className="f-mono" style={{fontSize:6.5, fontWeight:800, color:'#DC2626'}}>PDF</span>
                    </div>
                    <span className="f-mono" style={{width:180, fontSize:10.5, color:'#334155', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{r[0]}</span>
                    <span className="f-plex" style={{width:88, fontSize:11.5, fontWeight:600, color:'#0F172A'}}>{r[1]}</span>
                    <span className="f-mono" style={{width:110, fontSize:10, color:'#64748B'}}>{r[2]}</span>
                    <span className="f-mono" style={{fontSize:11.5, fontWeight:700, color:'#0F172A'}}>{r[3]}</span>
                    <div style={{flex:1}}/>
                    <div style={{padding:'4px 10px', background:'#10B981', color:'#fff', borderRadius:6, fontSize:9.5, fontWeight:700}}>+ CONTABILIZAR</div>
                  </div>
                );
              })}
              {!dropped && (
                <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:8, color: dragging&&wakeP>0?'#0085FF':'#94A3B8'}}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 16V4"/><path d="M7 9l5-5 5 5"/><rect x="4" y="16" width="16" height="4" rx="1"/></svg>
                  <div className="f-plex" style={{fontSize:14, fontWeight:600}}>{dragging&&wakeP>0 ? 'Suelta aquí · añadir a Facturas Recibidas' : 'Arrastra archivos o carpetas aquí'}</div>
                </div>
              )}
            </div>

            {/* TOAST central: el beat del mensaje */}
            {toastP > 0 && (
              <div style={{position:'absolute', left:'50%', top:'44%', transform:`translate(-50%,-50%) scale(${lerp(0.8,1,toastE)})`, background:'#fff', borderRadius:14, padding:'18px 26px', boxShadow:'0 30px 80px rgba(15,23,42,0.25)', border:'1px solid #E2E8F0', opacity:clamp(toastP*1.3,0,1), textAlign:'center', zIndex:10}}>
                <div style={{display:'flex', alignItems:'center', gap:11, justifyContent:'center'}}>
                  <span style={{width:28, height:28, borderRadius:100, background:'#10B981', color:'#fff', fontWeight:800, fontSize:15, display:'flex', alignItems:'center', justifyContent:'center'}}>✓</span>
                  <span className="f-plex" style={{fontSize:20, fontWeight:800, color:'#0F172A'}}>Se han añadido 110 facturas</span>
                </div>
                <div className="f-mono" style={{marginTop:9, fontSize:11.5, fontWeight:700, color:'#B45309', background:'rgba(245,158,11,0.10)', border:'1px solid rgba(245,158,11,0.35)', borderRadius:100, padding:'5px 14px', display:'inline-block', transform:`scale(${1+subPulse*0.06})`, boxShadow: subOn?`0 0 0 ${subPulse*4}px rgba(245,158,11,0.15)`:'none'}}>10 ya existían — omitidas, no entran dos veces</div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Explorador de Windows (izquierda) */}
      <div style={{position:'absolute', left:180, top:230, width:600, height:560, borderRadius:10, overflow:'hidden', boxShadow:`0 ${lerp(20,36,frontP)}px ${lerp(50,90,frontP)}px rgba(15,23,42,${lerp(0.16,0.26,frontP)})`, opacity:expP, transform:`translateY(${(1-expE)*30}px) scale(${lerp(0.98,1.015,frontP)})`, zIndex:5, background:'#fff'}}>
        <WindowsExplorerChrome path="Descargas ▸ Facturas"/>
        <div style={{display:'grid', gridTemplateColumns:'1fr 110px', padding:'8px 18px', borderBottom:'1px solid #EEF2F7'}}>
          {['Nombre','Tamaño'].map(h=><div key={h} className="f-mono" style={{fontSize:9.5, color:'#94A3B8', textTransform:'uppercase', letterSpacing:'1px'}}>{h}</div>)}
        </div>
        {FILES.map((f,i)=>{
          const isTarget = f.folder;
          const hidden = dragging && isTarget;
          const hl = isTarget && t >= T.cur1-0.3 && t < T.grab+0.2;
          return (
            <div key={i} style={{display:'grid', gridTemplateColumns:'1fr 110px', alignItems:'center', padding:'10px 18px', background: hl?'rgba(0,133,255,0.10)':'transparent', borderBottom:'1px solid #F8FAFC', opacity: hidden?0.22:1}}>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                {f.folder ? (
                  <svg width="28" height="24" viewBox="0 0 24 20"><path d="M2 4a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4z" fill="#FFC64F" stroke="#E8A82A" strokeWidth="1"/></svg>
                ) : (
                  <div style={{width:26, height:32, background: f.xls?'#DCFCE7':f.zip?'#FEF9C3':'#FEE2E2', border:`1px solid ${f.xls?'#86EFAC':f.zip?'#FDE047':'#FCA5A5'}`, borderRadius:4, display:'flex', alignItems:'center', justifyContent:'center'}}>
                    <span className="f-mono" style={{fontSize:7, fontWeight:800, color: f.xls?'#16A34A':f.zip?'#CA8A04':'#DC2626'}}>{f.xls?'XLS':f.zip?'ZIP':'PDF'}</span>
                  </div>
                )}
                <span style={{fontSize:12.5, color:'#334155', fontWeight: f.folder?600:400, fontFamily:"'Open Sans',sans-serif"}}>{f.n}</span>
              </div>
              <span className="f-mono" style={{fontSize:10.5, color:'#94A3B8'}}>{f.s}</span>
            </div>
          );
        })}
      </div>

      {/* Ghost: LA CARPETA volando con badge 120 */}
      {dragging && (
        <div style={{position:'absolute', left:cur.x-52, top:cur.y-40, zIndex:30, pointerEvents:'none', transform:'rotate(-3deg)'}}>
          <svg width="104" height="86" viewBox="0 0 24 20" style={{filter:'drop-shadow(0 22px 40px rgba(0,0,0,0.4))'}}><path d="M2 4a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4z" fill="#FFC64F" stroke="#E8A82A" strokeWidth="0.8"/></svg>
          <div className="f-mono" style={{position:'absolute', right:-14, top:-12, minWidth:34, height:30, padding:'0 8px', background:'#0085FF', color:'#fff', borderRadius:100, fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 6px 14px rgba(0,133,255,0.5)', transform:`scale(${badgePulse?1.2:1})`}}>120</div>
        </div>
      )}

      {t > T.cur0 && <CineCursor x={cur.x} y={cur.y} clicking={(t>=T.grab&&t<T.grab+0.25)||(t>=T.drop&&t<T.drop+0.22)}/>}

    </SlideCanvas>
  );
}
Object.assign(window, { Escena05 });