function CartDrawer({ open, items, close, removeItem, navigate }) {
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  return (
    <>
      <div onClick={close} style={{
        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)',
        opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
        transition: 'opacity 180ms', zIndex: 50,
      }} />
      <aside style={{
        position: 'fixed', top: 0, right: 0, bottom: 0,
        width: 440, background: 'var(--wht)', zIndex: 60,
        transform: open ? 'translateX(0)' : 'translateX(110%)',
        transition: 'transform 220ms cubic-bezier(0.2,0.8,0.2,1)',
        display: 'flex', flexDirection: 'column',
        borderLeft: '1px solid var(--blk)',
      }}>
        <div style={{
          padding: '20px 24px', borderBottom: '1px solid var(--blk)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 24,
            textTransform: 'uppercase', letterSpacing: '-0.01em',
          }}>Your Cart · {items.length}</div>
          <button onClick={close} style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 700,
          }}>×</button>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 24px' }}>
          {items.length === 0 && (
            <div style={{ padding: '64px 0', textAlign: 'center', color: 'var(--fg-3)' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--blk)', textTransform: 'uppercase' }}>Empty.</div>
              <div style={{ fontSize: 13, marginTop: 8 }}>Go grab something.</div>
            </div>
          )}
          {items.map((it, idx) => (
            <div key={idx} style={{
              display: 'grid', gridTemplateColumns: '72px 1fr auto', gap: 14,
              padding: '14px 0', borderBottom: '1px dashed var(--ink-200)',
              alignItems: 'center',
            }}>
              <div style={{ height: 72 }}>
                <ProductImage product={it} size="sm" />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, textTransform: 'uppercase', lineHeight: 1.1 }}>{it.name} — {it.color}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 2 }}>Size {it.size} · Qty {it.qty}</div>
                <button onClick={() => removeItem(idx)} style={{
                  marginTop: 4, background: 'none', border: 'none', padding: 0,
                  color: 'var(--red)', fontSize: 11, cursor: 'pointer',
                  letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 700,
                }}>Remove</button>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700 }}>${it.price * it.qty}</div>
            </div>
          ))}
        </div>

        <div style={{ padding: 24, borderTop: '1px solid var(--blk)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 6 }}>
            <span style={{ color: 'var(--fg-3)' }}>Subtotal</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700 }}>${subtotal}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 14 }}>
            <span style={{ color: 'var(--fg-3)' }}>Shipping</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700 }}>{subtotal >= 75 ? 'FREE' : '$6'}</span>
          </div>
          <button disabled={items.length === 0} style={{
            width: '100%', padding: 16, background: 'var(--blk)', color: 'var(--wht)',
            border: '1.5px solid var(--blk)', borderRadius: 4, cursor: items.length ? 'pointer' : 'not-allowed',
            fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            opacity: items.length === 0 ? 0.35 : 1,
          }}>Checkout · ${subtotal + (subtotal >= 75 || subtotal === 0 ? 0 : 6)}</button>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', textAlign: 'center', marginTop: 10, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            Free shipping over $75 · Made in DC
          </div>
        </div>
      </aside>
    </>
  );
}

window.CartDrawer = CartDrawer;