/* ── Candle Silhouette Placeholders ── */

/* SVG candle silhouettes for product cards */
const CANDLE_SVGS = {
  flower: function(color) {
    return React.createElement('svg', { viewBox: '0 0 200 260', className: 'cc-candle-svg' },
      /* Flame */
      React.createElement('path', {
        d: 'M100 20 Q108 45 108 55 Q108 65 100 70 Q92 65 92 55 Q92 45 100 20Z',
        fill: color, opacity: 0.9,
      }),
      React.createElement('path', {
        d: 'M100 35 Q104 48 104 55 Q104 62 100 65 Q96 62 96 55 Q96 48 100 35Z',
        fill: color, opacity: 0.5,
      }),
      /* Wick */
      React.createElement('line', { x1: 100, y1: 65, x2: 100, y2: 78, stroke: color, strokeWidth: 1.2, opacity: 0.5 }),
      /* Cube body with floral relief */
      React.createElement('rect', { x: 60, y: 78, width: 80, height: 80, rx: 3, fill: 'none', stroke: color, strokeWidth: 1.5, opacity: 0.6 }),
      /* Flower pattern on front */
      React.createElement('circle', { cx: 100, cy: 118, r: 16, fill: 'none', stroke: color, strokeWidth: 0.8, opacity: 0.35 }),
      React.createElement('circle', { cx: 100, cy: 118, r: 10, fill: 'none', stroke: color, strokeWidth: 0.8, opacity: 0.25 }),
      React.createElement('circle', { cx: 100, cy: 118, r: 5, fill: color, opacity: 0.15 }),
      /* Petal hints */
      [0, 60, 120, 180, 240, 300].map(function(a, i) {
        var rad = a * Math.PI / 180;
        var cx = 100 + Math.cos(rad) * 22;
        var cy = 118 + Math.sin(rad) * 22;
        return React.createElement('circle', { key: i, cx: cx, cy: cy, r: 4, fill: 'none', stroke: color, strokeWidth: 0.6, opacity: 0.2 });
      }),
      /* Base shadow */
      React.createElement('ellipse', { cx: 100, cy: 165, rx: 42, ry: 4, fill: color, opacity: 0.08 }),
    );
  },
  design: function(color) {
    return React.createElement('svg', { viewBox: '0 0 200 260', className: 'cc-candle-svg' },
      /* Flame */
      React.createElement('path', {
        d: 'M100 30 Q110 55 110 68 Q110 80 100 85 Q90 80 90 68 Q90 55 100 30Z',
        fill: color, opacity: 0.9,
      }),
      React.createElement('path', {
        d: 'M100 45 Q105 60 105 68 Q105 75 100 78 Q95 75 95 68 Q95 60 100 45Z',
        fill: color, opacity: 0.5,
      }),
      /* Wick */
      React.createElement('line', { x1: 100, y1: 82, x2: 100, y2: 95, stroke: color, strokeWidth: 1.2, opacity: 0.5 }),
      /* Mushroom cap */
      React.createElement('path', {
        d: 'M62 120 Q62 90 100 88 Q138 90 138 120 Q138 128 100 132 Q62 128 62 120Z',
        fill: 'none', stroke: color, strokeWidth: 1.5, opacity: 0.6,
      }),
      /* Mushroom gills */
      React.createElement('path', { d: 'M75 122 Q100 128 125 122', fill: 'none', stroke: color, strokeWidth: 0.6, opacity: 0.25 }),
      React.createElement('path', { d: 'M80 118 Q100 123 120 118', fill: 'none', stroke: color, strokeWidth: 0.6, opacity: 0.2 }),
      /* Stem */
      React.createElement('path', {
        d: 'M90 132 L88 170 Q88 175 100 175 Q112 175 112 170 L110 132',
        fill: 'none', stroke: color, strokeWidth: 1.5, opacity: 0.5,
      }),
      /* Base */
      React.createElement('ellipse', { cx: 100, cy: 180, rx: 30, ry: 4, fill: color, opacity: 0.08 }),
    );
  },
  simple: function(color) {
    return React.createElement('svg', { viewBox: '0 0 200 260', className: 'cc-candle-svg' },
      /* Flame */
      React.createElement('path', {
        d: 'M100 15 Q109 42 109 55 Q109 67 100 72 Q91 67 91 55 Q91 42 100 15Z',
        fill: color, opacity: 0.9,
      }),
      React.createElement('path', {
        d: 'M100 30 Q105 48 105 55 Q105 63 100 66 Q95 63 95 55 Q95 48 100 30Z',
        fill: color, opacity: 0.5,
      }),
      /* Wick */
      React.createElement('line', { x1: 100, y1: 68, x2: 100, y2: 80, stroke: color, strokeWidth: 1.2, opacity: 0.5 }),
      /* Ribbed pillar */
      React.createElement('rect', { x: 72, y: 80, width: 56, height: 100, rx: 4, fill: 'none', stroke: color, strokeWidth: 1.5, opacity: 0.6 }),
      /* Ribs */
      [0, 1, 2, 3, 4, 5, 6, 7].map(function(i) {
        var x = 78 + i * 7;
        return React.createElement('line', { key: i, x1: x, y1: 84, x2: x, y2: 176, stroke: color, strokeWidth: 0.6, opacity: 0.18 });
      }),
      /* Top edge */
      React.createElement('ellipse', { cx: 100, cy: 80, rx: 28, ry: 5, fill: 'none', stroke: color, strokeWidth: 1, opacity: 0.4 }),
      /* Base shadow */
      React.createElement('ellipse', { cx: 100, cy: 186, rx: 32, ry: 4, fill: color, opacity: 0.08 }),
    );
  },
  valentine: function(color) {
    return React.createElement('svg', { viewBox: '0 0 200 260', className: 'cc-candle-svg' },
      /* Flame */
      React.createElement('path', {
        d: 'M100 25 Q108 48 108 58 Q108 68 100 72 Q92 68 92 58 Q92 48 100 25Z',
        fill: color, opacity: 0.9,
      }),
      React.createElement('path', {
        d: 'M100 38 Q104 52 104 58 Q104 64 100 67 Q96 64 96 58 Q96 52 100 38Z',
        fill: color, opacity: 0.5,
      }),
      /* Wick */
      React.createElement('line', { x1: 100, y1: 68, x2: 100, y2: 80, stroke: color, strokeWidth: 1.2, opacity: 0.5 }),
      /* Heart shape */
      React.createElement('path', {
        d: 'M100 170 C60 145 45 110 65 92 Q80 80 100 98 Q120 80 135 92 C155 110 140 145 100 170Z',
        fill: 'none', stroke: color, strokeWidth: 1.5, opacity: 0.6,
      }),
      /* Inner heart detail */
      React.createElement('path', {
        d: 'M100 155 C75 138 65 115 78 103 Q88 95 100 108 Q112 95 122 103 C135 115 125 138 100 155Z',
        fill: 'none', stroke: color, strokeWidth: 0.7, opacity: 0.25,
      }),
      /* Wings */
      React.createElement('path', {
        d: 'M60 118 Q40 105 30 115 Q22 125 40 130 Q50 133 62 125',
        fill: 'none', stroke: color, strokeWidth: 1, opacity: 0.35,
      }),
      React.createElement('path', {
        d: 'M140 118 Q160 105 170 115 Q178 125 160 130 Q150 133 138 125',
        fill: 'none', stroke: color, strokeWidth: 1, opacity: 0.35,
      }),
      /* Base */
      React.createElement('ellipse', { cx: 100, cy: 175, rx: 35, ry: 4, fill: color, opacity: 0.08 }),
    );
  },
};

/* Reusable placeholder component */
function CandlePlaceholder({ product, large }) {
  /* 'currentColor' lets SVG inherit color from the CSS custom property
     set on .cc-candle-placeholder, so it adapts automatically to any theme */
  var color = 'currentColor';
  var renderer = CANDLE_SVGS[product.category] || CANDLE_SVGS.simple;

  return React.createElement('div', {
    className: 'cc-candle-placeholder' + (large ? ' cc-candle-large' : ''),
  },
    renderer(color),
    !large && React.createElement('div', { className: 'cc-placeholder-label' }, product.subtitle),
  );
}

/* Story section placeholder */
function StudioPlaceholder() {
  var color = '#A4863D';
  return React.createElement('div', { className: 'cc-studio-placeholder' },
    React.createElement('svg', { viewBox: '0 0 300 400', className: 'cc-studio-svg' },
      /* Pouring vessel */
      React.createElement('path', {
        d: 'M90 100 L80 80 L100 80 L100 60 L200 60 L200 80 L220 80 L210 100',
        fill: 'none', stroke: color, strokeWidth: 1.5, opacity: 0.5,
      }),
      /* Pour stream */
      React.createElement('path', {
        d: 'M150 100 Q152 140 148 180',
        fill: 'none', stroke: color, strokeWidth: 1, opacity: 0.3,
        strokeDasharray: '4 3',
      }),
      /* Mold */
      React.createElement('rect', { x: 110, y: 180, width: 80, height: 70, rx: 3, fill: 'none', stroke: color, strokeWidth: 1.5, opacity: 0.5 }),
      /* Liquid level in mold */
      React.createElement('path', {
        d: 'M113 210 Q150 205 187 210 L187 247 Q150 250 113 247Z',
        fill: color, opacity: 0.08,
      }),
      /* Candle tools */
      React.createElement('line', { x1: 60, y1: 260, x2: 60, y2: 340, stroke: color, strokeWidth: 1.5, opacity: 0.35 }),
      React.createElement('circle', { cx: 60, cy: 260, r: 4, fill: 'none', stroke: color, strokeWidth: 1, opacity: 0.35 }),
      React.createElement('line', { x1: 240, y1: 270, x2: 240, y2: 340, stroke: color, strokeWidth: 1.5, opacity: 0.35 }),
      React.createElement('rect', { x: 234, y: 265, width: 12, height: 8, rx: 2, fill: 'none', stroke: color, strokeWidth: 1, opacity: 0.35 }),
      /* Small finished candles */
      React.createElement('rect', { x: 120, y: 300, width: 24, height: 35, rx: 2, fill: 'none', stroke: color, strokeWidth: 1, opacity: 0.3 }),
      React.createElement('path', { d: 'M132 300 Q135 290 132 280', fill: 'none', stroke: color, strokeWidth: 0.8, opacity: 0.25 }),
      React.createElement('rect', { x: 160, y: 310, width: 20, height: 25, rx: 2, fill: 'none', stroke: color, strokeWidth: 1, opacity: 0.3 }),
      React.createElement('path', { d: 'M170 310 Q173 302 170 294', fill: 'none', stroke: color, strokeWidth: 0.8, opacity: 0.25 }),
    ),
    React.createElement('span', { className: 'cc-studio-label' }, 'Studio Process'),
  );
}

window.CandlePlaceholder = CandlePlaceholder;
window.StudioPlaceholder = StudioPlaceholder;
window.CANDLE_SVGS = CANDLE_SVGS;