function ProductDetail() {
  return (
    <React.Fragment>
      <div className="pd-gallery bg-rice">
        <span className="pos">1 / 5</span>
      </div>
      <div className="pd-block">
        <div className="pd-price">
          <span className="now">¥89</span>
          <span className="iso">CNY</span>
          <span className="was">¥128</span>
        </div>
        <div className="pd-title">Khao Hom Thai 茉莉香米 5kg · 2026年新米 · 顶级</div>
        <div className="pd-tags">
          <span className="tag">直播限定</span>
          <span className="tag">-30%</span>
          <span className="tag">急速发货</span>
        </div>
      </div>

      <div className="trust-strip">
        <div className="item"><i className="ti ti-shield-check-filled"></i><span>正品保证</span></div>
        <div className="item"><i className="ti ti-truck-delivery"></i><span>急速发货</span></div>
        <div className="item"><i className="ti ti-arrow-back-up"></i><span>退货无忧</span></div>
        <div className="item"><i className="ti ti-headset"></i><span>24小时客服</span></div>
      </div>

      <div className="pd-block" style={{paddingBottom: 0}}>
        <div className="pd-endorse">
          <div className="pic bg-rice">李</div>
          <div className="text">
            <div className="name">李伟 · Li Wei · 顶级 KOL</div>
            <div className="quote">「2026 年新米，口感清香软糯，搭配普通菜也好吃」</div>
          </div>
          <div className="replay">回放 ›</div>
        </div>
      </div>

      <div className="pd-block">
        <div style={{fontFamily:"var(--font-sans)", fontSize:13, fontWeight:500, marginBottom: 8}}>商品规格</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 8}}>
          {[
            { k: "产地", v: "泰国 · 北榄府" },
            { k: "净含量", v: "5 kg" },
            { k: "保质期", v: "12 个月" },
            { k: "等级", v: "顶级" },
            { k: "品牌", v: "Khao Hom Thai" },
            { k: "类型", v: "茉莉香米" },
          ].map((s, i) => (
            <div key={i}>
              <div style={{fontFamily:"var(--font-sans)", fontSize:11, color:"var(--on-surface-variant)"}}>{s.k}</div>
              <div style={{fontFamily:"var(--font-sans)", fontSize:12, color:"var(--on-surface)", marginTop:2}}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="cart-foot" style={{position:"sticky", bottom:0}}>
        <div style={{display:"flex", flexDirection:"column", alignItems:"center", gap:2, padding:"0 8px"}}>
          <i className="ti ti-headset" style={{fontSize:20, color:"var(--on-surface-variant)"}}></i>
          <span style={{fontFamily:"var(--font-sans)", fontSize:10, color:"var(--on-surface-variant)"}}>客服</span>
        </div>
        <div style={{display:"flex", flexDirection:"column", alignItems:"center", gap:2, padding:"0 8px"}}>
          <i className="ti ti-shopping-cart" style={{fontSize:20, color:"var(--on-surface-variant)"}}></i>
          <span style={{fontFamily:"var(--font-sans)", fontSize:10, color:"var(--on-surface-variant)"}}>购物车</span>
        </div>
        <button style={{flex:1, marginLeft:8, height:44, borderRadius:9999, background:"var(--surface-container)", color:"var(--on-surface)", border:"none", fontFamily:"var(--font-sans)", fontSize:14, fontWeight:500}}>加入购物车</button>
        <button style={{flex:1, height:44}}>立即购买</button>
      </div>
    </React.Fragment>
  );
}

window.ProductDetail = ProductDetail;