// 彤冠茶莊 website — Shop listing
const { ProductCard: SProductCard } = window.TongguanTeaDesignSystem_a1a7a1;

const SHOP_CAT = {
  "qilai-set": "sets", "sustain-set": "sets",
  "qilai-oolong": "tea", "ying-light": "tea", "ying-honey": "tea",
  "travel-teaware": "ware",
};

function ShopPage({ t, lang, products, go, addToCart }) {
  const [filter, setFilter] = React.useState("all");
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const tabs = [["all", t.shop.all], ["sets", t.shop.sets], ["tea", t.shop.tea], ["ware", t.shop.ware]];
  const list = products.filter((p) => filter === "all" || SHOP_CAT[p.id] === filter);

  return (
    <main lang={lang}>
      {/* header band */}
      <section style={{ background: "var(--surface-sunken)", paddingTop: "var(--space-8)", paddingBottom: "var(--space-7)" }}>
        <div className="tg-container tg-container--wide">
          <span className="tg-eyebrow" style={{ color: "var(--text-accent)" }}>彤冠茶莊 · Shop</span>
          <h1 className="tg-display" style={{ fontSize: "clamp(2.2rem, 4.5vw, 3.4rem)", margin: "14px 0 14px" }}>{t.shop.title}</h1>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--fs-lead)", color: "var(--text-secondary)", maxWidth: "52ch", margin: 0 }}>{t.shop.body}</p>
        </div>
      </section>

      <div className="tg-container tg-container--wide" style={{ paddingTop: "var(--space-6)", paddingBottom: "var(--space-10)" }}>
        {/* filters */}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 40, borderBottom: "1px solid var(--border-hairline)", paddingBottom: 22 }}>
          {tabs.map(([id, label]) => {
            const active = filter === id;
            return (
              <button key={id} onClick={() => setFilter(id)} style={{
                padding: "9px 18px", borderRadius: "var(--radius-pill)", cursor: "pointer",
                fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 500, letterSpacing: "0.04em",
                border: `1px solid ${active ? "var(--tea)" : "var(--border-hairline)"}`,
                background: active ? "var(--tea)" : "transparent", color: active ? "var(--paper-0)" : "var(--text-secondary)",
                transition: "all var(--dur-fast) var(--ease-out)",
              }}>{label}</button>
            );
          })}
          <span style={{ marginLeft: "auto", alignSelf: "center", fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--text-muted)" }}>{list.length} 件</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "34px 28px" }} className="tg-shop-grid-3">
          {list.map((p) => (
            <SProductCard key={p.id} image={p.image} eyebrow={p.eyebrow[lang]} name={p.name[lang]} subtitle={p.sub[lang]}
              tags={p.tags.slice(0, 2).map((tg) => ({ label: tg[lang], tone: tg.tone }))} amount={p.price}
              badge={p.badge} addLabel={t.product.add} onAdd={() => addToCart(p.id)} onClick={() => go("product", p.id)} />
          ))}
        </div>
      </div>
    </main>
  );
}
window.ShopPage = ShopPage;