function PageIntegrations({pushToast}){
  const I = window.Icons;
  const D = window.FLUXData;
  const connected = D.integrations.filter(i=>i.status==='connected');
  const available = D.integrations.filter(i=>i.status==='available');

  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Integraciones</h1>
        <p className="page-sub">Conecta FLUX con tus sistemas: ERP, WMS, POS, e-commerce, BI y mensajería.</p>
      </div>

      <div className="kpi-grid" style={{marginBottom:18}}>
        {[
          {l:'Conectadas', v:connected.length, icon:'Plug'},
          {l:'Eventos hoy', v:'14,820', icon:'Activity'},
          {l:'Latencia promedio', v:'42ms', icon:'Zap'},
          {l:'Errores (24h)', v:'2', icon:'Alert', color:'amber'},
        ].map((k,i)=>{
          const Ic = I[k.icon];
          return (
            <div className="kpi" key={i}>
              <div className="kpi-label"><span>{k.l}</span><span className="kpi-icon" style={k.color==='amber'?{background:'var(--amber-soft)',color:'var(--amber-2)'}:{}}><Ic/></span></div>
              <div className="kpi-value">{k.v}</div>
            </div>
          );
        })}
      </div>

      <div className="card flush" style={{marginBottom:14}}>
        <div className="card-head"><div className="card-title">Conectadas <span className="count" style={{marginLeft:4,fontSize:11,fontWeight:600,background:'var(--green-soft)',color:'var(--green)',padding:'1px 7px',borderRadius:99}}>{connected.length}</span></div></div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:0}}>
          {connected.map(it=>(
            <div key={it.id} style={{padding:'14px 18px',borderBottom:'1px solid var(--line-2)',borderRight:'1px solid var(--line-2)',display:'flex',alignItems:'center',gap:12}}>
              <div style={{width:38,height:38,borderRadius:9,background:'var(--surface-2)',border:'1px solid var(--line)',display:'grid',placeItems:'center',color:'var(--ink-2)',fontWeight:700,fontSize:11,fontFamily:'JetBrains Mono'}}>{it.vendor.slice(0,3).toUpperCase()}</div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13.5,fontWeight:600,color:'var(--ink)'}}>{it.name}</div>
                <div style={{fontSize:11.5,color:'var(--ink-3)'}}>{it.kind} · Última sync: {it.last}</div>
              </div>
              <span className="status live"><span className="d"/>Conectado</span>
              <button className="btn sm">Configurar</button>
            </div>
          ))}
        </div>
      </div>

      <div className="card flush">
        <div className="card-head"><div className="card-title">Disponibles</div></div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:0}}>
          {available.map(it=>(
            <div key={it.id} style={{padding:'14px 18px',borderBottom:'1px solid var(--line-2)',borderRight:'1px solid var(--line-2)',display:'flex',alignItems:'center',gap:12}}>
              <div style={{width:38,height:38,borderRadius:9,background:'var(--surface-2)',border:'1px solid var(--line)',display:'grid',placeItems:'center',color:'var(--ink-3)',fontWeight:700,fontSize:11,fontFamily:'JetBrains Mono'}}>{it.vendor.slice(0,3).toUpperCase()}</div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13.5,fontWeight:600,color:'var(--ink)'}}>{it.name}</div>
                <div style={{fontSize:11.5,color:'var(--ink-3)'}}>{it.kind}</div>
              </div>
              <button className="btn sm primary" onClick={()=>pushToast(`${it.name} conectado`)}>Conectar</button>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}
window.PageIntegrations = PageIntegrations;