import type { ReactNode, SVGProps } from "react";

/**
 * Line icons for the "Possibilities Across Every System" capability cards.
 * Growth icons mirror the original HTML reference exactly; the other systems
 * use fitting lucide-style icons (the reference had none for those tabs).
 */
const ICONS: Record<string, ReactNode> = {
  activity: <path d="M22 12h-4l-3 9L9 3l-3 9H2" />,
  search: (
    <>
      <circle cx="11" cy="11" r="8" />
      <path d="m21 21-4.35-4.35" />
    </>
  ),
  layers: (
    <>
      <path d="M12 2 2 7l10 5 10-5z" />
      <path d="m2 17 10 5 10-5" />
      <path d="m2 12 10 5 10-5" />
    </>
  ),
  card: (
    <>
      <rect x="1" y="4" width="22" height="16" rx="2" />
      <path d="M1 10h22" />
    </>
  ),
  users: (
    <>
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
    </>
  ),
  velocity: (
    <>
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <path d="m7 10 5 5 5-5" />
      <path d="M12 15V3" />
    </>
  ),
  trending: (
    <>
      <path d="M3 3v18h18" />
      <path d="m19 9-5 5-4-4-3 3" />
    </>
  ),
  bars: (
    <>
      <path d="M18 20V10" />
      <path d="M12 20V4" />
      <path d="M6 20v-6" />
    </>
  ),
  clock: (
    <>
      <circle cx="12" cy="12" r="10" />
      <path d="M12 8v4l3 3" />
    </>
  ),
  mail: (
    <>
      <rect x="2" y="4" width="20" height="16" rx="2" />
      <path d="m22 7-10 6L2 7" />
    </>
  ),
  heart: <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1.1-1a5.5 5.5 0 1 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8z" />,
  check: (
    <>
      <circle cx="12" cy="12" r="10" />
      <path d="m8.5 12 2.5 2.5 4.5-5" />
    </>
  ),
  megaphone: (
    <>
      <path d="m3 11 16-5v12L3 14z" />
      <path d="M11.5 16.5a3 3 0 1 1-5.6-1.5" />
    </>
  ),
  sparkles: <path d="M12 2l2.2 6.6L21 11l-6.8 2.4L12 20l-2.2-6.6L3 11l6.8-2.4z" />,
  route: (
    <>
      <circle cx="6" cy="19" r="3" />
      <circle cx="18" cy="5" r="3" />
      <path d="M9 19h6a3 3 0 0 0 3-3V8" />
    </>
  ),
  message: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />,
  grid: (
    <>
      <rect x="3" y="3" width="7" height="7" rx="1" />
      <rect x="14" y="3" width="7" height="7" rx="1" />
      <rect x="14" y="14" width="7" height="7" rx="1" />
      <rect x="3" y="14" width="7" height="7" rx="1" />
    </>
  ),
  workflow: (
    <>
      <path d="M6 3v12" />
      <circle cx="18" cy="6" r="3" />
      <circle cx="6" cy="18" r="3" />
      <path d="M18 9a9 9 0 0 1-9 9" />
    </>
  ),
  gauge: (
    <>
      <path d="M12 14l4-4" />
      <path d="M3.3 19a10 10 0 1 1 17.4 0" />
    </>
  ),
  shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
  coins: (
    <>
      <circle cx="9" cy="9" r="6" />
      <path d="M18.1 10.4A6 6 0 1 1 11 18" />
    </>
  ),
  scale: (
    <>
      <path d="M12 3v18" />
      <path d="M5 7h14" />
      <path d="m5 7-3 6h6z" />
      <path d="m19 7-3 6h6z" />
    </>
  ),
  expand: (
    <>
      <path d="M3 8V5a2 2 0 0 1 2-2h3" />
      <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
      <path d="M3 16v3a2 2 0 0 0 2 2h3" />
      <path d="M21 16v3a2 2 0 0 1-2 2h-3" />
    </>
  ),
  cpu: (
    <>
      <rect x="4" y="4" width="16" height="16" rx="2" />
      <rect x="9" y="9" width="6" height="6" />
      <path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3" />
    </>
  ),
  database: (
    <>
      <ellipse cx="12" cy="5" rx="9" ry="3" />
      <path d="M3 5v14a9 3 0 0 0 18 0V5" />
      <path d="M3 12a9 3 0 0 0 18 0" />
    </>
  ),
  plug: (
    <>
      <path d="M9 2v6M15 2v6" />
      <path d="M7 8h10v3a5 5 0 0 1-10 0z" />
      <path d="M12 16v6" />
    </>
  ),
  cog: (
    <>
      <circle cx="12" cy="12" r="3" />
      <path d="M12 1v4M12 19v4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M1 12h4M19 12h4M4.2 19.8l2.8-2.8M17 7l2.8-2.8" />
    </>
  ),
  crystal: (
    <>
      <path d="M12 3 4 9l8 12 8-12z" />
      <path d="M4 9h16" />
      <path d="m9 9 3 12M15 9l-3 12" />
    </>
  ),
  building: (
    <>
      <rect x="4" y="2" width="16" height="20" rx="1" />
      <path d="M9 22v-4h6v4" />
      <path d="M9 6h.01M14 6h.01M9 10h.01M14 10h.01M9 14h.01M14 14h.01" />
    </>
  ),
  layout: (
    <>
      <rect x="3" y="3" width="18" height="18" rx="2" />
      <path d="M3 9h18M9 21V9" />
    </>
  ),
  compass: (
    <>
      <circle cx="12" cy="12" r="10" />
      <path d="m16 8-6 2-2 6 6-2z" />
    </>
  ),
};

/** capability title → icon name */
const MAP: Record<string, string> = {
  // Growth (exact HTML reference)
  "Growth Intelligence": "activity",
  "Market Discovery": "search",
  "Partnership Ecosystems": "layers",
  "Revenue Visibility": "card",
  "Acquisition Intelligence": "users",
  "Pipeline Velocity": "velocity",
  "Demand Generation": "trending",
  "Content Leverage": "bars",
  "Brand Authority": "clock",
  "Outbound Intelligence": "mail",
  // Customer
  "Customer Intelligence": "users",
  "Loyalty Architecture": "heart",
  "Onboarding Excellence": "sparkles",
  "Retention Signals": "activity",
  "Expansion Pathways": "trending",
  "Advocacy Loops": "megaphone",
  Personalization: "check",
  "Journey Mapping": "route",
  "Feedback Intelligence": "message",
  "Omnichannel Coherence": "grid",
  // Operations
  "Operational Intelligence": "activity",
  "Workflow Optimization": "workflow",
  "Capacity Planning": "gauge",
  "Performance Visibility": "bars",
  "Governance Frameworks": "shield",
  "Cost Intelligence": "coins",
  "Quality Assurance": "check",
  "Resource Allocation": "scale",
  "Risk Visibility": "gauge",
  "Scalability Architecture": "expand",
  // Technology
  "AI Readiness": "cpu",
  "Business Intelligence": "bars",
  "Data Infrastructure": "database",
  "Integration Architecture": "plug",
  "Automation Intelligence": "cog",
  "Predictive Capabilities": "crystal",
  "Enterprise Intelligence": "building",
  "Security Posture": "shield",
  "Platform Strategy": "layout",
  "Digital Maturity": "compass",
};

export function CapabilityIcon({
  title,
  ...props
}: { title: string } & SVGProps<SVGSVGElement>) {
  const icon = ICONS[MAP[title] ?? "activity"] ?? ICONS.activity;
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      {icon}
    </svg>
  );
}