const Products = () => {
  const products = [
  {
    tag: '',
    name: '全方位豌豆蛋白飲',
    spec: '21g 優質蛋白 · 每包 40g',
    flavors: [],
    copy: 'BCAA 多種胺基酸 × 植物蛋白來源。\n乳糖不耐也能安心補充的運動首選。\n基礎款：芝麻、花生、燕麥奶茶、麥芽可可、觀音拿鐵。\n機能款：香草(GABA)、莓果(微米膠原蛋白)',
    image: 'assets/product-protein-box.png',
    color: 'bg-wedar-primary',
    text: 'text-wedar-bone',
    accent: 'text-wedar-lime'
  },
  {
    tag: '',
    name: '一水肌酸',
    spec: '單分單條．每盒30條。',
    flavors: [],
    copy: '補對營養，力量無懈可擊。訓練爆發力、肌耐力的科學補給。',
    image: 'assets/ad-creatine.jpg',
    color: 'bg-[#0E3D7A]',
    text: 'text-white',
    accent: 'text-wedar-lime',
    cover: true
  },
  {
    tag: '',
    name: '歐洲酸櫻桃膠囊',
    spec: '30顆/盒',
    flavors: [],
    copy: '修復，比練更關鍵。練後補給、能量重啟的選擇。',
    image: 'assets/ad-tart-cherry.jpg',
    color: 'bg-black',
    text: 'text-white',
    accent: 'text-wedar-red',
    cover: true
  }];


  return (
    <section id="products" className="relative bg-wedar-bone py-24 lg:py-32">
      <div className="max-w-[1440px] mx-auto px-6 lg:px-10">
        <div className="flex flex-wrap items-end justify-between gap-6 mb-16">
          <div className="reveal max-w-2xl">
            <SectionLabel>運動商品線</SectionLabel>
            <h2 className="mt-6 font-black-display text-[clamp(40px,5.6vw,88px)] leading-[0.92] text-wedar-primary tracking-hyper">
              一整條訓練日補給
            </h2>
          </div>
          <p className="reveal max-w-sm text-[15px] text-wedar-primary/65 leading-relaxed">
            練前、練中、練後，會員真正需要的補給，不是一堆花俏口味，是配方對得起訓練強度。
          </p>
        </div>

        <div className="grid lg:grid-cols-3 gap-5 reveal">
          {products.map((p, i) =>
          <article key={i} className={`${p.color} ${p.text} rounded-[28px] overflow-hidden flex flex-col min-h-[620px] relative group`}>
              <div className="relative h-[300px] overflow-hidden">
                <img
                src={p.image}
                alt={p.name}
                className={`absolute inset-0 w-full h-full ${p.cover ? 'object-cover' : 'object-contain p-8'} transition-transform duration-700 group-hover:scale-105`} />
              
                <div className="absolute top-5 left-5">
                  <span className={`text-[10px] font-black-display tracking-[0.3em] ${p.accent}`}>{p.tag}</span>
                </div>
              </div>
              <div className="p-8 flex-1 flex flex-col">
                <h3 className="font-black-display text-3xl tracking-ultra leading-tight">{p.name}</h3>
                <div className={`mt-2 text-xs font-bold tracking-wide opacity-70`}>{p.spec}</div>
                <p className="mt-4 text-[14px] leading-[1.8] opacity-75 whitespace-pre-line">{p.copy}</p>

                <div className="mt-auto pt-6">
                  <div className={`text-[10px] font-bold tracking-[0.25em] uppercase mb-3 opacity-60`}>
</div>
                  <div className="flex flex-wrap gap-2">
                    {p.flavors.map((f, j) => <span key={j} className={`text-[11px] font-bold px-3 py-1 rounded-full border ${p.text === 'text-wedar-bone' ? 'border-white/20' : 'border-white/25'}`}>{f}</span>
                  )}
                  </div>
                </div>
              </div>
            </article>
          )}
        </div>

        {/* bottom copy strip */}
        <div className="mt-10 bg-white rounded-2xl p-6 flex flex-wrap items-center justify-between gap-4 border border-wedar-primary/10 reveal">
          <div className="flex items-center gap-4">
            <div className="h-10 w-10 rounded-full bg-wedar-lime flex items-center justify-center text-wedar-primary">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 2v20M2 12h20" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" /></svg>
            </div>
            <div>
              <div className="font-black text-wedar-primary">全產品線皆可混搭進貨</div>
              <div className="text-xs text-wedar-primary/60 mt-1">試飲組包含蛋白飲 20 入，申請後由專員依你的場館屬性配貨</div>
            </div>
          </div>
          <BtnGhost href="#apply">申請試飲組</BtnGhost>
        </div>
      </div>
    </section>);

};

Object.assign(window, { Products });