// ET Storefront concept — Collection (shop by vibe)
function CollectionScreen({ nav, initialVibe = "all" }) {
  const DS = window.ETDesignSystem_0c923e;
  const { ProductCard, Tag, Button } = DS;
  const { PhotoSlot, Icon, money, PRODUCTS, VIBES } = window;
  const [vibe, setVibe] = React.useState(initialVibe);
  React.useEffect(() => setVibe(initialVibe), [initialVibe]);

  const list = vibe === "all" ? PRODUCTS : PRODUCTS.filter((p) => p.vibe === vibe);
  const active = VIBES.find((v) => v.id === vibe) || VIBES[0];

  return (
    <div style={{ paddingBottom: 8 }}>
      {/* heading */}
      <section style={{ padding: "26px 22px 16px", background: "var(--surface-band)" }}>
        <div className="et-kicker" style={{ color: "var(--et-brown)" }}>เลือกตามอารมณ์</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 30, lineHeight: 1.1, margin: "8px 0 0" }}>{active.th}</h1>
        <div className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-secondary)", marginTop: 6 }}>
          {list.length} ชิ้นในหมวดนี้ · คัดมาแล้วทุกชิ้น
        </div>
      </section>

      {/* sticky vibe chips */}
      <div style={{ position: "sticky", top: 98, zIndex: 20, background: "var(--surface-page)", borderBottom: "1px solid var(--line-hairline)", padding: "12px 0" }}>
        <div className="et-rail" style={{ gap: 8 }}>
          {VIBES.map((v) => (
            <div key={v.id} style={{ flex: "0 0 auto" }}>
              <Tag active={vibe === v.id} onClick={() => setVibe(v.id)}>{v.th}</Tag>
            </div>
          ))}
        </div>
      </div>

      {/* sort row */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 22px 4px" }}>
        <span className="et-microlabel">{list.length} รายการ</span>
        <button className="et-textlink" style={{ fontSize: 12.5 }}>
          เรียง: เข้าใหม่ล่าสุด <Icon name="chevD" size={14} stroke="var(--et-brown)" />
        </button>
      </div>

      {/* grid */}
      <section style={{ padding: "12px 22px 8px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          {list.map((p) => (
            <ProductCard key={p.id} name={p.name} price={money(p.price)} origin={p.origin} badge={p.badge} badgeTone={p.badgeTone} onClick={() => nav("pdp", p.id)} />
          ))}
        </div>
      </section>

      {/* anti-copycat reassurance */}
      <section style={{ margin: "20px 22px 28px", padding: "20px", borderRadius: "var(--r-3)", background: "var(--surface-soft)" }}>
        <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
          <Icon name="shield" size={22} stroke="var(--et-brown)" />
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 16 }}>ระวังร้านก๊อป</div>
            <div className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-secondary)", marginTop: 4 }}>
              ET ขายเฉพาะที่ et.co.th และ LINE OA ทางการเท่านั้น ทุกชิ้นมีรีวิวจากลูกค้าจริงและที่มาที่ตรวจสอบได้
            </div>
          </div>
        </div>
      </section>

      <window.Footer nav={nav} />
    </div>
  );
}
window.CollectionScreen = CollectionScreen;