// screen-collection.jsx — filters, sort, product grid

function ScreenCollection({ go, onQuick, onFav }) {
  const { PRODUCTS, CATEGORIES } = window.AURA_DATA;
  const [cat, setCat] = React.useState("Tümü");
  const [sort, setSort] = React.useState("featured");

  let list = PRODUCTS.filter((p) => cat === "Tümü" || p.cat === cat);
  list = [...list].sort((a, b) => {
    if (sort === "price-asc") return a.price - b.price;
    if (sort === "price-desc") return b.price - a.price;
    if (sort === "rating") return b.rating - a.rating;
    return 0;
  });
  const cats = ["Tümü", ...CATEGORIES.filter((c) => c !== "Tümü")];

  return (
    <main>
      <div className="wrap page-head">
        <div className="breadcrumb">
          <button onClick={() => go("home")}>Ana Sayfa</button><span>/</span><span style={{ color: "var(--ink)" }}>Koleksiyon</span>
        </div>
        <p className="eyebrow" style={{ marginTop: 22 }}>Sonbahar–Kış 2026</p>
        <h1>Koleksiyon</h1>
        <p className="lead" style={{ marginTop: 18 }}>Özel atölye tasarımı parçalar, tutarlı AI manken modelleriyle. Filtreleyin, sıralayın ve sanal deneme ile bedeninizi bulun.</p>
      </div>

      <div className="wrap">
        <div className="toolbar">
          <div className="filters">
            {cats.map((c) => (
              <button key={c} className={`chip ${cat === c ? "active" : ""}`} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
          <div className="sort">
            <span className="result-count">{list.length} ürün</span>
            <label htmlFor="sort">Sırala</label>
            <select id="sort" value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="featured">Öne çıkanlar</option>
              <option value="price-asc">Fiyat: Artan</option>
              <option value="price-desc">Fiyat: Azalan</option>
              <option value="rating">En çok beğenilen</option>
            </select>
          </div>
        </div>
      </div>

      <section style={{ paddingTop: 44 }}>
        <div className="wrap">
          <div className="grid-products">
            {list.map((p, i) => (
              <Reveal key={p.id} delay={(i % 4) * 60} tag="div">
                <ProductCard p={p} go={go} onQuick={onQuick} onFav={onFav} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

window.ScreenCollection = ScreenCollection;