// Catalog screen — filter pills + product grid + pagination
const Ic = window.Ic;
function Catalog({ initialCat, products, onOpen, searchQuery, categories }) {
  const allCats = categories || window.N9_CATEGORIES || ["All"];
  const [cat, setCat] = React.useState(initialCat || "All");
  const q = (searchQuery || "").trim().toLowerCase();
  const byCat = cat === "All" ? products : products.filter(p => p.cat === cat);
  const filtered = q
    ? byCat.filter(p =>
        (p.name || "").toLowerCase().includes(q) ||
        (p.sub || "").toLowerCase().includes(q) ||
        (p.cat || "").toLowerCase().includes(q) ||
        (p.desc || "").toLowerCase().includes(q)
      )
    : byCat;
  return (
    <section style={catStyles.wrap}>
      <div style={catStyles.head}>
        <div>
          <span style={catStyles.meta}>/ CATALOG · {filtered.length} ITEMS {q ? `· "${searchQuery}"` : ""} /</span>
          <h1 style={catStyles.title} className="cat-title">{q ? "SEARCH." : "NOT FOR EVERYONE."}</h1>
        </div>
      </div>

      <div style={catStyles.pills}>
        {allCats.map(c => (
          <button key={c} onClick={() => setCat(c)} style={c===cat ? catStyles.pillActive : catStyles.pill}>{c}</button>
        ))}
      </div>

      <div style={catStyles.grid} className="cat-grid">
        {filtered.map(p => <ProductCard key={p.id} p={p} onOpen={onOpen}/>)}
      </div>

      <div style={catStyles.pager}>
        <button style={catStyles.pageBtn}>‹</button>
        <button style={catStyles.pageActive}>1</button>
        <button style={catStyles.pageBtn}>2</button>
        <button style={catStyles.pageBtn}>3</button>
        <button style={catStyles.pageBtn}>›</button>
      </div>
    </section>
  );
}

const catStyles = {
  wrap: { maxWidth:1280, margin:"0 auto", padding:"40px 24px 96px" },
  head: { display:"flex", justifyContent:"space-between", alignItems:"flex-end", marginBottom:28, gap:24 },
  meta: { fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"#8A8990" },
  metaSm: { fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.18em", textTransform:"uppercase", color:"#8A8990" },
  title: { margin:"6px 0 8px", fontFamily:"Inter, sans-serif", fontWeight:900, fontSize:72, lineHeight:0.95, letterSpacing:"-0.035em", textTransform:"uppercase", color:"#0E0D11" },
  lead: { margin:0, fontFamily:"Inter, sans-serif", fontSize:16, color:"#4A4852" },
  sortRow: { display:"flex", alignItems:"center", gap:10 },
  sort: { display:"inline-flex", alignItems:"center", gap:8, padding:"10px 14px", border:"1px solid #E8E7E9", borderRadius:12, fontFamily:"Inter, sans-serif", fontWeight:500, fontSize:13, color:"#0E0D11", cursor:"pointer" },
  pills: { display:"flex", flexWrap:"wrap", gap:8, alignItems:"center", marginBottom:24, paddingBottom:16, borderBottom:"1px solid #F2F1F3" },
  pill: { background:"#fff", color:"#0E0D11", border:"1px solid #E8E7E9", padding:"8px 14px", borderRadius:999, fontFamily:"Inter, sans-serif", fontWeight:500, fontSize:13, cursor:"pointer" },
  pillActive: { background:"#0E0D11", color:"#fff", border:"1px solid #0E0D11", padding:"8px 14px", borderRadius:999, fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:13, cursor:"pointer" },
  divider: { display:"inline-block", width:1, height:18, background:"#E8E7E9", margin:"0 6px" },
  metaTag: { fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.18em", color:"#0E0D11", border:"1px dashed #E8E7E9", padding:"7px 12px", borderRadius:999, cursor:"pointer" },
  grid: { display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:18 },
  pager: { display:"flex", gap:8, justifyContent:"center", marginTop:40 },
  pageBtn: { width:38, height:38, display:"inline-flex", alignItems:"center", justifyContent:"center", border:"1px solid #E8E7E9", borderRadius:999, background:"#fff", fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:13, color:"#0E0D11", cursor:"pointer" },
  pageActive: { width:38, height:38, display:"inline-flex", alignItems:"center", justifyContent:"center", border:"1px solid #0E0D11", borderRadius:999, background:"#0E0D11", color:"#fff", fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:13, cursor:"pointer" },
};

window.Catalog = Catalog;