// Discover — consumer landing. Hero live + categories + KOL recommendations + product grid.

function Discover() {
  return (
    <React.Fragment>
      <div className="hero-live">
        <div style={{display:"flex", alignItems:"center", justifyContent:"space-between"}}>
          <span className="live-tag"><span className="dot"></span>正在直播</span>
          <span className="viewers">42.8万 观看</span>
        </div>
        <div className="info">
          <div className="kol-pic">李</div>
          <div className="text">
            <div className="title">泰国香米专场 · 限时直播</div>
            <div className="meta">李伟 · Khao Hom Thai · 还剩 1h 12m</div>
          </div>
        </div>
      </div>

      <div className="cat-strip">
        {[
          { ic: "ti-bowl-filled",     name: "粮油" },
          { ic: "ti-lipstick",        name: "美妆" },
          { ic: "ti-coffee",          name: "咖啡" },
          { ic: "ti-cookie",          name: "茶饮" },
          { ic: "ti-shirt-filled",    name: "服饰" },
          { ic: "ti-flower-filled",   name: "香薰" },
          { ic: "ti-pill",            name: "保健" },
          { ic: "ti-tag-filled",      name: "促销" },
        ].map(c => (
          <div key={c.name} className="cat">
            <div className="cat-ic"><i className={"ti " + c.ic}></i></div>
            <div className="cat-name">{c.name}</div>
          </div>
        ))}
      </div>

      <div className="sec-head">
        <h2>明星推荐</h2>
        <span className="more">查看全部 ›</span>
      </div>
      <div className="kol-rec">
        <div className="item">
          <div className="pic bg-rice"><div className="name">李伟推荐</div></div>
          <div className="body">
            <div className="title">泰国香米 5kg · 茉莉香</div>
            <div className="price">¥89<span style={{fontSize:11, color:"var(--on-surface-variant)", marginLeft:2}}> CNY</span></div>
          </div>
        </div>
        <div className="item">
          <div className="pic bg-rose"><div className="name">陈美推荐</div></div>
          <div className="body">
            <div className="title">Siam 唇釉 · 玫瑰色</div>
            <div className="price">¥168<span style={{fontSize:11, color:"var(--on-surface-variant)", marginLeft:2}}> CNY</span></div>
          </div>
        </div>
        <div className="item">
          <div className="pic bg-coffee"><div className="name">王晶推荐</div></div>
          <div className="body">
            <div className="title">清迈烘焙咖啡豆</div>
            <div className="price">¥128<span style={{fontSize:11, color:"var(--on-surface-variant)", marginLeft:2}}> CNY</span></div>
          </div>
        </div>
      </div>

      <div className="sec-head">
        <h2>为你推荐</h2>
        <span className="more">实时同步 ›</span>
      </div>
      <div className="grid">
        <div className="product">
          <div className="pic bg-rice"><span className="badge">直播限定</span></div>
          <div className="info">
            <div className="name">Khao Hom Thai 茉莉香米 5kg · 顶级</div>
            <div className="price">¥89<span className="ccy"> CNY</span></div>
            <div className="sold">已售 12,400 件</div>
          </div>
        </div>
        <div className="product">
          <div className="pic bg-rose"><span className="badge">-38%</span></div>
          <div className="info">
            <div className="name">Siam 唇釉新色 · 玫瑰</div>
            <div className="price">¥168<span className="ccy"> CNY</span></div>
            <div className="sold">已售 8,920 件</div>
          </div>
        </div>
        <div className="product">
          <div className="pic bg-cream"></div>
          <div className="info">
            <div className="name">Bangkok Beauty 修护面霜 50ml</div>
            <div className="price">¥248<span className="ccy"> CNY</span></div>
            <div className="sold">已售 4,840 件</div>
          </div>
        </div>
        <div className="product">
          <div className="pic bg-tea"><span className="badge">新品</span></div>
          <div className="info">
            <div className="name">Lanna 乌龙茶礼盒 · 兰娜系列</div>
            <div className="price">¥98<span className="ccy"> CNY</span></div>
            <div className="sold">已售 1,820 件</div>
          </div>
        </div>
        <div className="product">
          <div className="pic bg-coffee"></div>
          <div className="info">
            <div className="name">Riang Mai 清迈手冲咖啡豆 1kg</div>
            <div className="price">¥128<span className="ccy"> CNY</span></div>
            <div className="sold">已售 920 件</div>
          </div>
        </div>
        <div className="product">
          <div className="pic bg-silk"></div>
          <div className="info">
            <div className="name">Northern Silk 真丝围巾 · 经典款</div>
            <div className="price">¥348<span className="ccy"> CNY</span></div>
            <div className="sold">已售 460 件</div>
          </div>
        </div>
      </div>
      <div style={{height:8}}></div>
    </React.Fragment>
  );
}

window.Discover = Discover;