// All 28 Argos service icons — generated from uploads/N.svg.
// Each value is the inner SVG content (paths/circles/etc) for a 50×50 viewBox.
// Stroke colour comes from the parent <SvcIcon> via CSS.

const SVC_ICONS = {
  "01": "<path d=\"M48,25c0,12.703-10.297,23-23,23-12.703,0-23-10.297-23-23h46Z\"></path> <path d=\"M48,2c0,12.703-10.297,23-23,23-12.703,0-23-10.297-23-23h46Z\"></path>",
  "02": "<polyline points=\"2 4.154 9.688 11.841 17.333 4.195\"></polyline> <polyline points=\"17.333 4.154 25.021 11.841 32.667 4.195\"></polyline> <polyline points=\"32.667 4.154 40.354 11.841 48 4.195\"></polyline> <polyline points=\"2 15.489 9.688 23.176 17.333 15.53\"></polyline> <polyline points=\"17.333 15.489 25.021 23.176 32.667 15.53\"></polyline> <polyline points=\"32.667 15.489 40.354 23.176 48 15.53\"></polyline> <polyline points=\"2 26.824 9.688 34.511 17.333 26.866\"></polyline> <polyline points=\"17.333 26.824 25.021 34.511 32.667 26.866\"></polyline> <polyline points=\"32.667 26.824 40.354 34.511 48 26.866\"></polyline> <polyline points=\"2 38.159 9.688 45.846 17.333 38.201\"></polyline> <polyline points=\"17.333 38.159 25.021 45.846 32.667 38.201\"></polyline> <polyline points=\"32.667 38.159 40.354 45.846 48 38.201\"></polyline>",
  "03": "<ellipse cx=\"25\" cy=\"25\" rx=\"14.375\" ry=\"29.17\" transform=\"translate(-10.355 25) rotate(-45)\"></ellipse> <ellipse cx=\"25\" cy=\"25\" rx=\"29.17\" ry=\"14.375\" transform=\"translate(-10.355 25) rotate(-45)\"></ellipse>",
  "04": "<rect x=\"25\" y=\"5.946\" width=\"19.054\" height=\"19.054\" transform=\"translate(21.054 -19.882) rotate(45)\"></rect> <rect x=\"5.946\" y=\"5.946\" width=\"19.054\" height=\"19.054\" transform=\"translate(15.473 -6.409) rotate(45)\"></rect> <rect x=\"25\" y=\"25\" width=\"19.054\" height=\"19.054\" transform=\"translate(34.527 -14.302) rotate(45)\"></rect> <rect x=\"5.946\" y=\"25\" width=\"19.054\" height=\"19.054\" transform=\"translate(28.946 -.828) rotate(45)\"></rect>",
  "05": "<circle cx=\"25\" cy=\"25\" r=\"23\"></circle> <circle cx=\"17.42\" cy=\"25.176\" r=\"15.359\"></circle> <circle cx=\"36.452\" cy=\"24.924\" r=\"3.366\"></circle> <circle cx=\"5.428\" cy=\"24.924\" r=\"3.366\"></circle>",
  "06": "<g> <line x1=\"25\" y1=\"4.042\" x2=\"25\" y2=\"45.958\"></line> <line x1=\"48\" y1=\"25\" x2=\"2\" y2=\"25\"></line> </g> <g> <circle cx=\"36.914\" cy=\"14.754\" r=\"4.133\"></circle> <circle cx=\"13.086\" cy=\"35.246\" r=\"4.133\"></circle> <circle cx=\"13.086\" cy=\"15.214\" r=\"4.133\"></circle> <circle cx=\"36.914\" cy=\"35.246\" r=\"4.133\"></circle> </g>",
  "07": "<g> <line x1=\"25\" y1=\"14.728\" x2=\"25\" y2=\"2\"></line> <line x1=\"25\" y1=\"48\" x2=\"25\" y2=\"35.272\"></line> </g> <g> <line x1=\"35.272\" y1=\"25\" x2=\"48\" y2=\"25\"></line> <line x1=\"2\" y1=\"25\" x2=\"14.728\" y2=\"25\"></line> </g> <g> <line x1=\"32.264\" y1=\"32.264\" x2=\"41.263\" y2=\"41.263\"></line> <line x1=\"8.737\" y1=\"8.737\" x2=\"17.515\" y2=\"17.515\"></line> </g> <g> <line x1=\"28.965\" y1=\"34.665\" x2=\"33.728\" y2=\"46.279\"></line> <line x1=\"16.272\" y1=\"3.721\" x2=\"21.112\" y2=\"15.521\"></line> </g> <g> <line x1=\"20.903\" y1=\"34.795\" x2=\"16.125\" y2=\"46.219\"></line> <line x1=\"33.875\" y1=\"3.781\" x2=\"28.965\" y2=\"15.521\"></line> </g> <g> <line x1=\"15.68\" y1=\"28.823\" x2=\"3.721\" y2=\"33.729\"></line> <line x1=\"46.279\" y1=\"16.271\" x2=\"34.503\" y2=\"21.102\"></line> </g> <g> <line x1=\"15.68\" y1=\"21.102\" x2=\"3.781\" y2=\"16.125\"></line> <line x1=\"46.219\" y1=\"33.875\" x2=\"34.503\" y2=\"28.975\"></line> </g> <g> <line x1=\"17.736\" y1=\"32.264\" x2=\"8.737\" y2=\"41.263\"></line> <line x1=\"41.263\" y1=\"8.737\" x2=\"32.264\" y2=\"17.736\"></line> </g>",
  "08": "<ellipse cx=\"25\" cy=\"39.635\" rx=\"23\" ry=\"8.124\"></ellipse> <ellipse cx=\"25\" cy=\"29.939\" rx=\"18.554\" ry=\"6.554\"></ellipse> <ellipse cx=\"25\" cy=\"20.852\" rx=\"14.967\" ry=\"5.287\"></ellipse> <circle cx=\"25\" cy=\"9.941\" r=\"7.7\"></circle>",
  "09": "<circle cx=\"25\" cy=\"24.875\" r=\"23\"></circle> <circle cx=\"25.176\" cy=\"32.454\" r=\"15.359\"></circle> <circle cx=\"25.176\" cy=\"38.823\" r=\"9.303\"></circle> <circle cx=\"24.924\" cy=\"44.067\" r=\"3.366\"></circle>",
  "10": "<polygon points=\"36.5 5.081 13.5 5.081 2 25 13.5 44.919 36.5 44.919 48 25 36.5 5.081\"></polygon> <polygon points=\"25.41 25 13.91 44.919 36.91 44.919 25.41 25\"></polygon>",
  "11": "<ellipse cx=\"25\" cy=\"38.726\" rx=\"23\" ry=\"6.863\"></ellipse> <ellipse cx=\"25\" cy=\"31.863\" rx=\"23\" ry=\"6.863\"></ellipse> <ellipse cx=\"25\" cy=\"25\" rx=\"23\" ry=\"6.863\"></ellipse> <ellipse cx=\"25\" cy=\"18.137\" rx=\"23\" ry=\"6.863\"></ellipse> <ellipse cx=\"25\" cy=\"11.274\" rx=\"23\" ry=\"6.863\"></ellipse>",
  "12": "<polygon points=\"46.68 12.121 24.655 22.57 3.32 12.449 25.345 2 46.68 12.121\"></polygon> <polygon points=\"46.68 20.598 24.655 31.047 3.32 20.925 25.345 10.477 46.68 20.598\"></polygon> <polygon points=\"46.68 29.075 24.655 39.523 3.32 29.402 25.345 18.953 46.68 29.075\"></polygon> <polygon points=\"46.68 37.551 24.655 48 3.32 37.879 25.345 27.43 46.68 37.551\"></polygon>",
  "13": "<circle cx=\"16.684\" cy=\"16.668\" r=\"14.668\"></circle> <circle cx=\"33.316\" cy=\"16.668\" r=\"14.668\"></circle> <circle cx=\"16.684\" cy=\"33.332\" r=\"14.668\"></circle> <circle cx=\"33.316\" cy=\"33.332\" r=\"14.668\"></circle>",
  "14": "<g> <g> <line x1=\"25\" y1=\"8.553\" x2=\"25\" y2=\"2\"></line> <line x1=\"25\" y1=\"48\" x2=\"25\" y2=\"41.447\"></line> </g> <g> <line x1=\"41.447\" y1=\"25\" x2=\"48\" y2=\"25\"></line> <line x1=\"2\" y1=\"25\" x2=\"8.553\" y2=\"25\"></line> </g> <g> <line x1=\"36.63\" y1=\"36.63\" x2=\"41.263\" y2=\"41.263\"></line> <line x1=\"8.737\" y1=\"8.737\" x2=\"13.37\" y2=\"13.37\"></line> </g> <g> <line x1=\"31.241\" y1=\"40.216\" x2=\"33.728\" y2=\"46.279\"></line> <line x1=\"16.272\" y1=\"3.721\" x2=\"18.759\" y2=\"9.784\"></line> </g> <g> <line x1=\"18.654\" y1=\"40.173\" x2=\"16.125\" y2=\"46.219\"></line> <line x1=\"33.875\" y1=\"3.781\" x2=\"31.346\" y2=\"9.827\"></line> </g> <g> <line x1=\"9.784\" y1=\"31.241\" x2=\"3.721\" y2=\"33.729\"></line> <line x1=\"46.279\" y1=\"16.271\" x2=\"40.216\" y2=\"18.759\"></line> </g> <g> <line x1=\"9.827\" y1=\"18.654\" x2=\"3.781\" y2=\"16.125\"></line> <line x1=\"46.219\" y1=\"33.875\" x2=\"40.173\" y2=\"31.346\"></line> </g> <g> <line x1=\"13.371\" y1=\"36.63\" x2=\"8.737\" y2=\"41.263\"></line> <line x1=\"41.263\" y1=\"8.737\" x2=\"36.629\" y2=\"13.37\"></line> </g> </g> <g> <g> <line x1=\"26.179\" y1=\"20.656\" x2=\"27.809\" y2=\"14.652\"></line> <line x1=\"22.191\" y1=\"35.348\" x2=\"23.747\" y2=\"29.323\"></line> </g> <g> <line x1=\"29.344\" y1=\"26.179\" x2=\"35.348\" y2=\"27.809\"></line> <line x1=\"14.652\" y1=\"22.191\" x2=\"20.657\" y2=\"23.821\"></line> </g> <g> <line x1=\"27.237\" y1=\"28.905\" x2=\"30.331\" y2=\"34.303\"></line> <line x1=\"19.669\" y1=\"15.697\" x2=\"22.762\" y2=\"21.095\"></line> </g> <g> <line x1=\"25.562\" y1=\"29.5\" x2=\"26.328\" y2=\"35.64\"></line> <line x1=\"23.672\" y1=\"14.36\" x2=\"24.438\" y2=\"20.5\"></line> </g> <g> <line x1=\"22.191\" y1=\"28.61\" x2=\"18.416\" y2=\"33.462\"></line> <line x1=\"31.584\" y1=\"16.538\" x2=\"27.707\" y2=\"21.495\"></line> </g> <g> <line x1=\"20.5\" y1=\"25.562\" x2=\"14.36\" y2=\"26.328\"></line> <line x1=\"35.64\" y1=\"23.672\" x2=\"29.5\" y2=\"24.438\"></line> </g> <g> <line x1=\"21.39\" y1=\"22.191\" x2=\"16.538\" y2=\"18.416\"></line> <line x1=\"33.462\" y1=\"31.584\" x2=\"28.552\" y2=\"27.764\"></line> </g> <g> <line x1=\"21.028\" y1=\"27.276\" x2=\"15.697\" y2=\"30.331\"></line> <line x1=\"34.303\" y1=\"19.669\" x2=\"28.905\" y2=\"22.763\"></line> </g> </g>",
  "15": "<circle cx=\"25\" cy=\"25\" r=\"23\"></circle> <line x1=\"41.153\" y1=\"8.847\" x2=\"8.874\" y2=\"41.126\"></line> <line x1=\"41.153\" y1=\"41.126\" x2=\"8.874\" y2=\"8.847\"></line>",
  "16": "<polygon points=\"25 17.9 2 43.105 48 43.105 25 17.9\"></polygon> <circle cx=\"25\" cy=\"17.9\" r=\"11.006\"></circle>",
  "17": "<rect x=\"16.868\" y=\"16.868\" width=\"16.263\" height=\"16.263\" transform=\"translate(25 -10.355) rotate(45)\"></rect> <rect x=\"16.868\" y=\"5.368\" width=\"16.263\" height=\"16.263\" transform=\"translate(16.868 -13.724) rotate(45)\"></rect> <rect x=\"16.868\" y=\"28.368\" width=\"16.263\" height=\"16.263\" transform=\"translate(33.132 -6.987) rotate(45)\"></rect> <rect x=\"28.368\" y=\"16.868\" width=\"16.263\" height=\"16.263\" transform=\"translate(28.368 -18.487) rotate(45)\"></rect> <rect x=\"5.368\" y=\"16.868\" width=\"16.263\" height=\"16.263\" transform=\"translate(21.632 -2.224) rotate(45)\"></rect>",
  "18": "<circle cx=\"25\" cy=\"25\" r=\"23\"></circle> <circle cx=\"25\" cy=\"25\" r=\"13.227\"></circle> <circle cx=\"25\" cy=\"25\" r=\"4.553\"></circle>",
  "19": "<line x1=\"2\" y1=\"5.833\" x2=\"48\" y2=\"5.833\"></line> <line x1=\"2\" y1=\"13.5\" x2=\"48\" y2=\"13.5\"></line> <line x1=\"2\" y1=\"21.167\" x2=\"48\" y2=\"21.167\"></line> <line x1=\"2\" y1=\"28.833\" x2=\"48\" y2=\"28.833\"></line> <line x1=\"2\" y1=\"36.5\" x2=\"48\" y2=\"36.5\"></line> <line x1=\"2\" y1=\"44.167\" x2=\"48\" y2=\"44.167\"></line>",
  "20": "<rect x=\"3\" y=\"3\" width=\"44\" height=\"44\"></rect> <line x1=\"47\" y1=\"3\" x2=\"3\" y2=\"47\"></line> <line x1=\"47\" y1=\"47\" x2=\"3\" y2=\"3\"></line>",
  "21": "<path d=\"M2,2c12.703,0,23,10.297,23,23S14.703,48,2,48\"></path> <path d=\"M2.342,7.464c9.685,0,17.536,7.851,17.536,17.536s-7.851,17.536-17.536,17.536\"></path> <path d=\"M3.112,13.882c6.246,0,11.309,5.063,11.309,11.309s-5.063,11.309-11.309,11.309\"></path> <path d=\"M48,48c-12.703,0-23-10.297-23-23,0-12.703,10.297-23,23-23\"></path> <path d=\"M47.658,42.536c-9.685,0-17.536-7.851-17.536-17.536s7.851-17.536,17.536-17.536\"></path> <path d=\"M46.888,36.118c-6.246,0-11.309-5.063-11.309-11.309,0-6.246,5.063-11.309,11.309-11.309\"></path>",
  "22": "<path d=\"M2,36.5c0-12.703,10.297-23,23-23s23,10.297,23,23\"></path> <path d=\"M13.5,36.5c0-6.351,5.149-11.5,11.5-11.5s11.5,5.149,11.5,11.5\"></path>",
  "23": "<circle cx=\"13.5\" cy=\"13.5\" r=\"11.5\"></circle> <circle cx=\"36.5\" cy=\"13.5\" r=\"11.5\"></circle> <circle cx=\"13.5\" cy=\"36.5\" r=\"11.5\"></circle> <circle cx=\"36.5\" cy=\"36.5\" r=\"11.5\"></circle>",
  "24": "<polyline points=\"22.742 -.342 23.576 9.86 33.775 10.691 34.611 20.895 44.818 21.734 45.658 31.942\"></polyline> <polyline points=\"18.142 4.258 18.976 14.46 29.175 15.291 30.011 25.495 40.219 26.334 41.058 36.542\"></polyline> <polyline points=\"13.542 8.858 14.376 19.06 24.575 19.891 25.411 30.095 35.619 30.934 36.458 41.142\"></polyline> <polyline points=\"8.942 13.458 9.776 23.66 19.975 24.491 20.811 34.695 31.019 35.534 31.858 45.742\"></polyline> <polyline points=\"4.342 18.058 5.176 28.26 15.375 29.091 16.211 39.295 26.419 40.134 27.258 50.342\"></polyline>",
  "25": "<circle cx=\"25\" cy=\"25\" r=\"23\"></circle> <ellipse cx=\"25\" cy=\"25\" rx=\"11.247\" ry=\"23\"></ellipse> <ellipse cx=\"25\" cy=\"25\" rx=\"23\" ry=\"6.863\"></ellipse>",
  "26": "<polygon points=\"44.919 25 5.081 2 5.081 48 44.919 25\"></polygon> <polygon points=\"27.191 25 5.081 12.235 5.081 37.765 27.191 25\"></polygon> <polygon points=\"15.131 25 5.081 19.198 5.081 30.802 15.131 25\"></polygon>",
  "27": "<ellipse cx=\"25\" cy=\"25\" rx=\"6.802\" ry=\"23\"></ellipse> <ellipse cx=\"25\" cy=\"25\" rx=\"23\" ry=\"6.802\"></ellipse> <circle cx=\"40.414\" cy=\"8.847\" r=\"5.12\"></circle> <circle cx=\"10.364\" cy=\"41.106\" r=\"5.12\"></circle>",
  "28": "<circle cx=\"25\" cy=\"25\" r=\"16.668\"></circle> <circle cx=\"25\" cy=\"25\" r=\"7.191\"></circle> <line x1=\"2\" y1=\"41.668\" x2=\"48\" y2=\"41.668\"></line>"
};

const SvcIcon = ({ name, stroke = "#0E1F3E", strokeWidth = 1.8, size = "100%" }) => {
  const id = "svc-" + name;
  const cleaned = SVC_ICONS[id] || SVC_ICONS[name] || "";
  return (
    <svg viewBox="0 0 50 50" width={size} height={size} aria-hidden="true"
      style={{
        // every shape inside renders as a stroked line in the given colour
        // (the source files leave them unstyled, so this is where colour lives)
      }}
      dangerouslySetInnerHTML={{
        __html: cleaned
          .replace(/<(path|circle|rect|ellipse|line|polyline|polygon)\b/g,
            `<$1 fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"`)
      }}
    />
  );
};

window.SVC_ICONS = SVC_ICONS;
window.SvcIcon = SvcIcon;