// === 09:36 · Banco (14s) — 179 movimientos clasificados + conciliación en clicks ===
// Fase 1: el extracto entra y la IA lo clasifica (contador + chips de categoría).
// Fase 2: sugerencias de match banco↔factura; el cursor confirma una a una.

function SlideBanco({ t }){
  const WIN_W = 1100, WIN_H = 740, WIN_L = (1920-WIN_W)/2, WIN_T = 185;

  const conciliations = [
    { mov:{ d:'02/11', c:'TRF RECIBIDA CAFETERIA LOS ROBLES', a:'+1.210,00 €', pos:true },
      fac:{ prov:'Cafetería Los Robles', n:'F-2025-0247', total:'1.210,00 €' } },
    { mov:{ d:'04/11', c:'RECIBO ENDESA SUMINISTRO', a:'-288,47 €', pos:false },
      fac:{ prov:'Endesa', n:'END-887421', total:'288,47 €' } },
    { mov:{ d:'05/11', c:'DOMICIL VODAFONE ESPAÑA', a:'-120,00 €', pos:false },
      fac:{ prov:'Vodafone', n:'VF-2025-11-002', total:'120,00 €' } },
    { mov:{ d:'06/11', c:'TRF PAGO MOVISTAR EMPRESA', a:'-79,99 €', pos:false },
      fac:{ prov:'Movistar', n:'FM-112334', total:'79,99 €' } },
    { mov:{ d:'07/11', c:'TRF RECIBIDA FERRETERIA LA LLAVE', a:'+2.420,00 €', pos:true },
      fac:{ prov:'Ferretería La Llave', n:'F-2025-0231', total:'2.420,00 €' } },
  ];

  const movCount = useCountUp(0, 179, 0.8, 1.8, t);
  const cats = [
    { l:'Ventas TPV',  n:84, c:'#0085FF', at:1.6 },
    { l:'Suministros', n:38, c:'#F59E0B', at:2.1 },
    { l:'Nóminas',     n:12, c:'#8B5CF6', at:2.6 },
    { l:'Otros',       n:45, c:'#64748B', at:3.1 },
  ];

  const listAt = 4.6;
  const clickTimes = [6.8, 7.4, 8.0, 8.6, 9.2];
  const confirmedCount = clickTimes.filter(ct => t >= ct + 0.15).length;

  // Geometría interna: contenido empieza en WIN_T+76+65=326.
  // Banner clasif.: margen 14, alto 78 → 340..418. Headers cols ~30 → filas desde ~470.
  const rowHeight = 64, rowGap = 9;
  const listTop = WIN_T + 264;
  const btnCenterX = WIN_L + WIN_W - 40 - 14 - 70;

  const cur = useScriptedCursor({
    t, clicks: clickTimes,
    targetX: btnCenterX,
    getTargetY: (i) => listTop + i*(rowHeight+rowGap) + rowHeight/2,
    parkStart: { x:1660, y:980, t:5.2 },
  });

  return (
    <SlideCanvas variant="light-soft">
      <TimeBadge t={t} hora="09:36" label="El extracto del banco"/>
      <DemoHeader t={t} eyebrow="PYMES · TESORERÍA" title={<>El banco entra solo. <span className="grad-text">Tú confirmas.</span></>}/>

      <div style={{position:'absolute',top:WIN_T,left:WIN_L,width:WIN_W,height:WIN_H,background:'#fff',borderRadius:14,overflow:'hidden',boxShadow:'0 30px 80px rgba(0,133,255,0.15)',border:'1px solid #E2E8F0',opacity:clamp((t-0.3)/0.6,0,1),display:'flex',flexDirection:'column'}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/Tesoreria" title="Tesorería — Dinaup"/>
        <DinaupAppHeader breadcrumb={["Tesorería","Conciliar"]}/>

        {/* Banner clasificación IA */}
        <div style={{margin:'14px 26px 0',padding:'13px 18px',background:'linear-gradient(135deg, rgba(0,133,255,0.07), rgba(0,133,255,0.02))',border:'1px solid rgba(0,133,255,0.2)',borderRadius:12,display:'flex',alignItems:'center',gap:18,flexShrink:0}}>
          <div style={{textAlign:'center',minWidth:90}}>
            <div className="f-mono" style={{fontSize:30,fontWeight:800,color:'var(--dn-primary)',lineHeight:1}}>{movCount}</div>
            <div style={{fontSize:9,color:'#64748B',letterSpacing:0.5,textTransform:'uppercase',fontWeight:600,marginTop:3}}>movimientos</div>
          </div>
          <div style={{width:1,height:42,background:'#E2E8F0'}}/>
          <div style={{flex:1}}>
            <div className="f-plex" style={{fontSize:13,fontWeight:700,color:'#0F172A',marginBottom:7}}>
              {t < 4.2 ? 'BBVA ES21 ···· 4521 · la IA clasifica en grupos' : '✓ 179 clasificados · 0 sin grupo'}
            </div>
            <div style={{display:'flex',gap:7,flexWrap:'wrap'}}>
              {cats.map((c,i)=>{
                const p = clamp((t-c.at)/0.4, 0, 1);
                const e = Easing.easeOutBack(p);
                const n = Math.round(c.n * clamp((t-c.at)/0.8, 0, 1));
                return (
                  <span key={i} className="f-mono" style={{display:'inline-flex',alignItems:'center',gap:6,padding:'4px 10px',background:`${c.c}14`,border:`1px solid ${c.c}45`,borderRadius:100,fontSize:11,fontWeight:700,color:c.c,opacity:clamp(p*1.3,0,1),transform:`scale(${lerp(0.7,1,e)})`}}>
                    {c.l} <b>{n}</b>
                  </span>
                );
              })}
            </div>
          </div>
          <StatusChip label="Reglas aprendidas" color="primary" icon="🤖" start={3.6} t={t}/>
        </div>

        {/* Cabeceras de la lista */}
        <div style={{padding:'14px 54px 6px', display:'grid', gridTemplateColumns:'1fr 40px 1fr 140px', gap:12, fontSize:10, color:'#94A3B8', letterSpacing:1, textTransform:'uppercase', fontWeight:700, opacity:clamp((t-listAt)/0.4,0,1)}}>
          <div>Movimiento bancario</div>
          <div style={{textAlign:'center',fontSize:14,textTransform:'none'}}>→</div>
          <div>Factura</div>
          <div style={{textAlign:'center'}}>Acción</div>
        </div>

        {/* Sugerencias de conciliación */}
        <div style={{padding:'0 40px', flex:1}}>
          {conciliations.map((row,i)=>{
            const ap = clamp((t-(listAt+0.15+i*0.12))/0.35, 0, 1);
            const isConfirmed = t >= clickTimes[i] + 0.15;
            const justClicked = t >= clickTimes[i] && t < clickTimes[i] + 0.15;
            return (
              <div key={i} style={{
                marginBottom:rowGap, height:rowHeight,
                display:'grid', gridTemplateColumns:'1fr 40px 1fr 140px', gap:12,
                padding:'0 14px', alignItems:'center',
                background: isConfirmed ? 'rgba(16,185,129,0.05)' : '#fff',
                borderRadius:10,
                border:`1px solid ${isConfirmed ? 'rgba(16,185,129,0.35)' : '#E2E8F0'}`,
                boxShadow: isConfirmed ? '0 4px 12px rgba(16,185,129,0.12)' : '0 4px 12px rgba(15,23,42,0.04)',
                opacity:ap, transform:`translateY(${(1-ap)*10}px) scale(${justClicked ? 0.985 : 1})`,
                transition:'background 300ms, border-color 300ms, transform 120ms',
              }}>
                <div style={{display:'flex',alignItems:'center',gap:10,minWidth:0}}>
                  <div style={{width:28,height:28,borderRadius:7,background:'rgba(0,133,255,0.1)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,fontSize:12}}>🏦</div>
                  <div style={{minWidth:0,flex:1}}>
                    <div className="f-mono" style={{fontSize:11,color:'#0F172A',fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{row.mov.c}</div>
                    <div style={{fontSize:10,color:'#64748B',marginTop:2,display:'flex',gap:10}}>
                      <span className="f-mono">{row.mov.d}</span>
                      <span className="f-mono" style={{fontWeight:700,color:row.mov.pos?'#10B981':'#EF4444'}}>{row.mov.a}</span>
                    </div>
                  </div>
                </div>
                <div style={{textAlign:'center'}}>
                  <svg width="22" height="14" viewBox="0 0 22 14" style={{margin:'0 auto',display:'block'}}>
                    <path d="M1 7 H18 M13 2 L18 7 L13 12" stroke={isConfirmed?'#10B981':'#CBD5E1'} strokeWidth="1.5" strokeLinecap="round"/>
                  </svg>
                </div>
                <div style={{display:'flex',alignItems:'center',gap:10,minWidth:0}}>
                  <ProviderLogo name={row.fac.prov} size={28}/>
                  <div style={{minWidth:0,flex:1}}>
                    <div className="f-plex" style={{fontSize:11,color:'#0F172A',fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{row.fac.prov}</div>
                    <div style={{fontSize:10,color:'#64748B',marginTop:2,display:'flex',gap:10}}>
                      <span className="f-mono">{row.fac.n}</span>
                      <span className="f-mono" style={{fontWeight:700,color:'var(--dn-primary)'}}>{row.fac.total}</span>
                    </div>
                  </div>
                </div>
                <div style={{display:'flex',justifyContent:'center'}}>
                  {isConfirmed ? (
                    <span style={{display:'inline-flex',alignItems:'center',gap:6,padding:'7px 13px',background:'rgba(16,185,129,0.12)',color:'#059669',borderRadius:9,fontSize:11,fontWeight:700,border:'1px solid rgba(16,185,129,0.35)',fontFamily:"'IBM Plex Sans',sans-serif"}}>
                      ✓ Conciliado
                    </span>
                  ) : (
                    <button style={{padding:'7px 17px',background: justClicked ? '#0066CC' : 'var(--dn-primary)',color:'#fff',border:'none',borderRadius:9,fontSize:11,fontWeight:700,fontFamily:"'IBM Plex Sans',sans-serif",boxShadow:'0 6px 14px rgba(0,133,255,0.25)',transform: justClicked ? 'scale(0.94)' : 'scale(1)',transition:'all 120ms'}}>
                      Conciliar
                    </button>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        {/* Summary */}
        <div style={{margin:'0 40px 16px', padding:'11px 18px', background: confirmedCount===5 ? 'linear-gradient(90deg,rgba(16,185,129,0.12),rgba(0,133,255,0.06))' : '#F8FAFC', border:`1px solid ${confirmedCount===5?'rgba(16,185,129,0.4)':'#E2E8F0'}`, borderRadius:10, display:'flex', alignItems:'center', justifyContent:'space-between', opacity:clamp((t-listAt-0.5)/0.4,0,1), transition:'all 300ms', flexShrink:0}}>
          <div style={{display:'flex',alignItems:'center',gap:12}}>
            <div className="f-mono" style={{fontSize:20,fontWeight:700,color:confirmedCount===5?'#059669':'var(--dn-primary)',lineHeight:1}}>{confirmedCount}</div>
            <div style={{fontSize:10,color:'#64748B',lineHeight:1.2}}>de 5<br/>conciliados</div>
            <div style={{display:'flex',gap:5,marginLeft:6}}>
              {conciliations.map((_,i)=>(
                <div key={i} style={{width:38,height:5,borderRadius:100,background: i < confirmedCount ? '#10B981' : '#E2E8F0',transition:'background 300ms'}}/>
              ))}
            </div>
          </div>
          <div style={{fontSize:11,color:'#64748B'}}>
            {confirmedCount === 5
              ? <span><b style={{color:'#059669'}}>✓ Banco al día.</b> Antes: una mañana. Ahora: 30 segundos.</span>
              : <span>Un click por sugerencia. <b style={{color:'#0F172A'}}>Sin buscar importes ni fechas.</b></span>}
          </div>
        </div>
      </div>

      {/* Cursor */}
      {cur.visible && <CineCursor x={cur.x} y={cur.y} clicking={cur.clicking}/>}

      <SocialCaption t={t} cues={CAPTIONS.slide_banco}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideBanco });