// ProductCard.jsx — packaging-replica card. Big, light, no Field abstraction.
const ProductCard = ({ p, onOpen }) => {
  // First word for most SKUs, with manual overrides for special cases.
  const SKU_OVERRIDES = {
    'zero-day': 'ZERODAY',
    'rootkit': 'ROOT',
    'honeypot': 'HONEY',
    'zero-day-reserve': 'RESERVE',
  };
  const sku = `OBC-${SKU_OVERRIDES[p.id] || p.id.split('-')[0].toUpperCase()}`;
  // MITRE ATT&CK technique ID for the attack this SKU is named after.
  // Real reference: attack.mitre.org. Adds authenticity for security folks.
  const mitre = p.mitre || '';

  const labelStyle = { color: '#E0E0E0', fontSize: 12, letterSpacing: '0.18em', fontWeight: 700, textTransform: 'uppercase' };
  const valueStyle = { color: '#FFFFFF', marginTop: 6, lineHeight: 1.45, fontSize: 14, letterSpacing: '0.04em', fontWeight: 500 };

  return (
    <div
      onClick={() => onOpen(p)}
      style={{
        background: '#000',
        border: '1px solid rgba(255,255,255,0.36)',
        display: 'flex',
        flexDirection: 'column',
        cursor: 'pointer',
        minHeight: 580,
        position: 'relative',
        transition: 'border-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = p.accent;
        e.currentTarget.style.boxShadow = `0 0 0 1px ${p.accent}, 0 0 32px ${p.accent}55`;
        e.currentTarget.style.transform = 'translateY(-3px)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.borderColor = 'rgba(255,255,255,0.36)';
        e.currentTarget.style.boxShadow = 'none';
        e.currentTarget.style.transform = 'translateY(0)';
      }}
    >
      {/* HEADER STRIP */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: '12px 18px', borderBottom: '1px solid rgba(255,255,255,0.28)',
        background: '#0A0A0A', fontSize: 12, letterSpacing: '0.2em', color: '#E0E0E0', fontWeight: 700,
      }}>
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: p.accent, boxShadow: `0 0 10px ${p.accent}` }}></span>
        <span style={{ color: p.accent, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{sku}</span>
        <span style={{ marginLeft: 'auto', color: '#BFBFBF', whiteSpace: 'nowrap' }}>{mitre}</span>
      </div>

      {/* NAME + ROAST */}
      <div style={{ padding: '24px 22px 12px' }}>
        <div style={{ fontSize: 34, fontWeight: 800, letterSpacing: '0.02em', textTransform: 'uppercase', color: p.accent, lineHeight: 0.95 }}>
          {p.name}
        </div>
        <div style={{ fontSize: 12, letterSpacing: '0.26em', color: '#E0E0E0', marginTop: 12, fontWeight: 700, textTransform: 'uppercase', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {p.roast} · {p.notes[0]}
        </div>
      </div>

      {/* TERMINAL LOG — fixed height so `exit 0` aligns across all cards */}
      <div style={{
        margin: '14px 22px 0', padding: '18px',
        background: `${p.accent}1A`, border: `1px solid ${p.accent}66`, color: p.accent,
        fontSize: 14, lineHeight: 1.7, height: 210, position: 'relative',
        display: 'flex', flexDirection: 'column', gap: 2, overflow: 'hidden',
      }}>
        {/* watermark icon */}
        <img
          src={`assets/sku/${p.id}.svg`}
          alt=""
          style={{
            position: 'absolute', right: 12, bottom: 36, width: 90, height: 90,
            opacity: 0.22, pointerEvents: 'none',
          }}
        />
        {p.log.map((l, i) => (<div key={i} style={{ position: 'relative' }}>{'>'} {l}</div>))}
        <div style={{ flex: 1 }}></div>
        <div style={{ color: '#E0E0E0', fontSize: 11, letterSpacing: '0.18em', marginTop: 10, fontWeight: 600, position: 'relative' }}>
          // exit 0<span style={{ background: p.accent, color: '#000', marginLeft: 4, padding: '0 4px' }}>_</span>
        </div>
      </div>

      {/* METADATA — inline, no Field component */}
      <div style={{
        margin: '20px 22px 0',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '18px 22px',
      }}>
        <div>
          <div style={labelStyle}>TASTING</div>
          <div style={valueStyle}>{p.notes.slice(0, 2).join(' · ')}</div>
        </div>
        <div>
          <div style={labelStyle}>ORIGIN</div>
          <div style={valueStyle}>{p.origin}</div>
        </div>
        <div>
          <div style={labelStyle}>PROCESS</div>
          <div style={valueStyle}>{p.process}</div>
        </div>
        <div>
          <div style={labelStyle}>STRENGTH</div>
          <div style={{ ...valueStyle, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ color: p.accent, fontSize: 16, letterSpacing: '0.05em' }}>
              {[1,2,3,4,5].map((i) => (<span key={i} style={{ opacity: i <= p.strength ? 1 : 0.2 }}>⚡</span>))}
            </span>
            <span style={{ color: '#E0E0E0', fontSize: 12, fontWeight: 600 }}>{p.strength}/5</span>
          </div>
        </div>
      </div>

      <div style={{ flex: 1 }}></div>

      {/* PRICE + CTA */}
      <div style={{
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        padding: '20px 22px 16px', borderTop: '1px dashed rgba(255,255,255,0.50)',
        marginTop: 20,
      }}>
        <div>
          <div style={labelStyle}>PRICE / 12OZ</div>
          <div style={{ fontSize: 30, fontWeight: 800, color: '#FFFFFF', lineHeight: 1, marginTop: 6 }}>
            ${p.price}<span style={{ fontSize: 14, color: '#CCCCCC', marginLeft: 6, letterSpacing: '0.1em', fontWeight: 600 }}>USD</span>
          </div>
        </div>
        <div style={{
          background: p.accent, color: '#000',
          padding: '12px 18px', fontSize: 14, fontWeight: 800, letterSpacing: '0.2em',
          border: `1px solid ${p.accent}`,
        }}>
          &gt; ./buy
        </div>
      </div>

      {/* BARCODE FOOTER */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: '12px 18px', borderTop: '1px solid rgba(255,255,255,0.28)',
        background: '#0A0A0A',
      }}>
        <div style={{ display: 'flex', gap: 1, height: 22, alignItems: 'center' }}>
          {[2,1,3,1,2,1,1,3,2,1,2,3,1,2,1,1,2,3,1,2,1,3,2,1,1,2,1,3,2,1].map((w, i) => (
            <div key={i} style={{ width: w, height: '100%', background: i % 2 === 0 ? '#BFBFBF' : 'transparent' }}></div>
          ))}
        </div>
        <span style={{ marginLeft: 'auto', fontSize: 11, letterSpacing: '0.22em', color: '#BFBFBF', fontWeight: 600, textAlign: 'right', lineHeight: 1.4 }}>
          OPERATOR BREWING<br/>NET 340G
        </span>
      </div>
    </div>
  );
};

window.ProductCard = ProductCard;