// CART — summary used in the product-detail right rail AND as a mobile drawer.
function CartSummary({ lines, onQty, onRemove, onCheckout, sticky = false }) {
  const { Button, QtyStepper, IconButton } = window.ShoyuzukeDesignSystem_1a4266;
  const Icon = window.Icon;
  const subtotal = lines.reduce((s, l) => s + l.product.price * l.qty, 0);
  const count = lines.reduce((s, l) => s + l.qty, 0);

  return (
    <div style={{
      background: 'rgba(28,23,20,0.52)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      border: '1px solid rgba(251,244,234,0.11)', borderRadius: 'var(--radius-xl)',
      padding: 'var(--space-5)', position: sticky ? 'sticky' : 'static', top: sticky ? 88 : 'auto',
      boxShadow: '0 2px 0 rgba(251,244,234,0.05) inset, 0 16px 48px rgba(0,0,0,0.55)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        <Icon name="ShoppingBag" size={18} style={{ color: 'var(--shoyu-orange)' }} />
        <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 17, color: 'var(--text-strong)', textTransform: 'uppercase' }}>Your cart</h3>
        <span className="t-meta" style={{ marginLeft: 'auto' }}>{count} item{count !== 1 ? 's' : ''}</span>
      </div>

      {lines.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '28px 8px', color: 'var(--text-faint)' }}>
          <span className="t-jp" style={{ fontSize: 26, display: 'block', marginBottom: 8 }}>空</span>
          <p style={{ fontSize: 14 }}>Your cart is empty.<br />Pick a flavour to begin.</p>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {lines.map((l) => (
            <div key={l.product.id} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <img src={l.product.image} alt="" style={{ width: 56, height: 56, borderRadius: 'var(--radius-sm)', objectFit: 'cover', flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 14, color: 'var(--text-strong)' }}>{l.product.name}</div>
                <div className="t-meta" style={{ fontSize: 12.5 }}>₱{l.product.price} · {l.product.size}</div>
                <div style={{ marginTop: 6 }}><QtyStepper size="sm" value={l.qty} onChange={(q) => onQty(l.product.id, q)} /></div>
              </div>
              <button onClick={() => onRemove(l.product.id)} aria-label="Remove" style={{ background: 'none', border: 'none', color: 'var(--text-faint)', cursor: 'pointer', padding: 4 }}><Icon name="X" size={16} /></button>
            </div>
          ))}
        </div>
      )}

      <div style={{ borderTop: '1px solid var(--border)', marginTop: 18, paddingTop: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span className="t-meta">Subtotal</span>
          <span className="t-price" style={{ fontSize: 26, color: 'var(--text-strong)' }}>₱{subtotal}</span>
        </div>
        <p className="t-meta" style={{ fontSize: 12.5, marginTop: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="Snowflake" size={14} style={{ color: 'var(--salmon-300)' }} /> Chilled delivery & pickup calculated at checkout.
        </p>
        <Button variant="primary" full size="lg" style={{ marginTop: 16 }} disabled={lines.length === 0} iconRight={<Icon name="ArrowRight" size={18} />} onClick={onCheckout}>Checkout</Button>
      </div>
    </div>
  );
}
window.CartSummary = CartSummary;

// Slide-over drawer wrapper for mobile / nav-cart.
function CartDrawer({ open, onClose, lines, onQty, onRemove, onCheckout }) {
  const Icon = window.Icon;
  const { IconButton } = window.ShoyuzukeDesignSystem_1a4266;
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(2px)', animation: 'sz-fade var(--dur-base) var(--ease-out)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'absolute', right: 0, top: 0, height: '100%', width: 'min(420px, 92vw)', overflowY: 'auto',
        background: 'rgba(13,11,9,0.82)', backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
        borderLeft: '1px solid rgba(251,244,234,0.12)', padding: 'var(--space-5)',
        animation: 'sz-slide var(--dur-slow) var(--ease-out)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 14 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 20, textTransform: 'uppercase', color: 'var(--text-strong)' }}>Cart</h3>
          <IconButton label="Close cart" variant="ghost" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="X" /></IconButton>
        </div>
        <CartSummary lines={lines} onQty={onQty} onRemove={onRemove} onCheckout={onCheckout} />
      </div>
      <style>{`@keyframes sz-slide{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}`}</style>
    </div>
  );
}
window.CartDrawer = CartDrawer;