// Cart.jsx — slide-in `tail -f cart.log`
const Cart = ({ open, items, onClose, onRemove, onCheckout }) => {
  if (!open) return null;
  const total = items.reduce((s, i) => s + i.p.price * i.qty, 0);
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', zIndex: 80 }} onClick={onClose}>
      <aside onClick={(e) => e.stopPropagation()} style={{
        position: 'absolute', top: 0, right: 0, height: '100%', width: 460, background: '#0A0A0A',
        borderLeft: '1px solid #00FF41', boxShadow: '0 0 32px rgba(0,255,65,0.15)',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: '#00FF41', letterSpacing: '0.2em' }}>$ tail -f /var/log/cart.log</span>
          <button onClick={onClose} style={{ marginLeft: 'auto', background: 'transparent', border: '1px solid rgba(255,255,255,0.2)', color: '#B8B8B8', padding: '3px 8px', fontFamily: 'inherit', fontSize: 10, letterSpacing: '0.15em', cursor: 'pointer' }}>[ X ]</button>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
          {items.length === 0 ? (
            <div style={{ color: '#6E6E6E', fontSize: 12, lineHeight: 1.8 }}>
              <div>{'>'} cart empty.</div>
              <div>{'>'} no payload staged.</div>
              <div style={{ marginTop: 14, color: '#3A3A3A' }}>// drink responsibly. pwn responsibly.</div>
            </div>
          ) : items.map((it, idx) => (
            <div key={idx} style={{ paddingBottom: 12, marginBottom: 12, borderBottom: '1px dashed rgba(255,255,255,0.12)', display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <div style={{ width: 28, height: 28, border: `1px solid ${it.p.accent}`, color: it.p.accent, display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 800 }}>{it.p.glyph}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, color: it.p.accent, fontWeight: 700, letterSpacing: '0.06em' }}>{it.p.name}</div>
                <div style={{ fontSize: 10, color: '#6E6E6E', letterSpacing: '0.15em', marginTop: 3 }}>× {String(it.qty).padStart(2,'0')} · {it.grind}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 13, color: '#FFF' }}>${it.p.price * it.qty}</div>
                <button onClick={() => onRemove(idx)} style={{ background: 'transparent', border: 'none', color: '#FF3344', fontFamily: 'inherit', fontSize: 9, letterSpacing: '0.15em', cursor: 'pointer', marginTop: 4 }}>[ rm ]</button>
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', padding: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, letterSpacing: '0.18em', color: '#6E6E6E', marginBottom: 6 }}><span>SUBTOTAL</span><span style={{ color: '#FFF' }}>${total}</span></div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, letterSpacing: '0.18em', color: '#6E6E6E', marginBottom: 12 }}><span>SHIPPING</span><span style={{ color: '#FFF' }}>$5</span></div>
          <button disabled={items.length === 0} onClick={onCheckout} style={{
            width: '100%', background: items.length ? '#00FF41' : 'transparent', color: items.length ? '#000' : '#3A3A3A',
            border: `1px solid ${items.length ? '#00FF41' : '#3A3A3A'}`, padding: '14px', fontFamily: 'inherit',
            fontWeight: 800, letterSpacing: '0.2em', fontSize: 12, cursor: items.length ? 'pointer' : 'not-allowed', borderRadius: 2,
          }}>
            {'>'} ./checkout — TOTAL ${total + (items.length ? 5 : 0)}
          </button>
        </div>
      </aside>
    </div>
  );
};

window.Cart = Cart;