/* global React */
const Icon = ({ name, size = 22, stroke = 1.5 }) => {
  const props = {
    width: size, height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };
  switch (name) {
    case "design":
      // Layered artboards with a pen nib — "brand-led design"
      return (
        <svg {...props}>
          <rect x="3" y="3" width="13" height="13" rx="2" />
          <rect x="8" y="8" width="13" height="13" rx="2" fill="currentColor" fillOpacity="0.14" stroke="currentColor" />
          <path d="M14 14l3 3" />
          <circle cx="18.5" cy="18.5" r="1.4" fill="currentColor" stroke="none" />
        </svg>
      );
    case "build":
      // Stacked code blocks with brackets — "full-package builds"
      return (
        <svg {...props}>
          <rect x="3" y="4" width="18" height="16" rx="2.5" />
          <path d="M3 9h18" />
          <circle cx="6" cy="6.5" r="0.6" fill="currentColor" stroke="none" />
          <circle cx="8.5" cy="6.5" r="0.6" fill="currentColor" stroke="none" />
          <path d="M9 13.5l-2 2 2 2M15 13.5l2 2-2 2M13 13l-2 5" />
        </svg>
      );
    case "growth":
      // Bar chart climbing with an arrow trail — "conversion & growth"
      return (
        <svg {...props}>
          <path d="M3 21h18" />
          <rect x="5" y="14" width="3" height="6" rx="0.6" fill="currentColor" fillOpacity="0.14" stroke="currentColor" />
          <rect x="10.5" y="10" width="3" height="10" rx="0.6" fill="currentColor" fillOpacity="0.14" stroke="currentColor" />
          <rect x="16" y="6" width="3" height="14" rx="0.6" fill="currentColor" fillOpacity="0.14" stroke="currentColor" />
          <path d="M4 9l5-4 4 3 6-5" />
          <path d="M15 3h4v4" />
        </svg>
      );
    case "consult":
      // Two overlapping chat bubbles — "fractional partner"
      return (
        <svg {...props}>
          <path d="M3 6.5a2.5 2.5 0 0 1 2.5-2.5h8A2.5 2.5 0 0 1 16 6.5v4A2.5 2.5 0 0 1 13.5 13H7l-4 3.5V6.5Z" fill="currentColor" fillOpacity="0.14" stroke="currentColor" />
          <path d="M9 16.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-4l-3 2.2v-2.2H11a2 2 0 0 1-2-2v-3Z" transform="translate(0 -2)" />
        </svg>
      );
    case "arrow":
      return (
        <svg {...props}>
          <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
      );
    case "arrow-out":
      return (
        <svg {...props}>
          <path d="M7 17L17 7M9 7h8v8" />
        </svg>
      );
    case "check":
      return (
        <svg {...props} strokeWidth="2.2">
          <path d="M5 12l4 4L19 6" />
        </svg>
      );
    default:
      return null;
  }
};

window.Icon = Icon;