/* Products — the two-product line. Reusable ProductCard, themed clay/sage. */
function ProductCard({ id, theme, en, name, vol, img, desc, feats, ings }) {
  const c = theme === "clay"
    ? { swatch: "var(--clay)", tick: "var(--clay-tint)", tickFg: "var(--clay-deep)", thumb: "var(--clay-tint)" }
    : { swatch: "var(--sage)", tick: "var(--sage-tint)", tickFg: "var(--sage-deep)", thumb: "var(--sage-tint)" };
  return (
    <article className="product-card reveal" id={id}>
      <div className="pc-top">
        <div className="pc-head">
          <div className="ptag">
            <span className="swatch" style={{ background: c.swatch, width: 18, height: 18, borderRadius: 6, margin: 0 }}></span>
            {en}
          </div>
          <h3>{name}</h3>
          {vol && <div className="pc-vol">淨含量 {vol}</div>}
        </div>
        <div className="pc-thumb" style={{ background: c.thumb }}>
          <img src={img} alt={name} />
        </div>
      </div>
      <p>{desc}</p>
      <ul className="feats">
        {feats.map((f) => (
          <li key={f}>
            <span className="tick" style={{ background: c.tick, color: c.tickFg }}>
              <Icon name="check" className="lc-12" />
            </span>
            {f}
          </li>
        ))}
      </ul>
      <p className="ing-label">主要成分</p>
      <div className="ing-chips">
        {ings.map((i) => <span className="chip" key={i}>{i}</span>)}
      </div>
    </article>
  );
}

function Products() {
  return (
    <section className="section" id="products">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Two Formulas · 兩支配方</span>
          <h2>為不同的清潔時刻，<br />各自溫柔以對。</h2>
        </div>
        <div className="products">
          <ProductCard
            id="mousse" theme="clay"
            en="Waterless Mousse" vol="150ml" name="寵物乾洗澡慕斯"
            img="assets/product-mousse.jpg"
            desc="忙碌或天冷不方便洗澡的日子，免沖水輕輕一抹，溫和帶走油膩與氣味。"
            feats={[
              "PH 中性・胺基酸系潔淨，溫和不刺激",
              "玻尿酸 × 胺基酸，呵護肌膚屏障與水分",
              "柿子萃取淨味，留下淡淡清香",
            ]}
            ings={["維他命 B5", "小分子玻尿酸", "洋甘菊", "柿子萃取", "小黃瓜"]}
          />
          <ProductCard
            id="shampoo" theme="sage"
            en="Shampoo" vol="330ml" name="寵物洗毛精"
            img="assets/product-shampoo.jpg"
            desc="正式洗澡的日子，用植萃溫和洗淨，洗後柔順蓬鬆、好沖洗。"
            feats={[
              "不添加香精與色素，單純親膚",
              "維生素 B5 × 燕麥萃取，潤澤毛髮、穩定肌膚",
              "雪松 × 天竺葵精油，舒緩情緒的天然香氛",
            ]}
            ings={["洋甘菊", "維生素 B5", "燕麥萃取", "雪松精油", "天竺葵精油"]}
          />
        </div>
      </div>
    </section>
  );
}

window.Products = Products;
window.ProductCard = ProductCard;