// Tiny SVG icons used throughout the page.
const Icon = {
  Arrow: ({size=14}) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M3 7h8m-3-3 3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  ArrowBack: ({size=14}) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M11 7H3m3-3-3 3 3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Check: ({size=10}) => (
    <svg width={size} height={size} viewBox="0 0 10 10" fill="none">
      <path d="m2 5 2 2 4-4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Up: ({size=10}) => (
    <svg width={size} height={size} viewBox="0 0 10 10" fill="none">
      <path d="m2 6 3-3 3 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  X: ({size=10}) => (
    <svg width={size} height={size} viewBox="0 0 10 10" fill="none">
      <path d="m2.5 2.5 5 5m0-5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Lock: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
      <rect x="3.5" y="7.5" width="11" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
      <path d="M6 7.5V5a3 3 0 0 1 6 0v2.5" stroke="currentColor" strokeWidth="1.4"/>
    </svg>
  ),
  // ---- Reassurance / how-it-works ----
  Hold: ({size=18}) => (
    // Keep your shares — a hand holding a coin
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
      <circle cx="9" cy="6" r="3.2" stroke="currentColor" strokeWidth="1.3"/>
      <path d="M2.5 15.5c1-2 3.4-3 6.5-3s5.5 1 6.5 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
    </svg>
  ),
  NoSale: ({size=18}) => (
    // No forced sale
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
      <path d="M3 9h12M3 5h12M3 13h8" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
      <path d="m4 4 10 10" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
    </svg>
  ),
  Bolt: ({size=18}) => (
    // Fast funding
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
      <path d="M9.5 2 4 10h4l-1.5 6 6-8H8.5L9.5 2Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
    </svg>
  ),
  Building: ({size=18}) => (
    // Employer-sponsored
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
      <path d="M3 15V6l5-3 5 3v9" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M6 15v-3h4v3M6 8h1M11 8h1M6 11h1M11 11h1M14 15V9l1 .5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
    </svg>
  ),
  Shield: ({size=18}) => (
    // No margin call / your line is fixed
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
      <path d="M9 1.5 2.5 4v5c0 3.5 2.6 6 6.5 7.5 3.9-1.5 6.5-4 6.5-7.5V4L9 1.5Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
      <path d="m6.4 9 1.8 1.8L12 6.8" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  // ---- Use cases ----
  Receipt: ({size=22}) => (
    // Tax bill / AMT
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M5 21V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v17l-2.5-1.5L14 21l-2-1.5L10 21l-2.5-1.5L5 21Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
      <path d="M9 8h6M9 12h6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  Options: ({size=22}) => (
    // Exercise / buy options
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M4 18 9 12l3.5 3L20 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M15 6h5v5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Diversify: ({size=22}) => (
    // Diversify
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.4"/>
      <path d="M12 12V3M12 12l7.8 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  Bridge: ({size=22}) => (
    // Bridge to a liquidity event
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M3 16c2.5 0 3-4 3-4s.5 4 3 4 3-4 3-4 .5 4 3 4 3-4 3-4 .5 4 3 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M3 16v3M21 16v3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  Plus: ({size=14}) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M7 3v8M3 7h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  Sparkle: ({size=12}) => (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
      <path d="M6 1v3m0 4v3M1 6h3m4 0h3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
};

window.Icon = Icon;
