const DetailRow = ({ label, children }) => (
  <div style={{ borderTop: '1px solid var(--border)', padding: '14px 0' }}>
    <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--amber-dim)', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '6px' }}>{label}</div>
    <div style={{ fontSize: '14px', color: 'var(--text-2)', lineHeight: 1.6 }}>{children}</div>
  </div>
);

const ProductCard = ({ product, onOpen }) => {
  var img = product.images && product.images[0];
  return (
    <div onClick={() => onOpen(product)} style={{
      background: 'var(--surface)', border: '1px solid var(--border)',
      transition: 'background .2s, box-shadow .2s', cursor: 'pointer',
      display: 'flex', flexDirection: 'column',
      position: 'relative',
    }}
      onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(212,168,75,0.06)'; e.currentTarget.style.boxShadow = 'inset 3px 0 0 var(--amber)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--surface)'; e.currentTarget.style.boxShadow = 'none'; }}>
      {img && (
        <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--bg-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <img src={img} alt={product.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      )}
      {!img && (
        <div style={{ aspectRatio: '4/5', background: 'var(--bg-2)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontSize: '48px', color: 'var(--text-muted)' }}>?</div>
      )}
      {product.made_to_order && (
        <div style={{
          position: 'absolute', top: '10px', left: '10px',
          fontFamily: 'var(--font-mono)', fontSize: '10px', letterSpacing: '0.08em',
          textTransform: 'uppercase', color: 'var(--amber)',
          background: 'rgba(10,10,10,0.85)', padding: '4px 8px',
          border: '1px solid var(--border)',
        }}>
          MADE TO ORDER
        </div>
      )}
      <div style={{ padding: '16px 20px 20px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.1em', color: 'var(--amber-dim)', textTransform: 'uppercase', marginBottom: '6px' }}>
          {product.category === 'sticker' ? 'STICKER' : product.type.toUpperCase()}
          {product.kids && ' · KIDS'}
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: '24px', fontWeight: 400, color: 'var(--text)', lineHeight: 1.1, letterSpacing: '0.02em', marginBottom: '6px' }}>
          {product.name}
        </div>
        <div style={{ fontSize: '14px', color: 'var(--text-muted)', lineHeight: 1.5, marginBottom: '10px' }}>
          {product.description}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '18px', fontWeight: 700, color: 'var(--amber)' }}>${product.price}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>VIEW &rarr;</div>
        </div>
      </div>
    </div>
  );
};

window.DetailRow = DetailRow;
window.ProductCard = ProductCard;