const CatalogPage = ({ setPage, setSelectedProduct, onAddToCart, lang }) => {
  const [activeCategory, setActiveCategory] = React.useState("all");
  const [sort, setSort] = React.useState("default");
  const t = (en, id) => lang === "id" ? id : en;

  const filtered = PRODUCTS
    .filter(p => activeCategory === "all" ? true : p.category === activeCategory)
    .sort((a, b) => {
      if (sort === "price-asc") return a.price - b.price;
      if (sort === "price-desc") return b.price - a.price;
      return 0;
    });

  return (
    <div style={{ paddingTop: 72, minHeight: "100vh", background: "#f9f8f6" }}>
      {/* Header */}
      <div style={{
        background: "#111", padding: "80px 32px 64px",
        textAlign: "center"
      }}>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "#666", margin: "0 0 12px" }}>
          LOPOBYA
        </p>
        <h1 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: "clamp(40px, 5vw, 64px)", fontWeight: 400, color: "#f9f8f6", margin: 0 }}>
          {t("Our Collection", "Koleksi Kami")}
        </h1>
      </div>

      {/* Filter bar */}
      <div className="lpb-filter-bar" style={{ background: "#f9f8f6", borderBottom: "1px solid #e8e6e2", padding: "0 16px", position: "sticky", top: 72, zIndex: 100 }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          {/* Categories */}
          <div style={{ display: "flex", gap: 0, overflowX: "auto" }}>
            {CATEGORIES.map(cat => (
              <button
                key={cat.id}
                onClick={() => setActiveCategory(cat.id)}
                style={{
                  background: "none", border: "none", cursor: "pointer",
                  fontFamily: "'DM Sans', sans-serif",
                  fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
                  color: activeCategory === cat.id ? "#111" : "#999",
                  fontWeight: activeCategory === cat.id ? 600 : 400,
                  padding: "18px 16px",
                  borderBottom: activeCategory === cat.id ? "2px solid #111" : "2px solid transparent",
                  transition: "all 0.2s", whiteSpace: "nowrap"
                }}
              >
                {lang === "id" ? cat.labelId : cat.label}
              </button>
            ))}
          </div>

          {/* Sort */}
          <select
            value={sort}
            onChange={e => setSort(e.target.value)}
            style={{
              background: "none", border: "1px solid #e8e6e2",
              fontFamily: "'DM Sans', sans-serif",
              fontSize: 11, letterSpacing: "0.1em",
              color: "#666", padding: "6px 12px", cursor: "pointer",
              outline: "none"
            }}
          >
            <option value="default">{t("Sort: Default", "Urutan: Default")}</option>
            <option value="price-asc">{t("Price: Low to High", "Harga: Rendah ke Tinggi")}</option>
            <option value="price-desc">{t("Price: High to Low", "Harga: Tinggi ke Rendah")}</option>
          </select>
        </div>
      </div>

      {/* Product grid */}
      <div className="lpb-catalog-wrap" style={{ maxWidth: 1200, margin: "0 auto", padding: "64px 32px" }}>
        {PRODUCTS.length === 0 ? (
          <div className="lpb-products-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 32 }}>
            {[1,2,3,4,5,6,7,8].map(i => (
              <div key={i}>
                <div className="lpb-skeleton lpb-skel-card" />
                <div className="lpb-skeleton lpb-skel-line short" />
                <div className="lpb-skeleton lpb-skel-line med" />
                <div className="lpb-skeleton lpb-skel-line short" style={{ marginTop: 8 }} />
              </div>
            ))}
          </div>
        ) : filtered.length === 0 ? (
          <div style={{ textAlign: "center", padding: "80px 0", color: "#aaa", fontFamily: "'DM Sans', sans-serif" }}>
            {t("No products found.", "Produk tidak ditemukan.")}
          </div>
        ) : (
          <div className="lpb-products-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 32 }}>
            {filtered.map(p => (
              <ProductCard
                key={p.id} product={p} lang={lang}
                onView={(prod) => { setSelectedProduct(prod); setPage("product"); }}
                onAddToCart={onAddToCart}
              />
            ))}
          </div>
        )}
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#bbb", textAlign: "center", marginTop: 48, letterSpacing: "0.1em" }}>
          {filtered.length} {t("products", "produk")}
        </p>
      </div>
    </div>
  );
};

Object.assign(window, { CatalogPage });