// Monoline icon set for Monifest.ai — 24x24, stroke-based, currentColor
const Icon = ({ children, size = 22, stroke = 1.4 }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    {children}
  </svg>
);

// Club — a laurel-ish crown / keytag (luxury access)
const IconClub = (props) => (
  <Icon {...props}>
    <path d="M3 10 L7 14 L12 6 L17 14 L21 10 L20 18 H4 Z" />
    <circle cx="12" cy="11" r="0.6" fill="currentColor" stroke="none" />
  </Icon>
);

// Round-up — coin with up arrow
const IconRoundup = (props) => (
  <Icon {...props}>
    <circle cx="12" cy="13" r="6.5" />
    <path d="M12 16 V10" />
    <path d="M9.5 12 L12 9.5 L14.5 12" />
    <path d="M5 5 L7.2 6.5" />
    <path d="M19 5 L16.8 6.5" />
  </Icon>
);

// Nium SG — two-way exchange in a ring
const IconNium = (props) => (
  <Icon {...props}>
    <circle cx="12" cy="12" r="8.5" />
    <path d="M7.5 10 H15 L13 8" />
    <path d="M16.5 14 H9 L11 16" />
  </Icon>
);

// Goal Investor — target with route line
const IconGoal = (props) => (
  <Icon {...props}>
    <circle cx="14" cy="10" r="5.5" />
    <circle cx="14" cy="10" r="2.2" />
    <path d="M3 20 C 6 18, 8 14, 14 10" />
  </Icon>
);

// Family Investing — branching tree
const IconFamilyInvest = (props) => (
  <Icon {...props}>
    <path d="M12 20 V13" />
    <path d="M12 13 C 12 10, 7 10, 7 7" />
    <path d="M12 13 C 12 10, 17 10, 17 7" />
    <circle cx="12" cy="13" r="1.2" />
    <circle cx="7" cy="6" r="1.6" />
    <circle cx="17" cy="6" r="1.6" />
    <circle cx="12" cy="20" r="1.6" />
  </Icon>
);

// Family Banking — house with line under
const IconFamilyBank = (props) => (
  <Icon {...props}>
    <path d="M4 11 L12 5 L20 11" />
    <path d="M6 10 V19 H18 V10" />
    <path d="M10 19 V14 H14 V19" />
    <path d="M3 21 H21" />
  </Icon>
);

// JPM Card — card with chip + waves
const IconCardJPM = (props) => (
  <Icon {...props}>
    <rect x="3" y="6" width="18" height="13" rx="2" />
    <rect x="6" y="10" width="3.5" height="2.5" rx="0.6" />
    <path d="M14 15 H18" />
    <path d="M6 16 H10" />
  </Icon>
);

// ZenGo Card — card with shield emblem
const IconCardZen = (props) => (
  <Icon {...props}>
    <rect x="3" y="6" width="18" height="13" rx="2" />
    <path d="M15 9 L18 10 V13 C 18 14.6, 16.5 15.6, 15 16.3 C 13.5 15.6, 12 14.6, 12 13 V10 Z" />
    <path d="M6 11 H10" />
    <path d="M6 14 H9" />
  </Icon>
);

// UI bits
const IconSearch = ({ size = 14 }) => (
  <Icon size={size} stroke={1.6}>
    <circle cx="11" cy="11" r="6" />
    <path d="M20 20 L15.5 15.5" />
  </Icon>
);

const IconSun = ({ size = 14 }) => (
  <Icon size={size} stroke={1.6}>
    <circle cx="12" cy="12" r="4" />
    <path d="M12 3 V5 M12 19 V21 M3 12 H5 M19 12 H21 M5.5 5.5 L6.9 6.9 M17.1 17.1 L18.5 18.5 M5.5 18.5 L6.9 17.1 M17.1 6.9 L18.5 5.5" />
  </Icon>
);

const IconMoon = ({ size = 14 }) => (
  <Icon size={size} stroke={1.6}>
    <path d="M20 14.5 A 8 8 0 1 1 9.5 4 A 6.5 6.5 0 0 0 20 14.5 Z" />
  </Icon>
);

const IconArrow = ({ size = 14 }) => (
  <Icon size={size} stroke={1.4}>
    <path d="M5 12 H19" />
    <path d="M14 7 L19 12 L14 17" />
  </Icon>
);

const IconSparkle = ({ size = 12 }) => (
  <Icon size={size} stroke={1.4}>
    <path d="M12 3 L13.5 10.5 L21 12 L13.5 13.5 L12 21 L10.5 13.5 L3 12 L10.5 10.5 Z" />
  </Icon>
);

// Flamingo — minimal silhouette: head, curved neck, body, leg
const IconFlamingo = ({ size = 14, stroke = 1.5 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M9 5 C 11.5 5, 13 6.5, 13 9 C 13 11, 12 12, 12 13.5 C 12 15, 13.5 16, 16 16 H 19" />
    <path d="M12 13.5 V 21" />
    <path d="M10 21 H 14" />
    <circle cx="8.6" cy="4.6" r="0.7" fill="currentColor" stroke="none" />
    <path d="M8 5.2 L 6.5 5.6" />
  </svg>
);

// Roadmap — horizontal flag/path
const IconRoadmap = ({ size = 18, stroke = 1.4 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M5 4 V 20" />
    <path d="M5 5 H 18 L 16 8 L 18 11 H 5" />
    <circle cx="5" cy="15" r="1" fill="currentColor" stroke="none" />
  </svg>
);

// CMF — bracket / framework
const IconCMF = ({ size = 18, stroke = 1.4 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M8 4 H 5 V 20 H 8" />
    <path d="M16 4 H 19 V 20 H 16" />
    <path d="M10 9 H 14" />
    <path d="M10 13 H 14" />
    <path d="M10 17 H 14" />
  </svg>
);

window.MonifestIcons = {
  Flamingo: IconFlamingo,
  Roadmap: IconRoadmap,
  CMF: IconCMF,
  Club: IconClub,
  Roundup: IconRoundup,
  Nium: IconNium,
  Goal: IconGoal,
  FamilyInvest: IconFamilyInvest,
  FamilyBank: IconFamilyBank,
  CardJPM: IconCardJPM,
  CardZen: IconCardZen,
  Search: IconSearch,
  Sun: IconSun,
  Moon: IconMoon,
  Arrow: IconArrow,
  Sparkle: IconSparkle,
};