/* ============================================================
   LUMFELL — shop / category listing with filtering
   ============================================================ */
function ShopPage({ all, cats, onOpen, onAdd, initialCat }) {
  const [filter, setFilter] = useState(initialCat || "all");
  const [sort, setSort] = useState("featured");

  useEffect(() => { window.scrollTo(0, 0); }, []);
  useEffect(() => { if (initialCat) setFilter(initialCat); }, [initialCat]);
  // re-rendering the grid on filter/sort creates fresh .reveal cards that the
  // page-level observer never sees — reveal them directly so results stay visible.
  useEffect(() => {
    const id = requestAnimationFrame(() =>
      document.querySelectorAll(".shop__grid .reveal").forEach((e) => e.classList.add("is-in")));
    return () => cancelAnimationFrame(id);
  }, [filter, sort]);

  let list = filter === "all" ? all : all.filter((p) => p.cat === filter);
  list = [...list];
  if (sort === "low") list.sort((a, b) => a.price - b.price);
  if (sort === "high") list.sort((a, b) => b.price - a.price);

  const chips = [{ id: "all", name: "All" }, ...cats.map((c) => ({ id: c.id, name: c.name }))];

  return (
    <div className="shop">
      <div className="shop__hero">
        <Placeholder tag="Collection banner — full leather goods spread, top light" tone={["#2a1f14", "#0e0905"]} className="shop__hero-ph" />
        <div className="shop__hero-text u-wrap">
          <span className="u-eyebrow" style={{ color: "var(--cognac-2)" }}>The Full Collection</span>
          <h1 className="shop__title">Everything, made by hand.</h1>
        </div>
      </div>

      <div className="u-wrap">
        <div className="shop__bar">
          <div className="shop__chips">
            {chips.map((c) => (
              <button key={c.id} className={`chip ${filter === c.id ? "is-on" : ""}`} onClick={() => setFilter(c.id)}>
                {c.name}
              </button>
            ))}
          </div>
          <div className="shop__sort">
            <span className="shop__count">{list.length} {list.length === 1 ? "piece" : "pieces"}</span>
            <label className="shop__select">
              <select value={sort} onChange={(e) => setSort(e.target.value)}>
                <option value="featured">Featured</option>
                <option value="low">Price — low to high</option>
                <option value="high">Price — high to low</option>
              </select>
            </label>
          </div>
        </div>

        <div className="shop__grid" key={filter + sort}>
          {list.map((p, i) => (
            <ProductCard key={p.id} p={p} index={i} onOpen={onOpen} onAdd={(pr) => onAdd(pr, 1)} />
          ))}
        </div>
      </div>
    </div>
  );
}
window.ShopPage = ShopPage;