// === Escena 04 — "El buzón" · audio real 18.60s ===
// LOCUCIÓN: "Así entran las facturas en Dinaup. Tienes un buzón con tu propia dirección, y tus
//   facturas llegan solas por email. Mira el contador: ciento cuarenta y cinco esperando. Un
//   clic... y todas dentro. Sin abrir el correo, sin descargar adjuntos, sin ir archivo por
//   archivo."
// BEATS: el chip del buzón CUENTA 0→145 con la voz · clic alineado en el botón de descarga ·
//   stream rápido de filas entrando mientras el contador baja 145→0 · toast final.
function Escena04({ t }){
  const T = {
    win:       0.3,  // "Así entran las facturas"              → ventana
    glow:      2.4,                                          // (apoyo) glow
    pill:      3.0,  // "Tienes un buzón"                      → píldora del buzón
    count0:    11.0,  // "ciento cuarenta y cinco"              → contador 0→145
    countDur:  1.8,                                          // (duración, no instante)
    cur0:      12.8,                                          // (apoyo) cursor entra
    cur1:     13.9,                                          // (apoyo) cursor llega
    click:    14.2,  // "Un clic"                              → click
    stream0:  15.4,  // "y todas dentro"                       → filas entrando
    streamDur: 3.5,                                          // (duración, no instante)
    toast:    17.1,  // "Sin abrir el correo"                  → toast
  };
  const winP = clamp((t-T.win)/0.6, 0, 1), winE = Easing.easeOutCubic(winP);
  const glowP = clamp((t-T.glow)/0.5, 0, 1);
  const pillOn = t >= T.pill && t < T.pill+1.3;
  const sweep = clamp((t-T.pill)/0.9, 0, 1);

  // Contador del buzón: sube 0→145 con la voz; tras el click baja 145→0 con el stream
  const upN = useCountUp(0, 145, T.count0, T.countDur, t);
  const downP = clamp((t-T.stream0)/T.streamDur, 0, 1);
  const buz = t < T.stream0 ? upN : Math.round(145 * (1 - Easing.easeInOutQuad(downP)));
  const chipVisible = t >= T.count0;
  const chipDone = downP >= 1;
  const inN = t < T.stream0 ? 0 : 145 - buz;

  // Cursor orgánico → botón de descarga (posición absoluta conocida del botón: 1600, 362)
  const curP = clamp((t-T.cur0)/(T.cur1-T.cur0), 0, 1);
  const curE = Easing.easeInOutCubic(Math.pow(curP, 0.85));
  const A = {x:1750, y:1005}, B = {x:1600, y:362};
  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*-130, y:(A.y+B.y)/2 + (B.x-A.x)/len*-130 };
  const v = 1-curE;
  const cur = { x: v*v*A.x + 2*v*curE*C.x + curE*curE*B.x, y: v*v*A.y + 2*v*curE*C.y + curE*curE*B.y };
  const clicking = t >= T.click && t < T.click+0.22;
  const ringP = clamp((t-T.click)/0.5, 0, 1);

  // Stream de filas (12 visibles, rotando el pool — la sensación de "muchas, rápido")
  const POOL = [
    ['factura-endesa-nov.pdf','Endesa','END-887421','288,47 €'],
    ['vodafone-nov.pdf','Vodafone','VF-2025-11-002','120,00 €'],
    ['movistar-nov.pdf','Movistar','FM-112334','79,99 €'],
    ['naturgy-nov.pdf','Naturgy','NG-455812','96,10 €'],
    ['iberdrola-taller.pdf','Iberdrola','IB-99213','142,10 €'],
    ['seur-envios.pdf','SEUR','SE-88213','34,50 €'],
    ['mapfre-flota.pdf','Mapfre','MP-2025-8841','96,40 €'],
    ['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 €'],
    ['amazon-material.pdf','Amazon EU','AMZ-0923','145,00 €'],
  ];
  const rowP = (i)=> clamp((t-(T.stream0+i*0.16))/0.32, 0, 1);

  return (
    <SlideCanvas variant="light-soft">
      <div style={{position:'absolute', left:240, top:110, width:1440, height:860, background:'#fff', borderRadius:12, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:'0 40px 100px rgba(0,133,255,0.16), 0 10px 26px rgba(15,23,42,0.10)', opacity:winP, transform:`translateY(${(1-winE)*26}px) scale(${lerp(0.975,1,winE)})`}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/FacturasRecibidas" title="Dinaup — Facturas recibidas"/>
        <DinaupAppHeader breadcrumb={["Compras","Facturas recibidas"]}/>

        {/* Sub-pestañas (ARCHIVOS activa) */}
        <div style={{display:'flex', gap:26, alignItems:'center', padding:'10px 30px 0', borderBottom:'1px solid #EEF2F7'}}>
          {['FACTURAS RECIBIDAS','CONCEPTOS','PAGOS','ARCHIVOS'].map((p,i)=>(
            <div key={p} className="f-plex" style={{fontSize:12, fontWeight:700, letterSpacing:'0.5px', color:i===3?'#0085FF':'#94A3B8', paddingBottom:9, borderBottom:i===3?'3px solid #0085FF':'3px solid transparent'}}>{p}</div>
          ))}
          <div style={{flex:1}}/>
          <div className="f-mono" style={{fontSize:9, fontWeight:800, color:'#fff', background:'#EF4444', borderRadius:5, padding:'2px 8px', marginBottom:8}}>BETA</div>
        </div>

        <div style={{padding:'12px 30px 0'}}>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:9}}>
            <div className="f-mono" style={{fontSize:11, color:'#94A3B8'}}>Dinaup Drive » Facturas Recibidas</div>
            <div style={{flex:1}}/>
            {['NUEVOS','✓','⊘'].map((p,i)=>(
              <div key={p} className="f-mono" style={{fontSize:10.5, fontWeight:700, color:i===0?'#0085FF':'#94A3B8', borderBottom:i===0?'2px solid #0085FF':'none', paddingBottom:2}}>{p}</div>
            ))}
          </div>

          {/* Banner del buzón — el botón de descarga vive en posición fija (cursor alineado) */}
          <div style={{position:'relative', background:'linear-gradient(120deg,#0085FF,#00A2FF)', borderRadius:12, padding:'15px 96px 15px 22px', display:'flex', alignItems:'center', gap:18, boxShadow: glowP>0?`0 10px 30px rgba(0,133,255,${0.25+glowP*0.2}), 0 0 0 ${glowP*3}px rgba(0,133,255,0.18)`:'0 10px 30px rgba(0,133,255,0.25)'}}>
            <div style={{width:46, height:46, background:'rgba(255,255,255,0.18)', borderRadius:10, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
              <svg width="24" height="24" 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>
            </div>
            <div style={{minWidth:0}}>
              <div className="f-plex" style={{fontSize:16, fontWeight:700, color:'#fff'}}>Recibe facturas por email</div>
              <div style={{position:'relative', display:'inline-flex', alignItems:'center', gap:8, marginTop:6, background:'rgba(15,23,42,0.55)', borderRadius:8, padding:'5px 12px', overflow:'hidden', boxShadow: pillOn?'0 0 0 3px rgba(255,255,255,0.45)':'none'}}>
                <span className="f-mono" style={{fontSize:12.5, color:'#E0F2FE'}}>pymes_facturas@dinaup-mail.com</span>
                <span style={{fontSize:12, color:'#BAE6FD'}}>⧉</span>
                {sweep>0 && sweep<1 && <span style={{position:'absolute', top:0, bottom:0, left:`${lerp(-25,110,sweep)}%`, width:'22%', background:'linear-gradient(100deg,transparent,rgba(255,255,255,0.35),transparent)'}}/>}
              </div>
            </div>
            <div style={{flex:1}}/>
            {chipVisible && (
              <div className="f-mono" style={{fontSize:13, fontWeight:800, color: chipDone?'#475569':'#78350F', background: chipDone?'#E2E8F0':'#FDE047', borderRadius:100, padding:'8px 16px', boxShadow:'0 4px 12px rgba(0,0,0,0.18)', minWidth:132, textAlign:'center', transform:`scale(${t<T.count0+0.35?lerp(0.6,1,Easing.easeOutBack(clamp((t-T.count0)/0.35,0,1))):1})`}}>{buz} EN BUZÓN</div>
            )}
            {/* Botón de descarga en absolute: centro canvas = (1600, 362) */}
            <div style={{position:'absolute', right:28, top:'50%', transform:`translateY(-50%) ${clicking?'scale(0.9)':'scale(1)'}`, width:44, height:44, background:'#fff', borderRadius:100, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: clicking?'0 2px 6px rgba(0,0,0,0.25)':'0 6px 16px rgba(0,0,0,0.2)'}}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0085FF" strokeWidth="2.4"><path d="M12 3v13"/><path d="M6 11l6 6 6-6"/><path d="M4 21h16"/></svg>
              {ringP > 0 && ringP < 1 && <div style={{position:'absolute', inset:-6, borderRadius:100, border:'3px solid rgba(255,255,255,0.9)', opacity:1-ringP, transform:`scale(${lerp(0.8,1.7,Easing.easeOutCubic(ringP))})`}}/>}
            </div>
          </div>

          {/* Stats */}
          <div style={{display:'flex', alignItems:'center', gap:20, padding:'10px 4px 7px'}}>
            <span className="f-mono" style={{fontSize:11.5, fontWeight:700, color: inN>0?'#0085FF':'#475569', background: inN>0&&!chipDone?'rgba(0,133,255,0.10)':'transparent', borderRadius:6, padding:'2px 8px'}}>{11 + inN} facturas</span>
            {inN > 0 && <span className="f-mono" style={{fontSize:11.5, fontWeight:700, color:'#059669'}}>⬇ entrando… {inN} / 145</span>}
            <span className="f-mono" style={{fontSize:11.5, color:'#64748B'}}>⏱ IA <b style={{color:'#059669'}}>2 min</b> · manual <b style={{color:'#DC2626'}}>20 min</b></span>
          </div>

          {/* Lista en stream */}
          <div style={{border:'1px solid #E2E8F0', borderRadius:10, overflow:'hidden', background:'#fff'}}>
            {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:14, padding:'7.5px 16px', 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:26, height:32, background:'#FEE2E2', border:'1px solid #FCA5A5', borderRadius:4, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                    <span className="f-mono" style={{fontSize:7, fontWeight:800, color:'#DC2626'}}>PDF</span>
                  </div>
                  <span className="f-mono" style={{width:225, fontSize:11, color:'#334155', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{r[0]}</span>
                  <span className="f-plex" style={{width:120, fontSize:12, fontWeight:600, color:'#0F172A'}}>{r[1]}</span>
                  <span className="f-mono" style={{width:160, fontSize:10.5, color:'#64748B'}}>{r[2]}</span>
                  <span className="f-mono" style={{width:95, fontSize:12, fontWeight:700, color:'#0F172A', textAlign:'right'}}>{r[3]}</span>
                  <div style={{flex:1}}/>
                  <span className="f-mono" style={{fontSize:10, fontWeight:700, color:'#059669'}}>✓</span>
                  <div style={{padding:'5px 12px', background:'#10B981', color:'#fff', borderRadius:6, fontSize:10, fontWeight:700}}>+ CONTABILIZAR</div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Toast */}
        {t >= T.toast && (
          <div style={{position:'absolute', right:26, bottom:22, background:'#0F172A', color:'#fff', borderRadius:10, padding:'11px 18px', display:'flex', alignItems:'center', gap:10, boxShadow:'0 14px 34px rgba(15,23,42,0.35)', opacity:clamp((t-T.toast)/0.35,0,1), transform:`translateY(${(1-Easing.easeOutBack(clamp((t-T.toast)/0.45,0,1)))*20}px)`}}>
            <span style={{color:'#34D399', fontWeight:800}}>✓</span>
            <span className="f-plex" style={{fontSize:13.5, fontWeight:600}}>145 facturas descargadas del buzón</span>
          </div>
        )}
      </div>

      {curP > 0 && <CineCursor x={cur.x} y={cur.y} clicking={clicking}/>}

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