// SVG icon helpers
const Icon = {
  ServicesGlyph: (p) => (
    <svg viewBox="0 0 200 200" fill="none" {...p}>
      <path d="M40 160 L40 90 L100 50 L160 90 L160 160 Z" stroke="currentColor" strokeWidth="3"/>
      <path d="M80 160 L80 120 L120 120 L120 160" stroke="currentColor" strokeWidth="3"/>
      <circle cx="100" cy="50" r="6" fill="currentColor"/>
    </svg>
  ),
  EventsGlyph: (p) => (
    <svg viewBox="0 0 200 200" fill="none" {...p}>
      <rect x="40" y="50" width="120" height="120" rx="10" stroke="currentColor" strokeWidth="3"/>
      <line x1="40" y1="80" x2="160" y2="80" stroke="currentColor" strokeWidth="3"/>
      <line x1="70" y1="35" x2="70" y2="65" stroke="currentColor" strokeWidth="5" strokeLinecap="round"/>
      <line x1="130" y1="35" x2="130" y2="65" stroke="currentColor" strokeWidth="5" strokeLinecap="round"/>
      <circle cx="80" cy="115" r="6" fill="currentColor"/>
      <circle cx="110" cy="115" r="6" fill="currentColor"/>
      <circle cx="140" cy="115" r="6" fill="currentColor"/>
      <circle cx="80" cy="145" r="6" fill="currentColor"/>
    </svg>
  ),
  MarketGlyph: (p) => (
    <svg viewBox="0 0 200 200" fill="none" {...p}>
      <path d="M30 80 L40 50 L160 50 L170 80" stroke="currentColor" strokeWidth="3" strokeLinejoin="round"/>
      <path d="M30 80 L30 95 Q30 105 40 105 Q50 105 50 95 L50 80" stroke="currentColor" strokeWidth="3"/>
      <path d="M50 80 L50 95 Q50 105 60 105 Q70 105 70 95 L70 80" stroke="currentColor" strokeWidth="3"/>
      <path d="M70 80 L70 95 Q70 105 80 105 Q90 105 90 95 L90 80" stroke="currentColor" strokeWidth="3"/>
      <path d="M90 80 L90 95 Q90 105 100 105 Q110 105 110 95 L110 80" stroke="currentColor" strokeWidth="3"/>
      <path d="M110 80 L110 95 Q110 105 120 105 Q130 105 130 95 L130 80" stroke="currentColor" strokeWidth="3"/>
      <path d="M130 80 L130 95 Q130 105 140 105 Q150 105 150 95 L150 80" stroke="currentColor" strokeWidth="3"/>
      <path d="M150 80 L150 95 Q150 105 160 105 Q170 105 170 95 L170 80" stroke="currentColor" strokeWidth="3"/>
      <rect x="40" y="105" width="120" height="60" stroke="currentColor" strokeWidth="3"/>
      <rect x="85" y="125" width="30" height="40" stroke="currentColor" strokeWidth="3"/>
    </svg>
  ),
  Motif: (p) => (
    <svg viewBox="0 0 200 600" fill="none" {...p}>
      {[...Array(10)].map((_, i) => (
        <g key={i} transform={`translate(0 ${i * 60})`}>
          <path d="M 20 0 L 60 30 L 20 60 Z" stroke="currentColor" strokeWidth="2" fill="none"/>
          <path d="M 100 0 L 140 30 L 100 60 Z" stroke="currentColor" strokeWidth="2" fill="none"/>
          <circle cx="40" cy="30" r="2" fill="currentColor"/>
          <circle cx="120" cy="30" r="2" fill="currentColor"/>
        </g>
      ))}
    </svg>
  ),
  Mail: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}>
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <path d="M3 7 L12 13 L21 7"/>
    </svg>
  ),
  Flag: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}>
      <path d="M4 3 L4 21" strokeLinecap="round"/>
      <path d="M4 4 L18 4 L15 8 L18 12 L4 12" strokeLinejoin="round"/>
    </svg>
  ),
  Apple: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M17.5 12.7c0-3 2.5-4.4 2.6-4.5-1.4-2.1-3.6-2.4-4.4-2.4-1.9-.2-3.7 1.1-4.6 1.1s-2.4-1.1-4-1c-2 0-3.9 1.2-4.9 3-2.1 3.6-.5 9 1.5 12 1 1.4 2.2 3 3.8 3 1.5-.1 2.1-1 4-1s2.4 1 4 .9c1.7 0 2.7-1.5 3.7-2.9 1.2-1.6 1.6-3.2 1.7-3.3-0.1 0-3.4-1.3-3.4-5zM14.5 4.2c.8-1 1.4-2.4 1.2-3.7-1.2.1-2.6.8-3.4 1.7-.8.9-1.4 2.3-1.2 3.6 1.3.1 2.6-.6 3.4-1.6z"/>
    </svg>
  ),
  Play: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M3.6 2.3c-.3.2-.6.7-.6 1.4v16.7c0 .6.3 1.1.6 1.4l8.4-8.4-8.4-9.1z" opacity=".9"/>
      <path d="M15.6 10 L13 7.2 L4 2.3 c-.3-.2-.7-.2-1 0 l9 9.7 3.6-2z" opacity=".9"/>
      <path d="M19 11.2c-.6-.3-1.7-1-3.4-2L12 13.1l3.6 3.6c1.7-1 2.7-1.6 3.3-1.9.5-.3 1-.7 1-1.7-.1-1-.6-1.4-.9-1.9z"/>
      <path d="M3 21.4c.3.2.7.2 1 0l11-6.7-3-3-9 9.7z" opacity=".9"/>
    </svg>
  ),
  Globe: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <circle cx="12" cy="12" r="9"/>
      <ellipse cx="12" cy="12" rx="4" ry="9"/>
      <line x1="3" y1="12" x2="21" y2="12"/>
    </svg>
  ),
  ArrowDown: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 5 L12 19 M5 12 L12 19 L19 12" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
};

window.Icon = Icon;
