/* MotoLogo + todos los íconos SVG + Spinner. Se exponen en window. */
(function () {
  const MotoLogo = ({ size = 72 }) => (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* pin de ubicación */}
      <path d="M32 6 C21 6 13 14 13 24.5 C13 36 24 48 31 58 C31.5 58.7 32.5 58.7 33 58 C40 48 51 36 51 24.5 C51 14 43 6 32 6 Z"
            fill="#2563EB" stroke="#1E40AF" strokeWidth="2" strokeLinejoin="round"/>
      {/* círculo interior */}
      <circle cx="32" cy="24" r="7.5" fill="#FFFFFF" stroke="#1E40AF" strokeWidth="1.5"/>
    </svg>
  );

  const GoogleG = () => (
    <svg width="22" height="22" viewBox="0 0 48 48">
      <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.7 32.4 29.2 35.5 24 35.5c-6.4 0-11.5-5.1-11.5-11.5S17.6 12.5 24 12.5c2.9 0 5.6 1.1 7.6 2.9l5.7-5.7C33.7 6.5 29.1 4.5 24 4.5 13.2 4.5 4.5 13.2 4.5 24S13.2 43.5 24 43.5c10.8 0 19.5-8.7 19.5-19.5 0-1.2-.1-2.3-.4-3.5z"/>
      <path fill="#FF3D00" d="M6.3 14.1l6.6 4.8C14.6 15.2 18.9 12.5 24 12.5c2.9 0 5.6 1.1 7.6 2.9l5.7-5.7C33.7 6.5 29.1 4.5 24 4.5 16.3 4.5 9.7 8.9 6.3 14.1z"/>
      <path fill="#4CAF50" d="M24 43.5c5 0 9.5-1.9 12.9-5l-6-5.1c-2 1.4-4.4 2.2-6.9 2.2-5.2 0-9.6-3.4-11.2-8l-6.6 5C9.6 39 16.2 43.5 24 43.5z"/>
      <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4-4.1 5.4l6 5.1c-.4.4 6.3-4.6 6.3-14.5 0-1.2-.1-2.3-.4-3.5z"/>
    </svg>
  );

  const HomeIcon = ({ active }) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
      <path d="M3 11l9-8 9 8v10a2 2 0 01-2 2h-4v-7h-6v7H5a2 2 0 01-2-2V11z"
            stroke={active ? "#58CC02" : "#9AA0A6"} strokeWidth="2.3" strokeLinejoin="round"
            fill={active ? "#DFFBC2" : "none"}/>
    </svg>
  );
  const CalIcon = ({ active }) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
      <rect x="3" y="5" width="18" height="16" rx="3" stroke={active ? "#58CC02" : "#9AA0A6"} strokeWidth="2.3" fill={active ? "#DFFBC2" : "none"}/>
      <path d="M3 9h18M8 3v4M16 3v4" stroke={active ? "#58CC02" : "#9AA0A6"} strokeWidth="2.3" strokeLinecap="round"/>
    </svg>
  );
  const UserIcon = ({ active }) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="8" r="4" stroke={active ? "#58CC02" : "#9AA0A6"} strokeWidth="2.3" fill={active ? "#DFFBC2" : "none"}/>
      <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke={active ? "#58CC02" : "#9AA0A6"} strokeWidth="2.3" strokeLinecap="round" fill={active ? "#DFFBC2" : "none"}/>
    </svg>
  );
  const BackIcon = () => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <path d="M15 6l-6 6 6 6" stroke="#3C3C3C" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  const PlusIcon = ({ size = 26 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 5v14M5 12h14" stroke="white" strokeWidth="3.5" strokeLinecap="round"/>
    </svg>
  );
  const CloseIcon = () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <path d="M6 6l12 12M18 6L6 18" stroke="#3C3C3C" strokeWidth="2.6" strokeLinecap="round"/>
    </svg>
  );

  const Spinner = ({ size = 20, color = "#2563EB" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" className="animate-spin">
      <circle cx="12" cy="12" r="10" stroke={color} strokeOpacity="0.25" strokeWidth="3" fill="none"/>
      <path d="M22 12a10 10 0 00-10-10" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round"/>
    </svg>
  );

  Object.assign(window, {
    MotoLogo, GoogleG, HomeIcon, CalIcon, UserIcon, BackIcon, PlusIcon, CloseIcon, Spinner
  });
})();
