// Minimal inline stroke icons. 24x24, currentColor. (Brand-only glyphs  some, like WhatsApp
// and the app stores, are drawn filled below via their own <svg>.)
export type IconName =
  | "find"
  | "scan"
  | "ride"
  | "park"
  | "map"
  | "wallet"
  | "zones"
  | "support"
  | "app"
  | "download"
  | "user"
  | "card"
  | "leaf";

const paths: Record<IconName, React.ReactNode> = {
  find: (
    <>
      <path d="M12 21s7-6.5 7-11a7 7 0 1 0-14 0c0 4.5 7 11 7 11Z" />
      <circle cx="12" cy="10" r="2.5" />
    </>
  ),
  scan: (
    <>
      <path d="M4 8V5a1 1 0 0 1 1-1h3M20 8V5a1 1 0 0 0-1-1h-3M4 16v3a1 1 0 0 0 1 1h3M20 16v3a1 1 0 0 1-1 1h-3" />
      <path d="M7 12h10" />
    </>
  ),
  ride: (
    <>
      <circle cx="6.5" cy="17" r="2.5" />
      <circle cx="17.5" cy="17" r="2.5" />
      <path d="M9 17h6M6.5 14.5 9 7h4l3 5" />
    </>
  ),
  park: (
    <>
      <path d="M6 21V4h6a4 4 0 0 1 0 8H6" />
    </>
  ),
  map: (
    <>
      <path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z" />
      <path d="M9 4v14M15 6v14" />
    </>
  ),
  wallet: (
    <>
      <rect x="3" y="6" width="18" height="13" rx="2.5" />
      <path d="M3 10h18M16 14h2" />
    </>
  ),
  zones: (
    <>
      <path d="M4 8l8-4 8 4-8 4-8-4Z" />
      <path d="M4 8v6l8 4 8-4V8" />
    </>
  ),
  support: (
    <>
      <path d="M21 12a8 8 0 1 0-3.2 6.4L21 21l-.9-3.1A7.9 7.9 0 0 0 21 12Z" />
      <path d="M9 10.5a3 3 0 0 1 5.5 1.6c0 1.7-2.5 2-2.5 3.9" />
      <path d="M12 18h.01" />
    </>
  ),
  // easy-to-use app: a phone
  app: (
    <>
      <rect x="7" y="3" width="10" height="18" rx="2.5" />
      <path d="M11 18h2" />
    </>
  ),
  // download the app
  download: (
    <>
      <path d="M12 4v10M8 11l4 4 4-4" />
      <path d="M5 19h14" />
    </>
  ),
  // register a new user
  user: (
    <>
      <circle cx="12" cy="8" r="3.5" />
      <path d="M5 20a7 7 0 0 1 14 0" />
    </>
  ),
  // secure & fast e-payment: card + shield tick
  card: (
    <>
      <rect x="3" y="5" width="18" height="14" rx="2.5" />
      <path d="M3 9h18M7 15h4" />
    </>
  ),
  // environment / Vision 2030 sustainability
  leaf: (
    <>
      <path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14Z" />
      <path d="M9 15c2-3 5-5 8-6" />
    </>
  ),
};

export function Icon({ name, className = "h-6 w-6" }: { name: IconName; className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      {paths[name]}
    </svg>
  );
}

/** WhatsApp glyph (filled, brand-green when colored by parent via currentColor). */
export function WhatsAppIcon({ className = "h-6 w-6" }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
      <path d="M17.5 14.4c-.3-.2-1.7-.8-2-.9-.3-.1-.5-.2-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .2.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3Z" />
      <path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.3A10 10 0 1 0 12 2Zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-2.9.8.8-2.8-.2-.3A8.2 8.2 0 1 1 12 20.2Z" />
    </svg>
  );
}

/** Apple logo. */
export function AppleIcon({ className = "h-6 w-6" }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
      <path d="M16.4 12.6c0-2 1.6-3 1.7-3-.9-1.4-2.4-1.5-2.9-1.6-1.2-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7-1.3 0-2.6.8-3.3 2-1.4 2.4-.4 6 1 8 .7 1 1.4 2 2.4 2 .9 0 1.3-.6 2.4-.6 1.1 0 1.4.6 2.4.6s1.7-.9 2.3-1.9c.7-1.1 1-2.1 1-2.2 0 0-1.9-.7-1.9-2.9ZM14.6 6.3c.5-.6.9-1.5.8-2.3-.8 0-1.7.5-2.2 1.1-.5.5-.9 1.4-.8 2.2.9.1 1.7-.4 2.2-1Z" />
    </svg>
  );
}

/** Android robot. */
export function AndroidIcon({ className = "h-6 w-6" }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
      <path d="M6 9a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1Zm12 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1ZM7.5 9v8a1 1 0 0 0 1 1H9v2a1 1 0 0 0 2 0v-2h2v2a1 1 0 0 0 2 0v-2h.5a1 1 0 0 0 1-1V9h-9Zm7-4.3.9-1.5a.3.3 0 0 0-.5-.3l-1 1.6a5.6 5.6 0 0 0-3.8 0l-1-1.6a.3.3 0 0 0-.5.3l.9 1.5A4.9 4.9 0 0 0 7.5 8.2h9a4.9 4.9 0 0 0-2-3.5ZM10 6.6a.6.6 0 1 1 0-1.2.6.6 0 0 1 0 1.2Zm4 0a.6.6 0 1 1 0-1.2.6.6 0 0 1 0 1.2Z" />
    </svg>
  );
}