/* Service icons — two-tone CIM blue + yellow accent. Inline SVG components. */
const Icon = ({ name, className = "" }) => {
  const props = { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", className };
  const blue = "#0033FF";
  const yellow = "#FFD600";
  switch(name) {
    case 'pin': return (
      <svg {...props}>
        <path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11Z" stroke={blue} fill={yellow}/>
        <circle cx="12" cy="10" r="2.4" fill={blue}/>
      </svg>
    );
    case 'search': return (
      <svg {...props}>
        <circle cx="11" cy="11" r="6" stroke={blue} fill={yellow} fillOpacity="0.3"/>
        <path d="m20 20-4.5-4.5" stroke={blue}/>
        <path d="M9 11h4M11 9v4" stroke={blue}/>
      </svg>
    );
    case 'crown': return (
      <svg {...props}>
        <path d="M3 18h18M4 8l4 3 4-5 4 5 4-3-1.5 9h-13L4 8Z" stroke={blue} fill={yellow}/>
        <circle cx="4" cy="8" r="1" fill={blue}/>
        <circle cx="20" cy="8" r="1" fill={blue}/>
        <circle cx="12" cy="6" r="1" fill={blue}/>
      </svg>
    );
    case 'social': return (
      <svg {...props}>
        <circle cx="6" cy="7" r="2.5" stroke={blue} fill={yellow}/>
        <circle cx="18" cy="7" r="2.5" stroke={blue}/>
        <circle cx="12" cy="17" r="2.5" stroke={blue} fill={yellow}/>
        <path d="M8 8.5 10 15M14 15l2-6.5" stroke={blue}/>
      </svg>
    );
    case 'target': return (
      <svg {...props}>
        <circle cx="12" cy="12" r="8" stroke={blue}/>
        <circle cx="12" cy="12" r="4.5" stroke={blue} fill={yellow}/>
        <circle cx="12" cy="12" r="1.5" fill={blue}/>
      </svg>
    );
    case 'megaphone': return (
      <svg {...props}>
        <path d="M4 10v4l11 4V6L4 10Z" stroke={blue} fill={yellow}/>
        <path d="M15 9a3 3 0 0 1 0 6" stroke={blue}/>
        <path d="M7 14v3a2 2 0 0 0 4 0v-1" stroke={blue}/>
      </svg>
    );
    case 'mail': return (
      <svg {...props}>
        <rect x="3" y="6" width="18" height="13" rx="2" stroke={blue} fill={yellow} fillOpacity="0.4"/>
        <path d="m4 8 8 6 8-6" stroke={blue}/>
      </svg>
    );
    case 'calendar': return (
      <svg {...props}>
        <rect x="3" y="5" width="18" height="16" rx="2" stroke={blue} fill={yellow} fillOpacity="0.3"/>
        <path d="M3 10h18M8 3v4M16 3v4" stroke={blue}/>
        <rect x="11" y="13" width="3" height="3" fill={blue}/>
      </svg>
    );
    case 'bot': return (
      <svg {...props}>
        <rect x="4" y="8" width="16" height="11" rx="3" stroke={blue} fill={yellow} fillOpacity="0.4"/>
        <circle cx="9" cy="13.5" r="1.4" fill={blue}/>
        <circle cx="15" cy="13.5" r="1.4" fill={blue}/>
        <path d="M12 4v3M9 19v2M15 19v2" stroke={blue}/>
        <circle cx="12" cy="3.5" r="1" fill={blue}/>
      </svg>
    );
    case 'people': return (
      <svg {...props}>
        <circle cx="9" cy="9" r="3" stroke={blue} fill={yellow}/>
        <circle cx="17" cy="10" r="2.4" stroke={blue}/>
        <path d="M3 19c0-3 2.5-5 6-5s6 2 6 5" stroke={blue}/>
        <path d="M15 19c0-2 1.5-4 4-4s2 1 2 4" stroke={blue}/>
      </svg>
    );
    case 'training': return (
      <svg {...props}>
        <path d="M3 8 12 4l9 4-9 4-9-4Z" stroke={blue} fill={yellow}/>
        <path d="M7 10v4c0 1.5 2.5 3 5 3s5-1.5 5-3v-4" stroke={blue}/>
        <path d="M21 8v5" stroke={blue}/>
      </svg>
    );
    case 'pipeline': return (
      <svg {...props}>
        <rect x="3" y="5" width="18" height="4" rx="1" stroke={blue} fill={yellow}/>
        <rect x="5" y="11" width="14" height="4" rx="1" stroke={blue}/>
        <rect x="7" y="17" width="10" height="3" rx="1" stroke={blue} fill={yellow}/>
        <path d="M12 9v2M12 15v2" stroke={blue}/>
      </svg>
    );
    case 'book': return (
      <svg {...props}>
        <path d="M4 4h7c1.5 0 3 .8 3 2.5V20c0-1.5-1.5-2-3-2H4V4Z" stroke={blue} fill={yellow} fillOpacity="0.4"/>
        <path d="M20 4h-7c-1.5 0-3 .8-3 2.5V20c0-1.5 1.5-2 3-2h7V4Z" stroke={blue}/>
      </svg>
    );
    case 'tools': return (
      <svg {...props}>
        <path d="M14 4a4 4 0 0 1 5 5l-3 1-2-2 1-3-1-1Z" stroke={blue} fill={yellow}/>
        <path d="m14 10-9 9 2 2 9-9" stroke={blue}/>
      </svg>
    );
    case 'crm': return (
      <svg {...props}>
        <rect x="3" y="4" width="18" height="16" rx="2" stroke={blue}/>
        <path d="M3 9h18" stroke={blue}/>
        <rect x="6" y="12" width="5" height="5" rx="1" fill={yellow} stroke={blue}/>
        <path d="M13 13h6M13 16h4" stroke={blue}/>
      </svg>
    );
    default: return (
      <svg {...props}>
        <circle cx="12" cy="12" r="8" stroke={blue} fill={yellow}/>
      </svg>
    );
  }
};

window.Icon = Icon;