// RIFTR storefront — cart drawer + order confirmation modal.
(() => {
const { Button, IconButton, Label } = window.RIFTRDesignSystem_b64b32;

function CartDrawer({ open, cart, onClose, onCheckout, onQty }) {
  const RM = window.RIFTR_RM;
  const Ic = window.Ic;
  if (!open) return null;
  const total = cart.reduce((a, b) => a + b.price * b.qty, 0);
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 60, background: 'rgba(8,9,10,.55)', display: 'flex', justifyContent: 'flex-end', animation: 'fade .2s' }}>
      <aside onClick={(e) => e.stopPropagation()} style={{ width: 400, maxWidth: '90vw', height: '100%', background: 'var(--surface-card)', borderLeft: '1px solid var(--border-strong)', display: 'flex', flexDirection: 'column', animation: 'slidein .26s cubic-bezier(.16,1,.3,1)' }}>
        <div style={{ height: 3, background: 'var(--accent)' }}></div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 20px', borderBottom: '1px solid var(--border-hairline)' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, textTransform: 'uppercase', letterSpacing: '.03em' }}>Your cart</span>
          <IconButton ariaLabel="Close" onClick={onClose}><Ic n="x" /></IconButton>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: '8px 20px' }}>
          {cart.length === 0 && <p style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', fontSize: 13, marginTop: 30, textAlign: 'center' }}>Cart is empty.</p>}
          {cart.map((it) => (
            <div key={it.id} style={{ display: 'flex', gap: 12, padding: '16px 0', borderBottom: '1px solid var(--border-hairline)' }}>
              <div style={{ width: 56, height: 56, borderRadius: 4, overflow: 'hidden', background: 'var(--surface-inset)', flex: 'none', position: 'relative' }}>
                {it.img ? <img src={it.img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <window.Placeholder label="" />}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, textTransform: 'uppercase' }}>{it.name}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)', marginTop: 3 }}>{RM(it.price)} · ×{it.qty}</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <IconButton ariaLabel="Less" size={26} onClick={() => onQty(it.id, -1)}><Ic n="minus" s={13} /></IconButton>
                <IconButton ariaLabel="More" size={26} onClick={() => onQty(it.id, 1)}><Ic n="plus" s={13} /></IconButton>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: '18px 20px', borderTop: '1px solid var(--border-strong)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
            <Label>Subtotal</Label><span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 16 }}>{RM(total)}</span>
          </div>
          <Button variant="primary" notch style={{ width: '100%' }} disabled={cart.length === 0} onClick={onCheckout}>Checkout</Button>
        </div>
      </aside>
    </div>
  );
}

function Confirm({ open, onClose }) {
  const Ic = window.Ic;
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 80, background: 'rgba(8,9,10,.62)', backdropFilter: 'blur(2px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, animation: 'fade .2s' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: 'var(--surface-card)', width: 380, borderRadius: 'var(--radius-md)', overflow: 'hidden', border: '1px solid var(--border-strong)', boxShadow: 'var(--shadow-lg)', animation: 'pop .24s cubic-bezier(.34,1.4,.5,1)', textAlign: 'center' }}>
        <div style={{ height: 3, background: 'var(--accent)' }}></div>
        <div style={{ padding: '30px 28px 28px' }}>
          <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}><Ic n="check" s={24} /></div>
          <h3 style={{ fontFamily: 'var(--font-display)', margin: 0, fontSize: 19, fontWeight: 700, textTransform: 'uppercase' }}>Order placed</h3>
          <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6, marginTop: 10 }}>
            Small-batch means we print to order. Yours ships in 3–5 days — tracking lands in your inbox.
          </p>
          <Button variant="primary" style={{ width: '100%', marginTop: 18 }} onClick={onClose}>Keep shopping</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CartDrawer, Confirm });
})();