window.CartDrawer = function CartDrawer({ open, cart, price, onClose, onUpdateQty, onRemove, onCheckout }) {
  const subtotal = cart.reduce((s,i)=>s+i.qty*price, 0);
  const shipping = subtotal >= SHIPPING_THRESHOLD ? 0 : SHIPPING_COST;
  const total = subtotal + shipping;
  const totalQty = cart.reduce((s,i)=>s+i.qty, 0);

  return (
    <>
      <div className={`cart-overlay ${open?'open':''}`} onClick={onClose}></div>
      <div className={`cart-drawer ${open?'open':''}`}>
        <div className="cart-drawer-header">
          <div className="cart-drawer-title">
            🛒 Your Cart
            {totalQty>0 && <div className="cart-drawer-count">{totalQty}</div>}
          </div>
          <button className="cart-drawer-close" onClick={onClose}>✕</button>
        </div>

        <div className="cart-drawer-body">
          {cart.length===0 ? (
            <div className="cart-empty">
              <div className="cart-empty-icon">🌿</div>
              <div className="cart-empty-text">Your cart is empty</div>
              <div className="cart-empty-sub">Add some organic goodness to get started!</div>
            </div>
          ) : (
            cart.map((item, idx) => (
              <div key={idx} className="cart-item">
                <div className="cart-item-img">
                  <img src={PRODUCT.img} alt={PRODUCT.name}/>
                </div>
                <div className="cart-item-details">
                  <div className="cart-item-name">{PRODUCT.name}</div>
                  <div className="cart-item-meta">{PRODUCT.meta}</div>
                  <div className="cart-item-qty-row">
                    <div className="cart-item-qty">
                      <button className="cart-item-qty-btn" onClick={()=>onUpdateQty(idx, item.qty-1)}>−</button>
                      <div className="cart-item-qty-num">{item.qty}</div>
                      <button className="cart-item-qty-btn" onClick={()=>onUpdateQty(idx, item.qty+1)}>+</button>
                    </div>
                    <div className="cart-item-price">₹{(item.qty*price).toFixed(0)}</div>
                  </div>
                </div>
                <button className="cart-item-remove" onClick={()=>onRemove(idx)} title="Remove">×</button>
              </div>
            ))
          )}
        </div>

        {cart.length>0 && (
          <div className="cart-drawer-footer">
            <div className="cart-subtotal-row">
              <div className="cart-subtotal-label">Subtotal</div>
              <div className="cart-subtotal-val">₹{subtotal.toFixed(0)}</div>
            </div>
            <div className="cart-shipping-note">
              {shipping===0
                ? '✅ Free shipping applied!'
                : <>Add <span>₹{(SHIPPING_THRESHOLD-subtotal).toFixed(0)}</span> more for free shipping</>
              }
            </div>
            <button className="btn-razorpay" onClick={()=>onCheckout({subtotal,shipping,total})}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
              Proceed to Pay — ₹{total.toFixed(0)}
              <span className="razorpay-logo">via Razorpay</span>
            </button>
            <button className="btn-continue-shop" onClick={onClose}>← Continue Shopping</button>
            <div className="cart-secure-row">
              <div className="cart-secure-item">🔒 SSL Secure</div>
              <div className="cart-secure-item">🏦 UPI / Cards / NetBanking</div>
              <div className="cart-secure-item">↩ 30-day returns</div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};