// Slide-in cart drawer
const CartDrawer = ({ open, onClose, items, onRemove }) => {
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  return (
    <React.Fragment>
      <div onClick={onClose} style={{
        position: 'fixed', inset: 0, background: 'rgba(58,36,24,.45)',
        opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
        transition: 'opacity .25s ease', zIndex: 100,
      }}/>
      <aside style={{
        position: 'fixed', right: 0, top: 0, bottom: 0, width: 'min(420px, 92vw)',
        background: 'var(--cream-50)', zIndex: 101,
        transform: open ? 'translateX(0)' : 'translateX(105%)',
        transition: 'transform .28s cubic-bezier(.22,.61,.36,1)',
        display: 'flex', flexDirection: 'column',
        boxShadow: '-20px 0 60px rgba(58,36,24,.18)',
      }}>
        <div style={{ padding: '22px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--brown-100)' }}>
          <h3 className="serif" style={{ margin: 0, fontSize: 24, fontWeight: 500 }}>Your Cart</h3>
          <button onClick={onClose} aria-label="close cart" style={{ padding: 6 }}>
            <Icon name="x" size={22}/>
          </button>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: '18px 24px' }}>
          {items.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--brown-600)' }}>
              <CookieMark size={80}/>
              <p style={{ marginTop: 16, fontSize: 15 }}>Your cart is empty. Yet.</p>
            </div>
          ) : items.map((it, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '64px 1fr auto', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--brown-100)', alignItems: 'center' }}>
              <div style={{ width: 64, height: 64, borderRadius: 12, background: 'var(--sky-100)', display: 'grid', placeItems: 'center' }}>
                <CookieMark size={44}/>
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--brown-900)' }}>{it.name}</div>
                <div style={{ fontSize: 12, color: 'var(--brown-600)', marginTop: 2 }}>Qty {it.qty} · ${it.price}</div>
                <button onClick={() => onRemove(i)} style={{ fontSize: 12, color: 'var(--brown-600)', textDecoration: 'underline', marginTop: 4 }}>Remove</button>
              </div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>${(it.price * it.qty).toFixed(2)}</div>
            </div>
          ))}

          {items.length > 0 && (
            <div style={{
              marginTop: 20, padding: 16, borderRadius: 14,
              background: 'var(--peach-50)', border: '1px dashed var(--brown-300)',
            }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--brown-800)', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="sparkle" size={14}/> Subscribe & save
              </div>
              <div style={{ fontSize: 13, color: 'var(--brown-700)', lineHeight: 1.5 }}>
                Make this a monthly delivery and save 15%. Skip or cancel anytime.
              </div>
              <button className="btn btn-sm btn-outline" style={{ marginTop: 10 }}>Make it a subscription</button>
            </div>
          )}
        </div>

        {items.length > 0 && (
          <div style={{ padding: 20, borderTop: '1px solid var(--brown-100)', background: '#fff' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 15, fontWeight: 600, marginBottom: 12 }}>
              <span>Subtotal</span>
              <span>${subtotal.toFixed(2)}</span>
            </div>
            <button className="btn btn-primary btn-lg" style={{ width: '100%' }}>
              Checkout <Icon name="chevron-right" size={14} strokeWidth={2.2}/>
            </button>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
};

Object.assign(window, { CartDrawer });