/**
 * Hand-drawn SVG icons for each stage. Single 1.5px stroke, slight
 * imperfection, no fills — meant to read as field-journal sketches.
 *
 * Each icon's metaphor traces the lifecycle of a co-op:
 *   Stage 0 — Inquiry: a seed, just starting
 *   Stage 1 — Convene: a sprout, two leaves
 *   Stage 2 — Feasibility: a measuring scale (weighing options)
 *   Stage 3 — Connect: linked hands / chain of cooperation
 *   Stage 4 — Build: a hammer over a foundation
 *   Stage 5 — Stabilize: a basket of harvested produce / open store
 */

interface StageIconProps {
  rank: number;
  className?: string;
}

export function StageIcon({ rank, className }: StageIconProps) {
  const Icon = ICONS[rank] ?? ICONS[0];
  return <Icon className={className} />;
}

const baseProps = {
  viewBox: "0 0 32 32",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.5,
  strokeLinecap: "round" as const,
  strokeLinejoin: "round" as const,
  "aria-hidden": true,
};

const ICONS: Record<number, React.FC<{ className?: string }>> = {
  // 0 — Seed in earth
  0: ({ className }) => (
    <svg {...baseProps} className={className}>
      <path d="M16 22c-3-1-4-3-4-5.5 0-2.2 1.8-4.5 4-5.5 2.2 1 4 3.3 4 5.5 0 2.5-1 4.5-4 5.5Z" />
      <path d="M16 11.5v6" strokeDasharray="0.5 1.5" />
      <path d="M6 24h20" />
      <path d="M9 26.5h2M14 27h1.5M19 26.5h2M23 26h1" />
    </svg>
  ),
  // 1 — Sprout with two leaves
  1: ({ className }) => (
    <svg {...baseProps} className={className}>
      <path d="M16 26V14" />
      <path d="M16 18c-3-2-5-1.5-6-3.5C9 13 10 11 13 11.5c2 .3 3 2.5 3 6.5Z" />
      <path d="M16 16c2.5-1.5 4.5-1 5.5-3 .8-1.6-.5-3-3-2.5-1.7.4-2.5 2.5-2.5 5.5Z" />
      <path d="M9 26h14" />
    </svg>
  ),
  // 2 — Balance scale (weighing feasibility)
  2: ({ className }) => (
    <svg {...baseProps} className={className}>
      <path d="M16 6v18" />
      <path d="M11 26h10" />
      <path d="M8 11h16" />
      <path d="M8 11l-3 6h6l-3-6Z" />
      <path d="M24 11l-3 6h6l-3-6Z" />
    </svg>
  ),
  // 3 — Linked rings
  3: ({ className }) => (
    <svg {...baseProps} className={className}>
      <circle cx="11" cy="16" r="5" />
      <circle cx="21" cy="16" r="5" />
      <path d="M14 12.5q1 .5 2 1.5" opacity="0.6" />
      <path d="M18 18q1 1.5 2 2" opacity="0.6" />
    </svg>
  ),
  // 4 — Hammer over foundation
  4: ({ className }) => (
    <svg {...baseProps} className={className}>
      <path d="M14 6l8 4-2 3-8-4 2-3Z" />
      <path d="M13.5 8.5L6 22l3 1.5 7.5-13" />
      <path d="M5 26h22" />
      <path d="M8 26v-2M14 26v-2M20 26v-2M26 26v-2" opacity="0.5" />
    </svg>
  ),
  // 5 — Storefront with awning
  5: ({ className }) => (
    <svg {...baseProps} className={className}>
      <path d="M5 11h22l-2-3H7l-2 3Z" />
      <path d="M5 11l2 4M9 11l1 4M13 11l.5 4M17 11l.5 4M21 11l1 4M25 11l2 4" opacity="0.5" />
      <path d="M6 26V15" />
      <path d="M26 26V15" />
      <path d="M6 26h20" />
      <rect x="13" y="18" width="6" height="8" />
      <path d="M16 22.5v.5" />
    </svg>
  ),
};