// Hand-drawn terracotta line icons — matching LÜP design system aesthetic
// All use 2px stroke, round caps, organic feel

const IconWrap = ({ size = 48, color = '#C4795D', children }) =>
  React.createElement('svg', {
    width: size, height: size, viewBox: '0 0 48 48', fill: 'none',
    stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
  }, children);

window.IconBin = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M10 14 L38 14' }),
  React.createElement('path', { d: 'M13 14 L15 40 Q15 41 16 41 L32 41 Q33 41 33 40 L35 14' }),
  React.createElement('path', { d: 'M18 14 L18 10 Q18 9 19 9 L29 9 Q30 9 30 10 L30 14' }),
  React.createElement('path', { d: 'M19 20 L19 35' }),
  React.createElement('path', { d: 'M24 20 L24 35' }),
  React.createElement('path', { d: 'M29 20 L29 35' }),
  // waste squiggles above
  React.createElement('path', { d: 'M20 6 Q22 4 24 6 T28 6', opacity: 0.6 }),
);

window.IconTruck = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M4 18 L4 32 L28 32 L28 18 Z' }),
  React.createElement('path', { d: 'M28 22 L36 22 L42 28 L42 32 L28 32' }),
  React.createElement('circle', { cx: 12, cy: 35, r: 3.5 }),
  React.createElement('circle', { cx: 36, cy: 35, r: 3.5 }),
  // waste on top
  React.createElement('path', { d: 'M8 18 Q10 14 13 15 Q16 12 19 14 Q22 11 25 14 L25 18', opacity: 0.8 }),
);

window.IconMoneyUp = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M24 38 L24 12' }),
  React.createElement('path', { d: 'M18 18 L24 12 L30 18' }),
  React.createElement('circle', { cx: 14, cy: 36, r: 5 }),
  React.createElement('text', { x: 14, y: 39, fontSize: 7, fontFamily: 'serif', stroke: 'none', fill: color, textAnchor: 'middle' }, '$'),
  React.createElement('circle', { cx: 34, cy: 36, r: 5 }),
  React.createElement('text', { x: 34, y: 39, fontSize: 7, fontFamily: 'serif', stroke: 'none', fill: color, textAnchor: 'middle' }, '$'),
);

window.IconLeaf = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M10 38 Q8 24 18 14 Q28 6 38 8 Q40 18 34 28 Q26 38 12 38 Z' }),
  React.createElement('path', { d: 'M12 36 Q20 28 30 18', opacity: 0.7 }),
);

window.IconBowl = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M6 20 L42 20 Q42 36 24 36 Q6 36 6 20 Z' }),
  React.createElement('ellipse', { cx: 24, cy: 20, rx: 18, ry: 3 }),
  React.createElement('path', { d: 'M14 20 Q14 14 18 12 Q22 13 22 16', opacity: 0.6 }),
);

window.IconBowlStack = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M10 30 L38 30 Q38 38 24 38 Q10 38 10 30 Z' }),
  React.createElement('ellipse', { cx: 24, cy: 30, rx: 14, ry: 2.5 }),
  React.createElement('ellipse', { cx: 24, cy: 24, rx: 14, ry: 2.5 }),
  React.createElement('ellipse', { cx: 24, cy: 18, rx: 14, ry: 2.5 }),
  React.createElement('ellipse', { cx: 24, cy: 12, rx: 14, ry: 2.5 }),
);

window.IconStar = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M24 8 L28 19 L40 20 L31 28 L34 40 L24 33 L14 40 L17 28 L8 20 L20 19 Z' }),
);

window.IconCheck = ({ size = 18, color = '#7a8c6e' }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M10 24 L20 34 L38 14', strokeWidth: 3 }),
);

window.IconThumbsUp = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M14 42 L14 22 L22 22 L26 10 Q28 8 30 10 Q32 13 30 22 L38 22 Q40 22 40 24 L37 40 Q37 42 35 42 Z' }),
  React.createElement('path', { d: 'M6 42 L14 42 L14 22 L6 22 Z' }),
);

// IconRecycle uses raster assets rather than an SVG path. Two colour variants
// are pre-baked; we pick one based on whether the caller asked for a sage tone.
window.IconRecycle = ({ size = 48, color }) => {
  const isSage = typeof color === 'string' && color.includes('sage');
  return React.createElement('img', {
    src: isSage ? 'assets/Recycle_icon_sage.webp' : 'assets/Recycle_icon.webp',
    alt: '',
    style: { width: size, height: size, objectFit: 'contain', display: 'block' }
  });
};

// Dishwasher — appliance with spray arm + door
window.IconDishwasher = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('rect', { x: 8, y: 7, width: 32, height: 34, rx: 2 }),
  React.createElement('path', { d: 'M8 14 L40 14' }),
  React.createElement('circle', { cx: 13, cy: 10.5, r: 0.8, fill: color, stroke: 'none' }),
  React.createElement('circle', { cx: 17, cy: 10.5, r: 0.8, fill: color, stroke: 'none' }),
  React.createElement('path', { d: 'M30 10.5 L35 10.5' }),
  // water drops inside
  React.createElement('path', { d: 'M16 22 Q14 25 16 27 Q18 25 16 22 Z', strokeWidth: 1.6 }),
  React.createElement('path', { d: 'M24 20 Q22 23 24 25 Q26 23 24 20 Z', strokeWidth: 1.6 }),
  React.createElement('path', { d: 'M32 22 Q30 25 32 27 Q34 25 32 22 Z', strokeWidth: 1.6 }),
  // rack line
  React.createElement('path', { d: 'M12 34 L36 34', opacity: 0.6 }),
);

// Microwave — boxy appliance with door panel + dial
window.IconMicrowave = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('rect', { x: 4, y: 12, width: 40, height: 26, rx: 2 }),
  React.createElement('rect', { x: 8, y: 16, width: 24, height: 18, rx: 1 }),
  // dial
  React.createElement('circle', { cx: 38, cy: 21, r: 2 }),
  React.createElement('path', { d: 'M36 28 L40 28' }),
  React.createElement('path', { d: 'M36 31 L40 31' }),
  // food plate inside
  React.createElement('ellipse', { cx: 20, cy: 30, rx: 7, ry: 1.2, opacity: 0.5 }),
  // heat waves
  React.createElement('path', { d: 'M16 22 q2 -2 4 0 t4 0', strokeWidth: 1.4, opacity: 0.7 }),
);

// Stack nesting — bowls nested tight
window.IconStackTight = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M8 16 Q8 22 24 22 Q40 22 40 16' }),
  React.createElement('path', { d: 'M8 20 Q8 26 24 26 Q40 26 40 20' }),
  React.createElement('path', { d: 'M8 24 Q8 30 24 30 Q40 30 40 24' }),
  React.createElement('path', { d: 'M8 28 Q8 34 24 34 Q40 34 40 28' }),
  React.createElement('ellipse', { cx: 24, cy: 16, rx: 16, ry: 3 }),
);

// Shield with check — food-safe / BPA-free
window.IconShield = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M24 6 L38 11 L38 24 Q38 36 24 42 Q10 36 10 24 L10 11 Z' }),
  React.createElement('path', { d: 'M17 24 L22 29 L32 18', strokeWidth: 2.4 }),
);

// Repeat / cycle counter — up to 300 uses
window.IconRepeat = ({ size, color }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M12 18 Q16 10 24 10 Q32 10 36 18' }),
  React.createElement('path', { d: 'M36 10 L36 18 L28 18' }),
  React.createElement('path', { d: 'M36 30 Q32 38 24 38 Q16 38 12 30' }),
  React.createElement('path', { d: 'M12 38 L12 30 L20 30' }),
);

window.IconArrowRight = ({ size = 20, color = 'currentColor' }) => React.createElement(IconWrap, { size, color },
  React.createElement('path', { d: 'M8 24 L40 24' }),
  React.createElement('path', { d: 'M30 14 L40 24 L30 34' }),
);

window.IconMail = ({ size = 18, color = 'currentColor' }) => React.createElement(IconWrap, { size, color },
  React.createElement('rect', { x: 6, y: 12, width: 36, height: 24, rx: 3 }),
  React.createElement('path', { d: 'M6 14 L24 28 L42 14' }),
);

// Curved hand-drawn arrow (decorative)
window.ArrowCurve = ({ width = 120, height = 60, color = '#C4795D', flip = false }) =>
  React.createElement('svg', { width, height, viewBox: '0 0 120 60', fill: 'none', style: { transform: flip ? 'scaleX(-1)' : 'none' } },
    React.createElement('path', {
      d: 'M5 30 Q30 5 60 25 Q90 45 115 20',
      stroke: color, strokeWidth: 2, fill: 'none', strokeLinecap: 'round'
    }),
    React.createElement('path', {
      d: 'M108 14 L115 20 L109 28',
      stroke: color, strokeWidth: 2, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round'
    }),
  );