/**
 * Every icon here is copied verbatim (path data unchanged) from the source
 * design file's own inline SVGs — extracted via the rendered DOM, not
 * recreated by eye. `stroke` defaults to currentColor so callers set the
 * color via a text-* Tailwind class on a wrapping element, matching how the
 * icons pick up var(--teal)/var(--purple)/etc. in the original.
 */
type IconProps = { className?: string; style?: React.CSSProperties };

const base = {
  width: 24,
  height: 24,
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.6,
  strokeLinecap: "round" as const,
  strokeLinejoin: "round" as const
};

export function BriefcaseIcon({ className, style }: IconProps) {
  return (
    <svg {...base} className={className} style={style} aria-hidden="true">
      <rect x="3" y="7" width="18" height="12" rx="2" />
      <path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
      <path d="M3 12h18" />
    </svg>
  );
}

export function GraduationCapIcon({ className, style }: IconProps) {
  return (
    <svg {...base} className={className} style={style} aria-hidden="true">
      <path d="M2 9 12 4l10 5-10 5-10-5Z" />
      <path d="M6 11.5V16c0 1.5 2.7 3 6 3s6-1.5 6-3v-4.5" />
      <path d="M20 9v6" />
    </svg>
  );
}

export function HouseIcon({ className, style }: IconProps) {
  return (
    <svg {...base} className={className} style={style} aria-hidden="true">
      <path d="M3 11 12 4l9 7" />
      <path d="M5 10v9a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1v-9" />
    </svg>
  );
}

export function PeopleIcon({ className, style }: IconProps) {
  return (
    <svg {...base} className={className} style={style} aria-hidden="true">
      <circle cx="9" cy="9" r="3.2" />
      <circle cx="16" cy="10" r="2.6" />
      <path d="M3.5 19c.6-3 3-4.8 5.5-4.8s4.9 1.8 5.5 4.8" />
      <path d="M14.5 14.6c2 .3 3.6 1.9 4 4.4" />
    </svg>
  );
}

export function BarChartIcon({ className, style }: IconProps) {
  return (
    <svg {...base} className={className} style={style} aria-hidden="true">
      <path d="M4 20v-4h4v4" />
      <path d="M10 20v-7h4v7" />
      <path d="M16 20V9h4v11" />
    </svg>
  );
}

export function CoinIcon({ className, style }: IconProps) {
  return (
    <svg {...base} className={className} style={style} aria-hidden="true">
      <circle cx="9" cy="15" r="5.5" />
      <path d="M9 12v6M7 13.3c.4-.8 1.1-1.3 2-1.3 1.2 0 2.1.7 2.1 1.7 0 2.3-4.1 1.4-4.1 3.7 0 1 1 1.7 2 1.7.9 0 1.7-.5 2-1.3" />
      <path d="m15 9 4-4m0 0h-3.2M19 5v3.2" />
    </svg>
  );
}

export function DocumentIcon({ className, style }: IconProps) {
  return (
    <svg {...base} width={20} height={20} className={className} style={style} aria-hidden="true">
      <path d="M6 3h9l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
      <path d="M14 3v5h5" />
    </svg>
  );
}

export function SearchIcon({ className, style }: IconProps) {
  return (
    <svg {...base} width={20} height={20} className={className} style={style} aria-hidden="true">
      <circle cx="10" cy="10" r="6" />
      <path d="m20 20-5.5-5.5" />
    </svg>
  );
}

export function CheckCircleIcon({ className, style }: IconProps) {
  return (
    <svg {...base} width={20} height={20} className={className} style={style} aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <path d="m8 12.5 2.5 2.5L16 9.5" />
    </svg>
  );
}

export function RocketIcon({ className, style }: IconProps) {
  return (
    <svg {...base} width={20} height={20} className={className} style={style} aria-hidden="true">
      <path d="M12 2c3 2 5 6 5 10 0 2-1 4-1 4H8s-1-2-1-4c0-4 2-8 5-10Z" />
      <path d="M9 16l-2 4 4-1" />
      <path d="M15 16l2 4-4-1" />
    </svg>
  );
}

export function PiggyBankIcon({ className, style }: IconProps) {
  return (
    <svg {...base} className={className} style={style} aria-hidden="true">
      <circle cx="8" cy="8" r="4" />
      <circle cx="16" cy="8" r="4" />
      <path d="M4 15c0 2.2 3.6 4 8 4s8-1.8 8-4" />
      <path d="M4 8v7" />
      <path d="M20 8v7" />
    </svg>
  );
}

export function CalendarIcon({ className, style }: IconProps) {
  return (
    <svg {...base} className={className} style={style} aria-hidden="true">
      <rect x="3" y="5" width="18" height="16" rx="2" />
      <path d="M3 10h18" />
      <path d="M8 3v4" />
      <path d="M16 3v4" />
      <circle cx="8" cy="15" r="1.1" fill="currentColor" stroke="none" />
      <circle cx="12" cy="15" r="1.1" fill="currentColor" stroke="none" />
      <circle cx="16" cy="15" r="1.1" fill="currentColor" stroke="none" />
    </svg>
  );
}

/** The overlapping-circles "Venture Studio / Think Tank = NSP" diagram from
 *  the Why NSP section — path/text data copied verbatim from the source. */
export function VentureThinkTankDiagram({ className, style }: IconProps) {
  return (
    <svg
      aria-hidden="true"
      width="230"
      height="148"
      viewBox="0 0 230 148"
      className={className}
    >
      <circle cx="88" cy="74" r="62" fill="none" stroke="var(--teal)" strokeWidth="1.6" opacity=".85" />
      <circle cx="146" cy="74" r="62" fill="none" stroke="var(--purple)" strokeWidth="1.6" opacity=".85" />
      <text x="42" y="45" fontFamily="var(--font-heading), sans-serif" fontSize="11" fontWeight="700" fill="var(--ink)">Venture</text>
      <text x="42" y="59" fontFamily="var(--font-heading), sans-serif" fontSize="11" fontWeight="700" fill="var(--ink)">Studio</text>
      <text x="156" y="45" fontFamily="var(--font-heading), sans-serif" fontSize="11" fontWeight="700" fill="var(--ink)">Think</text>
      <text x="156" y="59" fontFamily="var(--font-heading), sans-serif" fontSize="11" fontWeight="700" fill="var(--ink)">Tank</text>
      <text x="101" y="79" fontFamily="var(--font-heading), sans-serif" fontSize="10" fontWeight="800" letterSpacing="1.5" fill="var(--muted-2)">NSP</text>
    </svg>
  );
}

/** slug -> icon, for the focus-areas collection. */
export const FOCUS_AREA_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
  "small-business-entrepreneurship": BriefcaseIcon,
  "student-financing-educational-access": GraduationCapIcon,
  "housing-homeownership-equity": HouseIcon,
  "faith-based-community-programming": PeopleIcon,
  "workforce-development": BarChartIcon,
  "access-to-capital": CoinIcon
};

/** slug -> icon, for the onboarding-steps collection. */
export const ONBOARDING_STEP_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
  "application-submission": DocumentIcon,
  "review-vetting": SearchIcon,
  "agreement-onboarding": CheckCircleIcon,
  "launch-acceleration": RocketIcon
};

/** slug -> icon, for the portfolio-areas collection. */
export const PORTFOLIO_AREA_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
  "financial-services-financial-literacy": PeopleIcon,
  "higher-education-access": GraduationCapIcon,
  "affordable-housing-economic-mobility": HouseIcon,
  "events-community-economic-development": CalendarIcon
};