/* global React */
// Jin Mai — verbatim shelf data + wheat-stalk mark. Exposed on window.

// EXACTLY the three items from the brief. Chinese reproduced verbatim.
const IMG = (id) => `https://images.pexels.com/photos/${id}/pexels-photo-${id}.jpeg?auto=compress&cs=tinysrgb&w=1200`;
const SHELF = [
  { en: 'COCKTAIL BUN', zh: '雞尾包', note: 'Soft, sweet, sesame top.',            price: '$ ?', tone: '#E7B85C', img: IMG(17138068) },
  { en: 'COCONUT BUN',  zh: '椰蓉包', note: 'Fluffy with shredded coconut inside.', price: '$ ?', tone: '#E4CF95', img: IMG(15891385) },
  { en: 'SAUSAGE ROLL', zh: '香腸包', note: 'HK-style sausage wrapped in bun.',     price: '$ ?', tone: '#C8732F', img: IMG(13424729) },
];

// Wheat-stalk motif (Jin Mai = golden wheat). Geometric, paired grains on a stem.
function WheatMark({ size = 28, color = 'currentColor', className = '' }) {
  const grains = [];
  const pairs = 5;
  for (let i = 0; i < pairs; i++) {
    const y = 7 + i * 6.6;
    const lift = i * 0.6;
    grains.push(
      React.createElement('ellipse', { key: 'l' + i, cx: 24 - 5.5, cy: y + lift, rx: 3, ry: 5.4, transform: `rotate(-34 ${24 - 5.5} ${y + lift})`, fill: color }),
      React.createElement('ellipse', { key: 'r' + i, cx: 24 + 5.5, cy: y + lift, rx: 3, ry: 5.4, transform: `rotate(34 ${24 + 5.5} ${y + lift})`, fill: color }),
    );
  }
  return React.createElement('svg', { width: size, height: size * (52/48), viewBox: '0 0 48 52', className, 'aria-hidden': true },
    React.createElement('path', { d: 'M24 50 L24 14', stroke: color, strokeWidth: 2.2, strokeLinecap: 'round', fill: 'none' }),
    React.createElement('ellipse', { cx: 24, cy: 5, rx: 3.1, ry: 5.6, fill: color }),
    ...grains,
  );
}

Object.assign(window, { SHELF, WheatMark });