function PageSales(){
  const I = window.Icons;
  const D = window.FLUXData;

  // Heatmap data: stores x weekdays
  const stores = D.stores.slice(0,6).map(s=>s.id);
  const days = ['Lun','Mar','Mié','Jue','Vie','Sáb','Dom'];
  const heatValues = stores.map(()=>days.map(()=>Math.round(50+Math.random()*200)));

  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Ventas</h1>
        <p className="page-sub">Análisis de ventas en tiempo real por tienda, canal, categoría y horario.</p>
      </div>

      <div className="kpi-grid" style={{marginBottom:18}}>
        {[
          {l:'Ventas totales (mes)', v:'$8.69M', d:'+12.4% vs. anterior', icon:'Cart'},
          {l:'Ticket promedio', v:'$612', d:'+4.1%', icon:'Tag'},
          {l:'Unidades vendidas', v:'24,130', d:'+8.7%', icon:'Box'},
          {l:'Tasa de conversión', v:'18.2%', d:'+2.3 pp', icon:'Target'},
        ].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"><Ic/></span></div>
              <div className="kpi-value">{k.v}</div>
              <div className="kpi-foot"><span>{k.d}</span></div>
            </div>
          );
        })}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:14,marginBottom:14}}>
        <div className="card flush">
          <div className="card-head"><div className="card-title">Ventas por día</div><div className="seg"><button className="seg-item">7d</button><button className="seg-item active">30d</button><button className="seg-item">90d</button></div></div>
          <div className="card-body"><LineChart data={D.days} height={260} showTooltipDay={15}/></div>
        </div>
        <div className="card flush">
          <div className="card-head"><div className="card-title">Top categorías</div></div>
          <div className="card-body">
            <HBar items={D.categories.map(c=>({label:c.name,value:c.demand,color:c.color}))}/>
          </div>
        </div>
      </div>

      <div className="card flush">
        <div className="card-head">
          <div className="card-title">Mapa de calor: ventas por tienda × día de la semana</div>
          <div className="select">Última semana <I.ChevDown/></div>
        </div>
        <div className="card-body">
          <Heatmap rows={stores} cols={days} values={heatValues} format={v=>'$'+v+'K'}/>
        </div>
      </div>
    </>
  );
}
window.PageSales = PageSales;