function ProductDetail({ p, t, lang, onAdd, onBack, onPick, allProducts }) {
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  const dispFamily = lang==="zh"?"var(--font-cn-display)":"var(--font-display)";
  const [size,setSize] = React.useState(p.sizes[0].id);
  const [qty,setQty] = React.useState(1);
  // Per-product wrap & ribbon options; products without a brief entry get "—" only.
  const wrapMap = (typeof window !== "undefined" && window.WRAP_RIBBON_BY_CODE) || {};
  const wrapEntry = wrapMap[p.code];
  const variants = wrapEntry ? (lang==="zh" ? wrapEntry.zh : wrapEntry.en) : ["—"];
  const [variant,setVariant] = React.useState(variants[0]);
  React.useEffect(()=>{ setVariant(variants[0]); }, [p.code, lang]);
  const [note,setNote] = React.useState("");
  const [activePh,setActivePh] = React.useState(0);
  const photos = [p.photo, ...(p.alts||[])];
  const sizeObj = p.sizes.find(s=>s.id===size);
  const price = (p.price + sizeObj.delta) * qty;

  const related = allProducts.filter(x=>x.id!==p.id).slice(0,4);

  return (
    <section style={{ background:"var(--bg)" }}>
      <div style={{ maxWidth:1280, margin:"0 auto", padding:"24px 32px 80px" }}>
        <div style={{ fontFamily, fontSize:11, fontWeight:500, letterSpacing:"0.22em", color:"var(--pp-ink-mute)", textTransform: lang==="zh"?"none":"uppercase", marginBottom:24, display:"flex", alignItems:"center", gap:8, cursor:"pointer" }} onClick={onBack}>
          <ICN.chevL size={14}/> {t.pdp_breadcrumb} / <span style={{color:"var(--pp-ink)"}}>{lang==="zh"?p.name_zh:p.name_en} {p.code}</span>
        </div>

        <div style={{ display:"grid", gridTemplateColumns:"1.15fr 1fr", gap:64, alignItems:"flex-start" }}>
          <div>
            <div key={activePh} style={{ aspectRatio:"5/6", backgroundImage:`url(./assets/photos/${photos[activePh]})`, backgroundSize:"cover", backgroundPosition:"center", boxShadow:"var(--shadow-3)", animation:"pp-fade-in 420ms ease-out" }}/>
            {photos.length>1 && (
              <div style={{ display:"flex", gap:10, marginTop:12 }}>
                {photos.map((ph,i)=>(
                  <button key={i} onClick={()=>setActivePh(i)} style={{
                    width:78, height:96, padding:0, border: activePh===i?"2px solid var(--pp-pink-deep)":"1px solid var(--hairline)",
                    background:`url(./assets/photos/${ph}) center/cover`, borderRadius:0, cursor:"pointer",
                    transition:"transform 200ms ease",
                  }} onMouseEnter={e=>e.currentTarget.style.transform="translateY(-2px)"} onMouseLeave={e=>e.currentTarget.style.transform=""}/>
                ))}
              </div>
            )}
          </div>

          <div>
            <div style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.32em", color:"var(--pp-pink-deep)", textTransform: lang==="zh"?"none":"uppercase" }}>{p.coll}</div>
            <h1 style={{ fontFamily: dispFamily, fontWeight:500, fontSize:52, lineHeight:1.04, margin:"10px 0 6px", letterSpacing: lang==="zh"?"0.02em":"-0.005em" }}>
              {lang==="zh"?p.name_zh:p.name_en} <span style={{ fontFamily:"var(--font-sans)", fontSize:24, color:"var(--pp-ink-faint)", fontWeight:500, letterSpacing:"0.04em" }}>{p.code}</span>
            </h1>
            <div style={{ display:"flex", alignItems:"baseline", gap:14, marginTop:8 }}>
              {p.isSoldOut ? (
                <span style={{ fontFamily, fontSize:12, fontWeight:600, letterSpacing:"0.18em", color:"var(--pp-ink-faint)", display:"inline-flex", alignItems:"center", gap:6 }}>
                  <ICN.x size={14}/> {t.sold_out}
                </span>
              ) : p.isCustom ? (
                <span style={{ fontFamily, fontSize:12, fontWeight:600, letterSpacing:"0.18em", color:"var(--pp-pink-deep)", display:"inline-flex", alignItems:"center", gap:6 }}>
                  <ICN.flower size={14}/> {t.custom_label}
                </span>
              ) : (
                <>
                  <span style={{ fontFamily: dispFamily, fontWeight:500, fontSize:34, color:"var(--pp-pink-deep)", fontVariantNumeric:"tabular-nums" }}>S${p.price + sizeObj.delta}.00</span>
                  <span style={{ fontFamily, fontSize:12, fontWeight:600, letterSpacing:"0.18em", color:"var(--pp-sage-deep)", display:"inline-flex", alignItems:"center", gap:6 }}>
                    <ICN.check size={14}/> {t.pdp_in_stock}
                  </span>
                </>
              )}
            </div>

            <div style={{ height:1, background:"var(--hairline)", margin:"24px 0" }}/>

            {/* Sold-out / Custom message */}
            {p.isSoldOut && (
              <div style={{ marginBottom:18, padding:"14px 16px", background:"var(--pp-paper-soft)", border:"1px dashed var(--pp-ink-faint)" }}>
                <p style={{ fontFamily:"var(--font-serif)", fontSize:14, color:"var(--pp-ink-soft)", lineHeight:1.6, margin:0 }}>{t.pdp_sold_out_desc}</p>
              </div>
            )}

            {/* Size (hidden for custom + sold-out) */}
            {!p.isCustom && !p.isSoldOut && (
            <div>
              <div style={labelStyle(fontFamily, lang)}>🌻 {t.pdp_size}</div>
              <div style={{ display:"flex", gap:10, marginTop:8 }}>
                {p.sizes.map(s=>(
                  <button key={s.id} onClick={()=> !s.disabled && setSize(s.id)} disabled={!!s.disabled} style={{
                    flex:1, padding:"14px 14px", borderRadius:8, textAlign:"left", cursor: s.disabled?"not-allowed":"pointer", fontFamily,
                    background: s.disabled?"transparent":(size===s.id?"var(--pp-blush-tint)":"transparent"),
                    border: s.disabled?"1px dashed var(--pp-ink-faint)":(size===s.id?"1.5px solid var(--pp-pink-deep)":"1px solid var(--hairline)"),
                    color: s.disabled?"var(--pp-ink-faint)":"var(--pp-ink)",
                    opacity: s.disabled?0.5:1,
                  }}>
                    <div style={{ fontWeight:600, fontSize:14 }}>{lang==="zh"?s.label_zh:s.label_en}{!s.disabled && <> <span style={{opacity:0.5,fontWeight:400}}>({lang==="zh"?s.stems_zh:s.stems_en})</span></>}</div>
                    <div style={{ fontSize:12, color: s.disabled?"var(--pp-ink-faint)":"var(--pp-ink-soft)", marginTop:2 }}>{s.disabled?(lang==="zh"?"暫不販售":"Unavailable"):(s.delta>0?`+S$${s.delta}`:lang==="zh"?"基础价":"Base price")}</div>
                  </button>
                ))}
              </div>
            </div>
            )}

            {/* Variant / Quantity / Gift card (hidden for custom + sold-out) */}
            {!p.isCustom && !p.isSoldOut && (
              <>
                <div style={{ marginTop:20 }}>
                  <div style={labelStyle(fontFamily, lang)}>🎀 {t.pdp_variant}</div>
                  <select value={variant} onChange={e=>setVariant(e.target.value)} style={{
                    marginTop:8, width:"100%", padding:"12px 14px", borderRadius:8,
                    border:"1px solid var(--hairline)", background:"var(--bg-card)",
                    fontFamily, fontSize:14, color:"var(--pp-ink)", cursor:"pointer", outline:"none",
                  }}>
                    {variants.map(v=> <option key={v}>{v}</option>)}
                  </select>
                </div>

                <div style={{ marginTop:20 }}>
                  <div style={labelStyle(fontFamily, lang)}>{t.pdp_qty}</div>
                  <div style={{ display:"flex", alignItems:"center", gap:8, marginTop:8 }}>
                    <button onClick={()=>setQty(Math.max(1,qty-1))} style={qtyBtn}><ICN.minus size={14}/></button>
                    <div style={{ minWidth:48, textAlign:"center", fontFamily, fontSize:16, fontWeight:600 }}>{qty}</div>
                    <button onClick={()=>setQty(qty+1)} style={qtyBtn}><ICN.plus size={14}/></button>
                  </div>
                </div>

                <div style={{ marginTop:24 }}>
                  <div style={labelStyle(fontFamily, lang)}>🎁 {t.pdp_card_t}</div>
                  <p style={{ fontFamily:"var(--font-serif)", fontSize:13, color:"var(--pp-ink-mute)", marginTop:4, marginBottom:8 }}>{t.pdp_card_p}</p>
                  <textarea value={note} onChange={e=>setNote(e.target.value.slice(0,240))} rows={3} placeholder={lang==="zh"?"为最重要的人写一段话…（最多 240 字）":"Write a note for the recipient… (max 240 chars)"} style={{
                    width:"100%", fontFamily:dispFamily, fontStyle:"italic", fontSize:18, color:"var(--pp-pink-deep)",
                    background:"var(--pp-blush-tint)", border:"1px solid var(--pp-blush)", borderRadius:8, padding:"14px 16px", outline:"none", resize:"none", lineHeight:1.5,
                  }}/>
                  <div style={{ textAlign:"right", fontFamily, fontSize:11, color:"var(--pp-ink-faint)", marginTop:4 }}>{note.length}/240</div>
                </div>
              </>
            )}

            {/* CTA — three variants: normal add-to-cart, sold-out (disabled), customisation (Telegram). */}
            {p.isSoldOut ? (
              <button disabled style={{
                marginTop:18, width:"100%", fontFamily, fontSize:13, fontWeight:700, letterSpacing:"0.22em", textTransform: lang==="zh"?"none":"uppercase",
                padding:"18px 24px", borderRadius:0, border:0, background:"var(--pp-ink-faint)", color:"#fff",
                cursor:"not-allowed", display:"inline-flex", alignItems:"center", justifyContent:"center", gap:10,
              }}>{t.not_available}</button>
            ) : p.isCustom ? (
              <a href="https://t.me/papapassion" target="_blank" rel="noopener noreferrer" style={{
                marginTop:18, width:"100%", boxSizing:"border-box", fontFamily, fontSize:13, fontWeight:700, letterSpacing:"0.22em", textTransform: lang==="zh"?"none":"uppercase",
                padding:"18px 24px", borderRadius:0, border:0, background:"var(--pp-pink-deep)", color:"#fff", textDecoration:"none",
                cursor:"pointer", display:"inline-flex", alignItems:"center", justifyContent:"center", gap:10,
              }}>{t.custom_cta} <ICN.arrowR size={14}/></a>
            ) : (
              <button onClick={()=>onAdd(p,{size:sizeObj,qty,variant,note,unitPrice:p.price+sizeObj.delta})} style={{
                marginTop:18, width:"100%", fontFamily, fontSize:13, fontWeight:700, letterSpacing:"0.22em", textTransform: lang==="zh"?"none":"uppercase",
                padding:"18px 24px", borderRadius:0, border:0, background:"var(--pp-pink-deep)", color:"#fff",
                cursor:"pointer", display:"inline-flex", alignItems:"center", justifyContent:"center", gap:10,
                transition:"background 200ms ease, transform 200ms ease",
              }} onMouseEnter={e=>{e.currentTarget.style.background="var(--pp-ink)";}} onMouseLeave={e=>{e.currentTarget.style.background="var(--pp-pink-deep)";}}>{t.pdp_add} · S${price}.00 <ICN.arrowR size={14}/></button>
            )}

            {/* Delivery */}
            <div style={{ marginTop:24, padding:"16px 18px", border:"1px solid var(--hairline)", borderRadius:10, background:"var(--bg-card)" }}>
              <div style={{ fontFamily, fontSize:11, fontWeight:700, letterSpacing:"0.22em", color:"var(--pp-ink)", marginBottom:8, display:"inline-flex", alignItems:"center", gap:6 }}>
                <ICN.truck size={14}/> {t.pdp_delivery}
              </div>
              <div style={{ fontFamily:"var(--font-serif)", fontSize:14, color:"var(--pp-ink-soft)", lineHeight:1.7 }}>
                ✓ {t.pdp_pickup}<br/>✓ {t.pdp_delivery_fee}
              </div>
            </div>

            {/* Description */}
            <div style={{ marginTop:24 }}>
              <div style={{ fontFamily, fontSize:11, fontWeight:700, letterSpacing:"0.22em", color:"var(--pp-ink)", marginBottom:8 }}>📄 {t.pdp_desc_title}</div>
              <p style={{ fontFamily:"var(--font-serif)", fontSize:15, color:"var(--pp-ink-soft)", lineHeight:1.7, margin:0 }}>
                {lang==="zh"
                  ? `${p.name_zh}${p.code} —— 由花艺师在 Passion's Petals 工作室手工扎制，每一束都搭配${p.coll}系列的当季花材 ✿`
                  : `The ${p.name_en} ${p.code} — hand-tied in our Passion's Petals studio with seasonal stems from our ${p.coll} edit ✿`}
              </p>
            </div>

            {/* Seasonal note */}
            <div style={{ marginTop:18, padding:"14px 16px", borderRadius:10, background:"var(--pp-paper-soft)", border:"1px dashed var(--pp-ink-faint)" }}>
              <div style={{ fontFamily, fontSize:11, fontWeight:700, letterSpacing:"0.18em", color:"var(--pp-terracotta-deep)", marginBottom:6 }}>⚠ {t.pdp_seasonal_t}</div>
              <p style={{ fontFamily:"var(--font-serif)", fontSize:13, color:"var(--pp-ink-soft)", lineHeight:1.6, margin:0 }}>{t.pdp_seasonal_d}</p>
            </div>
          </div>
        </div>

        {/* Related */}
        <div style={{ marginTop:80 }}>
          <div style={{ textAlign:"center", marginBottom:28, fontFamily, fontSize:11, fontWeight:700, letterSpacing:"0.32em", color:"var(--pp-pink-deep)" }}>{t.related}</div>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:18 }}>
            {related.map(r=> <ProductCard key={r.id} p={r} lang={lang} onPick={onPick}/>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function labelStyle(fontFamily, lang) {
  return { fontFamily, fontSize:11, fontWeight:700, letterSpacing:"0.22em", color:"var(--pp-ink)", textTransform: lang==="zh"?"none":"uppercase" };
}
const qtyBtn = { width:36, height:36, borderRadius:0, border:"1px solid var(--hairline)", background:"var(--bg-card)", display:"inline-flex", alignItems:"center", justifyContent:"center", cursor:"pointer", color:"var(--pp-ink)" };

window.ProductDetail = ProductDetail;