// MobileProductDetail.jsx — full-screen product overlay, compact single-screen layout
const MobileProductDetail = ({ p, onClose, onAdd }) => {
  if (!p) return null;

  const [qty, setQty] = React.useState(1);
  const [grind, setGrind] = React.useState('WHOLE BEAN');

  React.useEffect(() => { setQty(1); setGrind('WHOLE BEAN'); }, [p.id]);
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  const lineData = (window.OBC_LINES || []).find((l) => l.id === p.line);

  return (
    <div
      style={{
        position: 'fixed', inset: 0, background: '#0A0A0A',
        zIndex: 100, display: 'flex', flexDirection: 'column',
        fontFamily: "'JetBrains Mono', monospace",
        animation: 'mobileDetailSlideUp 200ms ease-out',
      }}
    >
      {/* CLOSE BAR */}
      <div style={{
        padding: '10px 16px', display: 'flex', alignItems: 'center',
        borderBottom: '1px solid rgba(255,255,255,0.08)',
        background: '#000', flexShrink: 0,
      }}>
        {lineData && (
          <span style={{
            padding: '3px 8px', border: '1px solid ' + lineData.color + '66',
            fontSize: 8, letterSpacing: '0.15em', color: lineData.color,
            fontWeight: 700, marginRight: 8,
          }}>
            {lineData.label}
          </span>
        )}
        <span style={{ fontSize: 10, color: '#6E6E6E', letterSpacing: '0.15em' }}>
          /shop/{p.id}
        </span>
        <button
          onClick={onClose}
          style={{
            marginLeft: 'auto', background: 'transparent',
            border: '1px solid rgba(255,255,255,0.2)', color: '#B8B8B8',
            padding: '6px 12px', fontFamily: 'inherit', fontSize: 11,
            letterSpacing: '0.12em', cursor: 'pointer', minHeight: 36,
          }}
        >
          [x]
        </button>
      </div>

      {/* BODY — flex column to fill remaining space */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'auto', padding: '0 16px' }}>

        {/* NAME + PRICE ROW */}
        <div style={{
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
          gap: 12, paddingTop: 14,
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <h1 style={{
              fontSize: 28, fontWeight: 800, color: '#FFF',
              letterSpacing: '0.02em', textTransform: 'uppercase',
              lineHeight: 1, margin: 0,
            }}>
              {p.name}
            </h1>
            <div style={{
              marginTop: 6, fontSize: 11, letterSpacing: '0.15em',
              color: p.accent, fontWeight: 700, textTransform: 'uppercase',
            }}>
              {p.roast}
            </div>
          </div>
          <div style={{ textAlign: 'right', flexShrink: 0 }}>
            <div style={{ fontSize: 28, fontWeight: 800, color: '#FFF', lineHeight: 1 }}>
              ${p.price}
            </div>
            <div style={{ fontSize: 9, color: '#6E6E6E', letterSpacing: '0.1em', marginTop: 4 }}>
              USD / 12OZ
            </div>
          </div>
        </div>

        {/* TERMINAL LOG + SVG WATERMARK */}
        <div style={{
          marginTop: 12, padding: 12, height: 130,
          background: p.accent + '1A', border: '1px solid ' + p.accent + '66',
          color: p.accent, fontSize: 11, lineHeight: 1.6, position: 'relative',
          overflow: 'hidden', display: 'flex', flexDirection: 'column',
        }}>
          <img
            src={'assets/sku/' + p.id + '.svg'}
            alt=""
            style={{
              position: 'absolute', right: 8, bottom: 8, width: 64, height: 64,
              opacity: 0.18, pointerEvents: 'none',
            }}
          />
          {p.log && p.log.map((l, i) => (
            <div key={i} style={{ position: 'relative' }}>{'>'} {l}</div>
          ))}
          <div style={{ flex: 1 }} />
          <div style={{
            color: '#E0E0E0', fontSize: 9, letterSpacing: '0.12em',
            fontWeight: 600, position: 'relative',
          }}>
            // exit 0<span style={{ background: p.accent, color: '#000', marginLeft: 4, padding: '0 3px' }}>_</span>
          </div>
        </div>

        {/* DESCRIPTION */}
        {p.description && (
          <div style={{
            marginTop: 10, fontSize: 13, lineHeight: 1.6,
            color: '#BFBFBF', letterSpacing: '0.02em',
          }}>
            {p.description}
          </div>
        )}

        {/* TASTING NOTES — 2 per row */}
        <div style={{ marginTop: 12 }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.18em', color: '#6E6E6E',
            fontWeight: 700, marginBottom: 8,
          }}>
            {'>'} TASTING NOTES
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {p.notes.map((note, i) => (
              <span key={i} style={{
                padding: '6px 12px', border: '1px solid ' + p.accent + '44',
                color: p.accent, fontSize: 11, letterSpacing: '0.1em',
                fontWeight: 600, background: p.accent + '14', textAlign: 'center',
              }}>
                {note}
              </span>
            ))}
          </div>
        </div>

        {/* METADATA — 2-col grid */}
        <div style={{
          marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
        }}>
          {[
            { label: 'ORIGIN', value: p.origin },
            { label: 'PROCESS', value: p.process },
            { label: 'STRENGTH', value: null },
            { label: 'WEIGHT', value: '12OZ' },
          ].map((m) => (
            <div key={m.label}>
              <div style={{ fontSize: 9, letterSpacing: '0.18em', color: '#6E6E6E', fontWeight: 700, marginBottom: 4 }}>
                {m.label}
              </div>
              {m.label === 'STRENGTH' ? (
                <div style={{ color: p.accent, fontSize: 13 }}>
                  {[1,2,3,4,5].map((i) => (
                    React.createElement('span', { key: i, style: { opacity: i <= p.strength ? 1 : 0.2 } }, '⚡')
                  ))}
                </div>
              ) : (
                <div style={{
                  fontSize: 12, color: '#FFF', letterSpacing: '0.02em',
                }}>
                  {m.value}
                </div>
              )}
            </div>
          ))}
        </div>

        {/* GRIND + QUANTITY — single row */}
        <div style={{
          marginTop: 14, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{ display: 'flex', gap: 4, flex: 1 }}>
            {['WHOLE BEAN', 'GROUND'].map((g) => (
              <button
                key={g}
                onClick={() => setGrind(g)}
                style={{
                  flex: 1, padding: '10px 6px',
                  background: grind === g ? p.accent : 'transparent',
                  color: grind === g ? '#000' : '#B8B8B8',
                  border: '1px solid ' + (grind === g ? p.accent : 'rgba(255,255,255,0.18)'),
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                  cursor: 'pointer', borderRadius: 2, minHeight: 42,
                }}
              >
                {g}
              </button>
            ))}
          </div>
          <div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.2)' }}>
            <button
              onClick={() => setQty(Math.max(1, qty - 1))}
              style={{
                background: 'transparent', color: '#B8B8B8', border: 'none',
                borderRight: '1px solid rgba(255,255,255,0.2)',
                padding: '8px 14px', fontFamily: 'inherit', fontSize: 16,
                cursor: 'pointer', minHeight: 42,
              }}
            >-</button>
            <span style={{
              padding: '8px 12px', color: '#FFF', minWidth: 36,
              textAlign: 'center', fontSize: 14, fontWeight: 700,
              display: 'grid', placeItems: 'center',
            }}>
              {String(qty).padStart(2, '0')}
            </span>
            <button
              onClick={() => setQty(qty + 1)}
              style={{
                background: 'transparent', color: '#B8B8B8', border: 'none',
                borderLeft: '1px solid rgba(255,255,255,0.2)',
                padding: '8px 14px', fontFamily: 'inherit', fontSize: 16,
                cursor: 'pointer', minHeight: 42,
              }}
            >+</button>
          </div>
        </div>

        {/* spacer pushes add button to bottom when content is short */}
        <div style={{ flex: 1, minHeight: 12 }} />

        {/* ADD-TO-CART — inside the flow, not fixed */}
        <div style={{ paddingBottom: 16 }}>
          <button
            onClick={() => { onAdd(p, qty, grind); }}
            style={{
              width: '100%', background: p.accent, color: '#000',
              border: '1px solid ' + p.accent, padding: '14px',
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 12, fontWeight: 800, letterSpacing: '0.15em',
              cursor: 'pointer', borderRadius: 2, minHeight: 48,
            }}
          >
            {'>'} ./add-to-cart {p.name} x {String(qty).padStart(2, '0')} &mdash; ${p.price * qty}
          </button>
          <div style={{
            marginTop: 8, fontSize: 11, color: '#8A8A8A', letterSpacing: '0.1em',
            textAlign: 'center',
          }}>
            roasted to order · ships in 2 days<br/>subscribe: -10%
          </div>
        </div>
      </div>

      <style>{`
        @keyframes mobileDetailSlideUp {
          from { transform: translateY(100%); opacity: 0; }
          to   { transform: translateY(0);    opacity: 1; }
        }
      `}</style>
    </div>
  );
};

window.MobileProductDetail = MobileProductDetail;