// Icons used across the site — inline SVG components
const { createElement: h } = React;

function Icon({ name, ...rest }) {
  const common = { width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round', ...rest };
  switch (name) {
    case 'phone':
      return h('svg', common, h('path', { d: 'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z' }));
    case 'pin':
      return h('svg', common, h('path', { d: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z' }), h('circle', { cx: 12, cy: 10, r: 3 }));
    case 'star':
      return h('svg', common, h('polygon', { points: '12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' }));
    case 'check':
      return h('svg', common, h('polyline', { points: '20 6 9 17 4 12' }));
    case 'shield':
      return h('svg', common, h('path', { d: 'M12 2l9 4v6c0 5-4 9-9 10-5-1-9-5-9-10V6z' }));
    case 'cpu':
      return h('svg', common, h('rect', { x: 4, y: 4, width: 16, height: 16, rx: 2 }), h('rect', { x: 9, y: 9, width: 6, height: 6 }), h('path', { d: 'M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3' }));
    case 'heart':
      return h('svg', common, h('path', { d: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' }));
    case 'clock':
      return h('svg', common, h('circle', { cx: 12, cy: 12, r: 10 }), h('polyline', { points: '12 6 12 12 16 14' }));
    case 'chat':
      return h('svg', common, h('path', { d: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z' }));
    case 'sparkle':
      return h('svg', common, h('path', { d: 'M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z' }), h('path', { d: 'M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14z' }));
    case 'plus':
      return h('svg', common, h('line', { x1: 12, y1: 5, x2: 12, y2: 19 }), h('line', { x1: 5, y1: 12, x2: 19, y2: 12 }));
    case 'arrow':
      return h('svg', common, h('line', { x1: 5, y1: 12, x2: 19, y2: 12 }), h('polyline', { points: '12 5 19 12 12 19' }));
    case 'instagram':
      return h('svg', common, h('rect', { x: 2, y: 2, width: 20, height: 20, rx: 5 }), h('path', { d: 'M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z' }), h('line', { x1: 17.5, y1: 6.5, x2: 17.51, y2: 6.5 }));
    case 'flower':
      return h('svg', common, h('circle', { cx: 12, cy: 12, r: 3 }), h('path', { d: 'M12 3a3 3 0 0 0 0 6M12 15a3 3 0 0 0 0 6M3 12a3 3 0 0 0 6 0M15 12a3 3 0 0 0 6 0' }));
    case 'leaf':
      return h('svg', common, h('path', { d: 'M11 20A7 7 0 0 1 4 13c0-7 7-11 17-11 0 10-4 18-10 18z' }), h('path', { d: 'M2 22L17 7' }));
    case 'drop':
      return h('svg', common, h('path', { d: 'M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z' }));
    case 'face':
      return h('svg', common, h('circle', { cx: 12, cy: 12, r: 9 }), h('path', { d: 'M8 14s1.5 2 4 2 4-2 4-2' }), h('line', { x1: 9, y1: 9, x2: 9.01, y2: 9 }), h('line', { x1: 15, y1: 9, x2: 15.01, y2: 9 }));
    case 'sun':
      return h('svg', common, h('circle', { cx: 12, cy: 12, r: 4 }), h('path', { d: 'M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41' }));
    default:
      return null;
  }
}

// Service icon mapping
const SERVICE_ICON = {
  skin: 'flower',
  laser: 'sparkle',
  anti: 'heart',
  body: 'leaf',
  hair: 'drop',
  glow: 'sun',
};

window.Icon = Icon;
window.SERVICE_ICON = SERVICE_ICON;