// MobileCart.jsx — full-screen cart overlay, slides from right
const MobileCart = ({ open, items, onClose, onUpdateQty, onClearAll, onCheckout }) => {
  if (!open) return null;

  const total = items.reduce((s, i) => s + i.p.price * i.qty, 0);
  const shipping = items.length > 0 ? 5 : 0;

  // Prevent background scroll when cart is open
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  return (
    <div
      style={{
        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)',
        zIndex: 90, fontFamily: "'JetBrains Mono', monospace",
        animation: 'mobileCartSlideIn 200ms ease-out',
      }}
      onClick={onClose}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: 'absolute', top: 0, right: 0, bottom: 0,
          width: '100%', maxWidth: 420, background: '#0A0A0A',
          display: 'flex', flexDirection: 'column',
          borderLeft: '1px solid #00FF41',
          boxShadow: '0 0 32px rgba(0,255,65,0.1)',
        }}
      >
        {/* HEADER */}
        <div style={{
          padding: '16px', display: 'flex', alignItems: 'center',
          borderBottom: '1px solid rgba(255,255,255,0.1)',
          minHeight: 56,
        }}>
          <div style={{ flex: 1 }}>
            <span style={{
              fontSize: 16, fontWeight: 800, color: '#FFF',
              letterSpacing: '0.04em',
            }}>
              ~/cart
            </span>
            <span style={{
              fontSize: 10, color: '#6E6E6E', letterSpacing: '0.18em',
              marginLeft: 10,
            }}>
              {items.length === 0 ? '// empty' : `// ${items.length} item${items.length !== 1 ? 's' : ''}`}
            </span>
          </div>
          {items.length > 0 && (
            <button
              onClick={onClearAll}
              style={{
                background: 'transparent', border: '1px solid #FF3344',
                color: '#FF3344', padding: '8px 12px', fontFamily: 'inherit',
                fontSize: 10, letterSpacing: '0.12em', cursor: 'pointer',
                minHeight: 44,
              }}
            >
              [rm -rf]
            </button>
          )}
          <button
            onClick={onClose}
            style={{
              marginLeft: items.length > 0 ? 8 : 0,
              background: 'transparent', border: '1px solid rgba(255,255,255,0.2)',
              color: '#B8B8B8', padding: '8px 14px', fontFamily: 'inherit',
              fontSize: 12, letterSpacing: '0.15em', cursor: 'pointer',
              minHeight: 44, minWidth: 44,
            }}
          >
            [x]
          </button>
        </div>

        {/* ITEMS */}
        <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
          {items.length === 0 ? (
            <div style={{
              padding: '48px 16px', textAlign: 'center',
              color: '#6E6E6E', fontSize: 12, lineHeight: 2,
            }}>
              <div style={{ fontSize: 14, color: '#3A3A3A', marginBottom: 8 }}>
                {'>'} _
              </div>
              <div>// cart empty.</div>
              <div>// nothing staged.</div>
              <div style={{ marginTop: 16, color: '#3A3A3A', fontSize: 10 }}>
                // drink responsibly. pwn responsibly.
              </div>
            </div>
          ) : (
            items.map((it, idx) => (
              <div
                key={idx}
                style={{
                  paddingBottom: 14, marginBottom: 14,
                  borderBottom: '1px dashed rgba(255,255,255,0.1)',
                  display: 'flex', alignItems: 'flex-start', gap: 12,
                }}
              >
                {/* GLYPH */}
                <div style={{
                  width: 32, height: 32, border: `1px solid ${it.p.accent}`,
                  color: it.p.accent, display: 'grid', placeItems: 'center',
                  fontSize: 14, fontWeight: 800, flexShrink: 0,
                }}>
                  {it.p.glyph}
                </div>

                {/* DETAILS */}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 13, color: it.p.accent, fontWeight: 700,
                    letterSpacing: '0.04em', textTransform: 'uppercase',
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>
                    {it.p.name}
                  </div>
                  <div style={{
                    fontSize: 10, color: '#6E6E6E', letterSpacing: '0.12em', marginTop: 4,
                  }}>
                    {it.grind}
                  </div>
                  {/* QTY CONTROLS */}
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
                    <button
                      onClick={() => onUpdateQty(idx, -1)}
                      style={{
                        background: 'transparent', border: '1px solid rgba(255,255,255,0.2)',
                        color: '#B8B8B8', fontFamily: 'inherit', fontSize: 14,
                        cursor: 'pointer', padding: '4px 12px', minHeight: 32, minWidth: 32,
                        lineHeight: '20px',
                      }}
                    >−</button>
                    <span style={{ fontSize: 13, color: '#FFF', fontWeight: 700, minWidth: 24, textAlign: 'center' }}>
                      {String(it.qty).padStart(2, '0')}
                    </span>
                    <button
                      onClick={() => onUpdateQty(idx, 1)}
                      style={{
                        background: 'transparent', border: '1px solid rgba(255,255,255,0.2)',
                        color: '#B8B8B8', fontFamily: 'inherit', fontSize: 14,
                        cursor: 'pointer', padding: '4px 12px', minHeight: 32, minWidth: 32,
                        lineHeight: '20px',
                      }}
                    >+</button>
                  </div>
                </div>

                {/* PRICE + REMOVE */}
                <div style={{ textAlign: 'right', flexShrink: 0 }}>
                  <div style={{ fontSize: 14, color: '#FFF', fontWeight: 700 }}>
                    ${it.p.price * it.qty}
                  </div>
                  <button
                    onClick={() => onUpdateQty(idx, -it.qty)}
                    style={{
                      background: 'transparent', border: 'none', color: '#FF3344',
                      fontFamily: 'inherit', fontSize: 9, letterSpacing: '0.12em',
                      cursor: 'pointer', padding: '4px 0', marginTop: 4,
                    }}
                  >
                    [rm]
                  </button>
                </div>
              </div>
            ))
          )}
        </div>

        {/* FOOTER — TOTALS + CHECKOUT */}
        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.1)',
          padding: 16, background: '#0A0A0A',
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            fontSize: 11, letterSpacing: '0.15em', 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.15em', color: '#6E6E6E',
            marginBottom: 14,
          }}>
            <span>SHIPPING</span>
            <span style={{ color: '#FFF' }}>${shipping}</span>
          </div>
          <button
            disabled={items.length === 0}
            onClick={onCheckout}
            style={{
              width: '100%',
              background: items.length > 0 ? '#00FF41' : 'transparent',
              color: items.length > 0 ? '#000' : '#3A3A3A',
              border: `1px solid ${items.length > 0 ? '#00FF41' : '#3A3A3A'}`,
              padding: '16px', fontFamily: "'JetBrains Mono', monospace",
              fontSize: 13, fontWeight: 800, letterSpacing: '0.18em',
              cursor: items.length > 0 ? 'pointer' : 'not-allowed',
              borderRadius: 2, minHeight: 52,
            }}
          >
            {'>'} ./checkout &mdash; TOTAL ${total + shipping}
          </button>
        </div>
      </div>

      {/* SLIDE-IN ANIMATION */}
      <style>{`
        @keyframes mobileCartSlideIn {
          from { transform: translateX(100%); }
          to   { transform: translateX(0);    }
        }
      `}</style>
    </div>
  );
};

window.MobileCart = MobileCart;