// Icons — flat line style, navy stroke
const Icon = {
  // Header / nav
  Menu: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}>
      <line x1="4" y1="7" x2="20" y2="7"/>
      <line x1="4" y1="12" x2="20" y2="12"/>
      <line x1="4" y1="17" x2="20" y2="17"/>
    </svg>
  ),
  Close: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}>
      <line x1="6" y1="6" x2="18" y2="18"/>
      <line x1="18" y1="6" x2="6" y2="18"/>
    </svg>
  ),
  ArrowRight: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="13 6 19 12 13 18"/>
    </svg>
  ),
  ChevronRight: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="9 6 15 12 9 18"/>
    </svg>
  ),
  Check: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="5 13 10 18 19 7"/>
    </svg>
  ),
  Pin: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z"/>
      <circle cx="12" cy="9" r="2.5"/>
    </svg>
  ),
  Mail: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <polyline points="3 7 12 13 21 7"/>
    </svg>
  ),
  Phone: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/>
    </svg>
  ),
  X: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
    </svg>
  ),
  Coin: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="9"/>
      <path d="M14.5 9h-4a1.5 1.5 0 0 0 0 3h3a1.5 1.5 0 0 1 0 3h-4M12 7v1m0 8v1"/>
    </svg>
  ),

  // Reason icons
  ClockCheck: (p) => (
    <svg width="44" height="44" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="28" cy="32" r="18"/>
      <polyline points="28 22 28 32 36 36"/>
      <circle cx="48" cy="48" r="10" fill="#fff"/>
      <polyline points="43 48 47 52 53 44"/>
    </svg>
  ),
  Diamond: (p) => (
    <svg width="44" height="44" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M16 24 L32 12 L48 24 L32 54 Z"/>
      <line x1="16" y1="24" x2="48" y2="24"/>
      <line x1="24" y1="24" x2="32" y2="54"/>
      <line x1="40" y1="24" x2="32" y2="54"/>
      <line x1="32" y1="12" x2="24" y2="24"/>
      <line x1="32" y1="12" x2="40" y2="24"/>
    </svg>
  ),
  Handshake: (p) => (
    <svg width="44" height="44" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M8 36 L18 26 L26 30 L32 24 L42 34 L34 42 L30 38 L24 44 Z"/>
      <path d="M42 34 L48 28 L56 36 L48 44 L42 38"/>
      <path d="M26 30 L32 24 L40 28"/>
    </svg>
  ),

  // Pricing icons
  Monitor: (p) => (
    <svg width="44" height="44" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="8" y="12" width="48" height="32" rx="2"/>
      <line x1="8" y1="38" x2="56" y2="38"/>
      <line x1="24" y1="52" x2="40" y2="52"/>
      <line x1="32" y1="44" x2="32" y2="52"/>
    </svg>
  ),
  Headset: (p) => (
    <svg width="44" height="44" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 36 v-2 a20 20 0 0 1 40 0 v2"/>
      <rect x="8" y="36" width="10" height="16" rx="3"/>
      <rect x="46" y="36" width="10" height="16" rx="3"/>
      <path d="M52 52 v2 a4 4 0 0 1 -4 4 h-8"/>
      <circle cx="36" cy="58" r="3"/>
    </svg>
  ),

  // Flow icons
  Chat: (p) => (
    <svg width="32" height="32" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M8 10 h32 a2 2 0 0 1 2 2 v18 a2 2 0 0 1 -2 2 H22 l-8 6 v-6 h-6 a2 2 0 0 1 -2 -2 V12 a2 2 0 0 1 2 -2 z"/>
      <circle cx="18" cy="21" r="1.5" fill="currentColor"/>
      <circle cx="24" cy="21" r="1.5" fill="currentColor"/>
      <circle cx="30" cy="21" r="1.5" fill="currentColor"/>
    </svg>
  ),
  Clipboard: (p) => (
    <svg width="32" height="32" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="10" y="8" width="28" height="34" rx="2"/>
      <rect x="17" y="4" width="14" height="8" rx="2" fill="#fff"/>
      <line x1="16" y1="20" x2="32" y2="20"/>
      <line x1="16" y1="26" x2="32" y2="26"/>
      <line x1="16" y1="32" x2="26" y2="32"/>
    </svg>
  ),
  Bulb: (p) => (
    <svg width="32" height="32" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M24 6 a12 12 0 0 1 8 21 v5 H16 v-5 a12 12 0 0 1 8 -21 z"/>
      <line x1="18" y1="36" x2="30" y2="36"/>
      <line x1="20" y1="40" x2="28" y2="40"/>
      <line x1="24" y1="6" x2="24" y2="2"/>
      <line x1="6" y1="20" x2="2" y2="20"/>
      <line x1="46" y1="20" x2="42" y2="20"/>
    </svg>
  ),
  MonitorEdit: (p) => (
    <svg width="32" height="32" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="4" y="10" width="34" height="22" rx="2"/>
      <line x1="18" y1="38" x2="24" y2="38"/>
      <line x1="21" y1="32" x2="21" y2="38"/>
      <path d="M30 26 l10 -10 l4 4 l-10 10 l-5 1 z"/>
    </svg>
  ),
  Globe: (p) => (
    <svg width="32" height="32" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="24" cy="24" r="18"/>
      <ellipse cx="24" cy="24" rx="8" ry="18"/>
      <line x1="6" y1="24" x2="42" y2="24"/>
      <path d="M8 14 q16 6 32 0"/>
      <path d="M8 34 q16 -6 32 0"/>
    </svg>
  ),
};

window.Icon = Icon;
