(function(){
const { SectionHeading, ProductCard, Select, Input, Badge, Breadcrumb, Button } = window.HatchSanitaryDesignSystem_c15e1f;

function ProductsScreen({ go, initialCategory }) {
  const D = window.HATCH;
  const cats = ["All", ...D.categories.map((c) => c.name)];
  const [cat, setCat] = React.useState(initialCategory && cats.includes(initialCategory) ? initialCategory : "All");
  const [q, setQ] = React.useState("");
  const list = D.products.filter((p) => (cat === "All" || p.category === cat) && p.name.toLowerCase().includes(q.toLowerCase()));

  return (
    <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "32px var(--gutter) clamp(72px,9vw,120px)" }}>
      <Breadcrumb items={[{ label: "Home", href: "#" }, { label: "Products" }]} />
      <div style={{ marginTop: "26px" }}>
        <SectionHeading overline="Catalogue" title="All products" description={`${list.length} products` + (cat !== "All" ? ` in ${cat}` : "")} />
      </div>

      <div style={{ marginTop: "36px", display: "grid", gridTemplateColumns: "248px 1fr", gap: "40px", alignItems: "start" }}>
        <aside style={{ position: "sticky", top: "92px", display: "flex", flexDirection: "column", gap: "26px" }}>
          <Input label="Search" placeholder="Search products…" value={q} onChange={(e) => setQ(e.target.value)} />
          <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-secondary)" }}>Category</span>
            <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
              {cats.map((c) => {
                const on = c === cat;
                return (
                  <button key={c} onClick={() => setCat(c)} style={{ textAlign: "left", background: on ? "var(--bg-subtle)" : "transparent", border: "none", borderLeft: `2px solid ${on ? "var(--accent)" : "transparent"}`, padding: "9px 12px", cursor: "pointer", fontFamily: "var(--font-text)", fontSize: "14px", fontWeight: on ? 800 : 300, color: on ? "var(--ink)" : "var(--text-secondary)", transition: "all var(--dur-fast) var(--ease-standard)" }}>{c}</button>
                );
              })}
            </div>
          </div>
        </aside>

        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "22px", gap: "16px", flexWrap: "wrap" }}>
            <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
              {cat !== "All" && <Badge tone="accent">{cat}</Badge>}
              {q && <Badge tone="outline">“{q}”</Badge>}
            </div>
            <div style={{ width: "200px" }}><Select options={["Newest first", "A – Z", "Model code"]} /></div>
          </div>
          {list.length === 0 ? (
            <div style={{ padding: "80px 0", textAlign: "center", color: "var(--text-muted)" }}>No products match your filters.</div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "16px" }}>
              {list.map((p) => <ProductCard key={p.id} image={p.image} name={p.name} model={p.model} category={p.category} badge={p.badge} onClick={(e) => { e.preventDefault(); go("detail", p); }} />)}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
window.ProductsScreen = ProductsScreen;
})();