// Inline SVG icons for the prototype. Stroke-based, 1.6 weight, 24x24 viewbox.
const Icon = ({ name, size = 20, stroke = 1.6, className = '', style }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    className, style, 'aria-hidden': true, focusable: false,
  };
  switch (name) {
    case 'arrow-right': return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-up-right': return <svg {...props}><path d="M7 17L17 7M9 7h8v8"/></svg>;
    case 'arrow-down': return <svg {...props}><path d="M12 5v14M5 12l7 7 7-7"/></svg>;
    case 'chevron-right': return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevron-down': return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case 'chevron-left': return <svg {...props}><path d="M15 6l-6 6 6 6"/></svg>;
    case 'plus': return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus': return <svg {...props}><path d="M5 12h14"/></svg>;
    case 'check': return <svg {...props}><path d="M5 13l4 4L19 7"/></svg>;
    case 'x': return <svg {...props}><path d="M6 6l12 12M18 6l-12 12"/></svg>;
    case 'search': return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case 'phone': return <svg {...props}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.91.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg>;
    case 'mail': return <svg {...props}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 6l10 7 10-7"/></svg>;
    case 'pin': return <svg {...props}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case 'clock': return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    case 'paint': return <svg {...props}><path d="M3 10h13a2 2 0 012 2v2"/><path d="M3 10V7a1 1 0 011-1h13a1 1 0 011 1v3"/><path d="M14 14h4l1 4-3 4-3-4 1-4z"/></svg>;
    case 'paint-roller': return <svg {...props}><rect x="3" y="3" width="18" height="6" rx="1"/><path d="M19 9v3a2 2 0 01-2 2h-5a2 2 0 00-2 2v6"/></svg>;
    case 'brush': return <svg {...props}><path d="M9.06 11.9l8.07-8.06a2.85 2.85 0 114.04 4.04l-8.06 8.07"/><path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04 0-1.67-1.34-3.02-3-3.02z"/></svg>;
    case 'factory': return <svg {...props}><path d="M2 20h20V8l-6 4V8l-6 4V4H2v16z"/><path d="M6 12h2M6 16h2M11 16h2M16 16h2"/></svg>;
    case 'sparkle': return <svg {...props}><path d="M12 3l1.9 5.7L20 10l-6.1 1.3L12 17l-1.9-5.7L4 10l6.1-1.3L12 3z"/></svg>;
    case 'tool': return <svg {...props}><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>;
    case 'droplet': return <svg {...props}><path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/></svg>;
    case 'maximize': return <svg {...props}><path d="M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3"/></svg>;
    case 'calculator': return <svg {...props}><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M8 6h8M8 10h2M12 10h2M16 10h0M8 14h2M12 14h2M16 14h0M8 18h8"/></svg>;
    case 'star': return <svg {...props}><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" fill="currentColor"/></svg>;
    case 'star-outline': return <svg {...props}><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>;
    case 'shield': return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    case 'truck': return <svg {...props}><rect x="1" y="6" width="14" height="11" rx="1"/><path d="M15 9h4l3 3v5h-7"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></svg>;
    case 'building': return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M9 22V12h6v10M3 9h18"/></svg>;
    case 'users': return <svg {...props}><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>;
    case 'menu': return <svg {...props}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'cart': return <svg {...props}><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.39a2 2 0 002 1.61h9.7a2 2 0 002-1.61L23 6H6"/></svg>;
    case 'heart': return <svg {...props}><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>;
    case 'compass': return <svg {...props}><circle cx="12" cy="12" r="10"/><polygon points="16.24,7.76 14.12,14.12 7.76,16.24 9.88,9.88" fill="currentColor"/></svg>;
    case 'palette': return <svg {...props}><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 22A10 10 0 012 12c0-5.5 4.5-10 10-10s10 4.5 10 10c0 1.66-1.34 3-3 3h-1.83a2 2 0 00-1.5 3.32l.83 1.05A2 2 0 0114.83 22z"/></svg>;
    case 'leaf': return <svg {...props}><path d="M2 22s5-1 8-4c3-3 4-7 4-12 0 0-7 1-11 5-3 3-3 7-1 11z"/><path d="M2 22c4-4 8-8 13-13"/></svg>;
    case 'award': return <svg {...props}><circle cx="12" cy="8" r="6"/><path d="M8.21 13.89L7 22l5-3 5 3-1.21-8.12"/></svg>;
    case 'handshake': return <svg {...props}><path d="M12 7l4-4 4 4-4 4M12 7l-4-4-4 4 4 4M12 7v6M3 13l4 4 5-1 5 1 4-4"/></svg>;
    case 'instagram': return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".5" fill="currentColor"/></svg>;
    case 'facebook': return <svg {...props}><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>;
    case 'play': return <svg {...props}><polygon points="5,3 19,12 5,21" fill="currentColor"/></svg>;
    case 'sliders': return <svg {...props}><path d="M4 21V14M4 10V3M12 21V12M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/></svg>;
    case 'eye': return <svg {...props}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'cookie': return <svg {...props}><path d="M21 12a9 9 0 11-9-9 4 4 0 004 4 4 4 0 004 4 1 1 0 011 1z"/><circle cx="8" cy="14" r=".7" fill="currentColor"/><circle cx="14" cy="16" r=".7" fill="currentColor"/><circle cx="11" cy="9" r=".7" fill="currentColor"/></svg>;
    case 'shield-check': return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'spray': return <svg {...props}><rect x="9" y="11" width="6" height="11" rx="1"/><path d="M9 11V8h6v3M12 2v6M9 5h6"/></svg>;
    default: return <svg {...props}><circle cx="12" cy="12" r="9"/></svg>;
  }
};

window.Icon = Icon;