// ProductDetail.jsx — full overlay
const ProductDetail = ({ p, onClose, onAdd }) => {
  if (!p) return null;
  const [qty, setQty] = React.useState(1);
  const [grind, setGrind] = React.useState('WHOLE BEAN');
  const grinds = ['WHOLE BEAN', 'GROUND'];
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 100, padding: 32, overflow: 'auto' }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: 1080, margin: '0 auto', background: '#0A0A0A', border: `1px solid ${p.accent}`, padding: 32, position: 'relative' }}>
        <button onClick={onClose} style={{ position: 'absolute', top: 14, right: 14, background: 'transparent', border: '1px solid rgba(255,255,255,0.2)', color: '#B8B8B8', padding: '4px 10px', cursor: 'pointer', fontFamily: 'inherit', fontSize: 11, letterSpacing: '0.18em' }}>[ ESC ] CLOSE</button>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36 }}>
          {/* left: package */}
          <div style={{ background: '#000', border: '1px solid rgba(255,255,255,0.22)', padding: 24, minHeight: 460, display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 11, letterSpacing: '0.25em', color: '#BFBFBF', fontWeight: 600 }}>// PACKAGE</div>
            <div style={{ marginTop: 16, padding: 16, fontSize: 14, lineHeight: 1.8, background: `${p.accent}14`, border: `1px solid ${p.accent}55`, color: p.accent, flex: 1 }}>
              {p.log.map((l, i) => (<div key={i}>{'>'} {l}</div>))}
            </div>
            <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, fontSize: 11, letterSpacing: '0.18em' }}>
              <div><div style={{ color: '#BFBFBF', fontWeight: 600 }}>TASTING</div><div style={{ color: '#FFF', marginTop: 5, lineHeight: 1.55, fontSize: 12, letterSpacing: '0.06em' }}>{p.notes.join(' · ')}</div></div>
              <div><div style={{ color: '#BFBFBF', fontWeight: 600 }}>PROCESS</div><div style={{ color: '#FFF', marginTop: 5, fontSize: 12, letterSpacing: '0.06em' }}>{p.process}</div></div>
              <div><div style={{ color: '#BFBFBF', fontWeight: 600 }}>ORIGIN</div><div style={{ color: '#FFF', marginTop: 5, lineHeight: 1.55, fontSize: 12, letterSpacing: '0.06em' }}>{p.origin}</div></div>
              <div><div style={{ color: '#BFBFBF', fontWeight: 600 }}>STRENGTH</div><div style={{ marginTop: 5, color: p.accent, fontSize: 16 }}>{[1,2,3,4,5].map((i) => (<span key={i} style={{ opacity: i <= p.strength ? 1 : 0.2 }}>⚡</span>))}</div></div>
            </div>
            <div style={{ marginTop: 22, paddingTop: 14, borderTop: '1px dashed rgba(255,255,255,0.32)', display: 'flex', justifyContent: 'space-between', fontSize: 10, letterSpacing: '0.22em', color: '#BFBFBF' }}>
              <span style={{ color: p.accent }}>{p.glyph} OPERATOR BREWING CO.</span><span>NET WT. 12OZ (340G)</span>
            </div>
          </div>
          {/* right: buy */}
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.25em', color: '#BFBFBF', fontWeight: 600 }}>// /shop/{p.id}</div>
            <div style={{ marginTop: 8, fontSize: 44, fontWeight: 800, color: '#FFF', letterSpacing: '0.04em', textTransform: 'uppercase', lineHeight: 1 }}>{p.name}</div>
            <div style={{ marginTop: 10, fontSize: 12, letterSpacing: '0.22em', color: p.accent, fontWeight: 700 }}>// {p.roast} · {p.notes[0]}</div>

            {p.description && (
              <div style={{ marginTop: 22, fontSize: 14, lineHeight: 1.7, color: '#E8E8E8', letterSpacing: '0.02em' }}>
                {p.description}
              </div>
            )}

            <div style={{ marginTop: 24, fontSize: 30, color: '#FFF', fontWeight: 800, lineHeight: 1 }}>
              ${p.price}<span style={{ fontSize: 13, color: '#BFBFBF', marginLeft: 8, letterSpacing: '0.1em', fontWeight: 600 }}>USD / 12OZ</span>
            </div>

            <div style={{ marginTop: 24 }}>
              <div style={{ fontSize: 10, letterSpacing: '0.22em', color: '#6E6E6E', marginBottom: 8 }}>{'>'} GRIND</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {grinds.map((g) => (
                  <button key={g} onClick={() => setGrind(g)} style={{
                    background: grind === g ? p.accent : 'transparent',
                    color: grind === g ? '#000' : '#B8B8B8',
                    border: `1px solid ${grind === g ? p.accent : 'rgba(255,255,255,0.18)'}`,
                    padding: '8px 12px', fontFamily: 'inherit', fontSize: 10, letterSpacing: '0.15em', cursor: 'pointer', borderRadius: 2,
                  }}>{g}</button>
                ))}
              </div>
            </div>

            <div style={{ marginTop: 24 }}>
              <div style={{ fontSize: 10, letterSpacing: '0.22em', color: '#6E6E6E', marginBottom: 8 }}>{'>'} QUANTITY</div>
              <div style={{ display: 'inline-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', cursor: 'pointer' }}>−</button>
                <span style={{ padding: '8px 16px', color: '#FFF', minWidth: 40, textAlign: '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', cursor: 'pointer' }}>+</button>
              </div>
            </div>

            <button onClick={() => { onAdd(p, qty, grind); }} style={{
              marginTop: 28, width: '100%', background: p.accent, color: '#000', border: `1px solid ${p.accent}`,
              padding: '16px', fontFamily: 'inherit', fontSize: 14, fontWeight: 800, letterSpacing: '0.22em', cursor: 'pointer', borderRadius: 2,
            }}>
              {'>'} ./add-to-cart {p.name} × {String(qty).padStart(2, '0')}
            </button>

            <div style={{ marginTop: 18, padding: 12, border: '1px dashed rgba(255,255,255,0.18)', fontSize: 11, color: '#B8B8B8', lineHeight: 1.7 }}>
              <div style={{ color: '#00FF41' }}>$ ./brew-spec --sku={p.id}</div>
              <div>&nbsp;&nbsp;roasted to order. ships in 2 days.</div>
              <div>&nbsp;&nbsp;subscribe for monthly: -10%.</div>
              <div>&nbsp;&nbsp;<span style={{ color: '#6E6E6E' }}>// drink responsibly. pwn responsibly.</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ProductDetail = ProductDetail;