function CartDrawer({ open, items, onClose, onChangeQty, onRemove, lang, t }) {
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  const dispFamily = lang==="zh"?"var(--font-cn-display)":"var(--font-display)";
  const subtotal = items.reduce((s,it)=>s + it.unitPrice * it.qty, 0);

  // Fulfillment state
  const [fulfillType, setFulfillType] = React.useState("delivery"); // "delivery" | "pickup"
  const [fulfillDate, setFulfillDate] = React.useState("");
  const [fulfillTime, setFulfillTime] = React.useState("");

  // Date bounds: tomorrow to +30 days
  const pad = n => String(n).padStart(2,"0");
  const fmtDate = d => `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
  const today = new Date();
  const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate()+1);
  const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()+30);
  const minDateStr = fmtDate(tomorrow);
  const maxDateStr = fmtDate(maxDate);

  const timeSlots = [
    { value:"10-14", label_en:"10:00 AM – 2:00 PM",  label_zh:"上午 10:00 – 下午 2:00" },
    { value:"14-18", label_en:"2:00 PM – 6:00 PM",   label_zh:"下午 2:00 – 下午 6:00" },
    { value:"18-22", label_en:"6:00 PM – 10:00 PM",  label_zh:"晚上 6:00 – 晚上 10:00" },
  ];

  // Delivery fee: pickup is free, delivery is 0 above S$188, otherwise S$20
  const delivery = subtotal>0
    ? (fulfillType==="pickup" ? 0 : (subtotal>=188 ? 0 : 20))
    : 0;

  const canCheckout = items.length>0 && fulfillDate && fulfillTime;
  const handleCheckout = () => {
    if(!canCheckout) return;
    const summary = {
      items: items.map(it=>({ code:it.product.code, name:it.product.name_en, size:it.size.label_en, variant:it.variant, qty:it.qty, unitPrice:it.unitPrice })),
      fulfillType, fulfillDate, fulfillTime, subtotal, delivery, total: subtotal+delivery,
    };
    console.log("[Checkout]", summary);
    alert(lang==="zh" ? "结账页即将上线 🌸 订单已记录，妹妹会通过 Telegram 与你确认。" : "Checkout page coming soon 🌸 Order logged — we'll confirm via Telegram.");
  };
  return (
    <>
      <div onClick={onClose} style={{ position:"fixed", inset:0, background:"rgba(42,31,24,0.45)", opacity:open?1:0, pointerEvents:open?"auto":"none", transition:"opacity 240ms", zIndex:50 }}/>
      <aside style={{ position:"fixed", top:0, right:0, height:"100vh", width:440, maxWidth:"94vw", background:"var(--bg-card)", boxShadow:"var(--shadow-4)", transform: open?"translateX(0)":"translateX(100%)", transition:"transform 420ms", zIndex:60, display:"flex", flexDirection:"column" }}>
        <header style={{ padding:"24px 28px", borderBottom:"1px solid var(--hairline)", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
          <div>
            <div style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.22em", color:"var(--pp-pink-deep)", textTransform: lang==="zh"?"none":"uppercase" }}>{lang==="zh"?"购物车":"YOUR CART"}</div>
            <div style={{ fontFamily: dispFamily, fontSize:24, fontWeight:500, marginTop:4 }}>
              {items.length===0 ? (lang==="zh"?"空空的":"Empty for now") : `${items.length} ${lang==="zh"?"束":"item"+(items.length>1?"s":"")}`}
            </div>
          </div>
          <button onClick={onClose} style={{ background:"transparent", border:0, cursor:"pointer" }}><ICN.x size={22}/></button>
        </header>

        <div style={{ flex:1, overflowY:"auto", padding:"4px 28px" }}>
          {items.map((it,i)=>(
            <div key={i} style={{ display:"grid", gridTemplateColumns:"72px 1fr auto", gap:14, padding:"18px 0", borderBottom:"1px solid var(--hairline)" }}>
              <div style={{ width:72, height:90, backgroundImage:`url(./assets/photos/${it.product.photo})`, backgroundSize:"cover", backgroundPosition:"center", borderRadius:0 }}/>
              <div>
                <div style={{ fontFamily, fontSize:10, fontWeight:600, letterSpacing:"0.22em", color:"var(--pp-pink-deep)", textTransform:"uppercase" }}>{it.product.coll}</div>
                <div style={{ fontFamily: dispFamily, fontSize:18, fontWeight:500, marginTop:2 }}>{lang==="zh"?it.product.name_zh:it.product.name_en} <span style={{color:"var(--pp-ink-faint)",fontFamily:"var(--font-sans)",fontSize:11}}>{it.product.code}</span></div>
                <div style={{ fontFamily, fontSize:12, color:"var(--pp-ink-mute)", marginTop:3 }}>{lang==="zh"?it.size.label_zh:it.size.label_en} · {it.variant}</div>
                {it.note && <div style={{ fontFamily:dispFamily, fontStyle:"italic", fontSize:13, color:"var(--pp-pink-deep)", marginTop:6, lineHeight:1.4 }}>"{it.note.slice(0,60)}{it.note.length>60?"…":""}"</div>}
                <div style={{ display:"flex", alignItems:"center", gap:8, marginTop:8 }}>
                  <button onClick={()=>onChangeQty(i, Math.max(1,it.qty-1))} style={miniBtn}><ICN.minus size={12}/></button>
                  <span style={{ fontFamily, fontSize:12, fontWeight:600, minWidth:18, textAlign:"center" }}>{it.qty}</span>
                  <button onClick={()=>onChangeQty(i, it.qty+1)} style={miniBtn}><ICN.plus size={12}/></button>
                  <button onClick={()=>onRemove(i)} style={{ marginLeft:"auto", background:"transparent", border:0, fontFamily, fontSize:11, color:"var(--pp-ink-mute)", borderBottom:"1px solid currentColor", cursor:"pointer", padding:0 }}>{lang==="zh"?"移除":"Remove"}</button>
                </div>
              </div>
              <div style={{ fontFamily: dispFamily, fontSize:18, fontWeight:500, color:"var(--pp-pink-deep)", fontVariantNumeric:"tabular-nums" }}>S${it.unitPrice * it.qty}</div>
            </div>
          ))}
          {items.length===0 && (
            <div style={{ textAlign:"center", padding:"60px 0", color:"var(--pp-ink-mute)" }}>
              <div style={{ fontFamily: dispFamily, fontStyle:"italic", fontSize:22 }}>{lang==="zh"?"挑一束送给某个人吧":"Pick something tender."}</div>
            </div>
          )}

          {items.length>0 && (
            <div style={{ padding:"22px 0 8px" }}>
              {/* Method */}
              <div style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.22em", color:"var(--pp-pink-deep)", textTransform: lang==="zh"?"none":"uppercase", marginBottom:10 }}>
                {lang==="zh"?"配送方式":"DELIVERY METHOD"}
              </div>
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginBottom:20 }}>
                {[
                  { v:"delivery", en:"Local Delivery", zh:"送货到家", icon:"truck" },
                  { v:"pickup",   en:"Self Pickup",    zh:"自取",     icon:"bag" },
                ].map(opt=>{
                  const active = fulfillType===opt.v;
                  const Icon = ICN[opt.icon];
                  return (
                    <button key={opt.v} onClick={()=>setFulfillType(opt.v)} style={{
                      fontFamily, fontSize:12, fontWeight:600, letterSpacing:"0.18em", textTransform: lang==="zh"?"none":"uppercase",
                      padding:"12px 8px", borderRadius:0, cursor:"pointer",
                      background: active?"var(--pp-pink-deep)":"transparent",
                      color: active?"#fff":"var(--pp-ink)",
                      border: active?"1px solid var(--pp-pink-deep)":"1px solid var(--hairline)",
                      transition:"all 160ms",
                      display:"inline-flex", alignItems:"center", justifyContent:"center", gap:8,
                    }}>
                      <Icon size={16}/>
                      <span>{lang==="zh"?opt.zh:opt.en}</span>
                    </button>
                  );
                })}
              </div>

              {/* Date */}
              <div style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.22em", color:"var(--pp-pink-deep)", textTransform: lang==="zh"?"none":"uppercase", marginBottom:4 }}>
                {lang==="zh"?"日期":"DATE"}
              </div>
              <div style={{ fontFamily, fontSize:12, color:"var(--pp-ink-mute)", marginBottom:10, fontStyle:"italic" }}>
                {lang==="zh"?"你想什么时候收到你的花":"When would you like to receive your flowers?"}
              </div>
              <div style={{ position:"relative", marginBottom:20 }}>
                <input
                  type="date"
                  lang={lang==="zh"?"zh-CN":"en-US"}
                  value={fulfillDate}
                  min={minDateStr}
                  max={maxDateStr}
                  onChange={e=>setFulfillDate(e.target.value)}
                  style={{
                    width:"100%", fontFamily, fontSize:14,
                    color:"transparent", caretColor:"transparent",
                    padding:"12px 14px", borderRadius:0,
                    border:"1px solid var(--hairline)", background:"var(--bg)",
                    boxSizing:"border-box",
                    appearance:"none", WebkitAppearance:"none",
                  }}
                />
                <div style={{
                  position:"absolute", left:14, top:"50%", transform:"translateY(-50%)",
                  fontFamily, fontSize:14, pointerEvents:"none",
                  color: fulfillDate ? "var(--pp-ink)" : "var(--pp-ink-faint)",
                }}>
                  {fulfillDate
                    ? (lang==="zh"
                        ? `${fulfillDate.slice(0,4)} 年 ${fulfillDate.slice(5,7)} 月 ${fulfillDate.slice(8,10)} 日`
                        : new Date(fulfillDate+"T00:00:00").toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"}))
                    : (lang==="zh" ? "年 / 月 / 日" : "YYYY / MM / DD")}
                </div>
              </div>

              {/* Time */}
              <div style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.22em", color:"var(--pp-pink-deep)", textTransform: lang==="zh"?"none":"uppercase", marginBottom:10 }}>
                {lang==="zh"?"时间":"TIME"}
              </div>
              <div style={{ display:"flex", flexDirection:"column", gap:8, marginBottom:fulfillType==="pickup"?14:4 }}>
                {timeSlots.map(slot=>{
                  const active = fulfillTime===slot.value;
                  return (
                    <button key={slot.value} onClick={()=>setFulfillTime(slot.value)} style={{
                      fontFamily, fontSize:13, fontWeight:500,
                      padding:"12px 14px", borderRadius:0, cursor:"pointer", textAlign:"left",
                      background: active?"var(--pp-pink-soft)":"transparent",
                      color: active?"var(--pp-ink)":"var(--pp-ink)",
                      border: active?"1px solid var(--pp-pink-soft)":"1px solid var(--hairline)",
                      transition:"all 160ms",
                    }}>{lang==="zh"?slot.label_zh:slot.label_en}</button>
                  );
                })}
              </div>

              {/* Pickup note */}
              {fulfillType==="pickup" && (
                <div style={{ fontFamily, fontSize:12, fontStyle:"italic", color:"var(--pp-ink-mute)", padding:"10px 14px", border:"1px dashed var(--hairline)", lineHeight:1.5 }}>
                  {lang==="zh"
                    ? "自取地址将于下单后通过 Telegram 与你确认 🌸"
                    : "Pickup address will be confirmed via Telegram after checkout 🌸"}
                </div>
              )}
            </div>
          )}
        </div>

        <footer style={{ padding:"20px 28px 24px", borderTop:"1px solid var(--hairline)", background:"var(--bg)" }}>
          <div style={{ display:"flex", justifyContent:"space-between", fontFamily, fontSize:13, color:"var(--pp-ink-soft)", marginBottom:6 }}>
            <span>{lang==="zh"?"小计":"Subtotal"}</span><span style={{fontVariantNumeric:"tabular-nums"}}>S${subtotal}.00</span>
          </div>
          <div style={{ display:"flex", justifyContent:"space-between", fontFamily, fontSize:13, color:"var(--pp-ink-soft)", marginBottom:14 }}>
            <span>{lang==="zh"?"配送":"Delivery"}</span><span style={{fontVariantNumeric:"tabular-nums"}}>{subtotal===0?"—":delivery===0?(lang==="zh"?"免运":"Free"):`S$${delivery}.00`}</span>
          </div>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", paddingTop:14, borderTop:"1px solid var(--hairline)", marginBottom:18 }}>
            <span style={{ fontFamily: dispFamily, fontSize:20, fontWeight:500 }}>{lang==="zh"?"合计":"Total"}</span>
            <span style={{ fontFamily: dispFamily, fontSize:26, fontWeight:500, color:"var(--pp-pink-deep)", fontVariantNumeric:"tabular-nums" }}>S${subtotal+delivery}.00</span>
          </div>
          <button onClick={handleCheckout} disabled={!canCheckout} style={{
            width:"100%", fontFamily, fontSize:13, fontWeight:700, letterSpacing:"0.22em", textTransform: lang==="zh"?"none":"uppercase",
            padding:"16px 22px", borderRadius:0, border:0,
            background: !canCheckout?"var(--pp-ink-faint)":"var(--pp-pink-deep)", color:"#fff",
            cursor: !canCheckout?"not-allowed":"pointer",
          }}>{lang==="zh"?"前往结算":"Checkout"} →</button>
          {items.length>0 && !canCheckout && (
            <div style={{ fontFamily, fontSize:11, color:"var(--pp-ink-mute)", textAlign:"center", marginTop:10, letterSpacing:"0.06em" }}>
              {lang==="zh"?"请先选择日期与时间":"Please select a date and time first"}
            </div>
          )}
        </footer>
      </aside>
    </>
  );
}
const miniBtn = { width:24, height:24, borderRadius:0, border:"1px solid var(--hairline)", background:"var(--bg)", display:"inline-flex", alignItems:"center", justifyContent:"center", cursor:"pointer", color:"var(--pp-ink)" };
window.CartDrawer = CartDrawer;