export const AnimatedBackground = () => {
  return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden">
      {/* Horizontal moving logos */}
      <div className="absolute top-1/4 left-0 animate-move-right-slow opacity-4 dark:opacity-8">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-16 h-16 object-contain animate-spin-slow block dark:hidden"
        />
        <img
          src="/logo_white.png"
          alt="Xtablo"
          className="w-16 h-16 object-contain animate-spin-slow hidden dark:block"
        />
      </div>
      <div className="absolute top-1/3 left-0 animate-move-right-medium opacity-3 dark:opacity-6">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-12 h-12 object-contain animate-bounce-gentle block dark:hidden"
        />
        <img
          src="/logo_white.png"
          alt="Xtablo"
          className="w-12 h-12 object-contain animate-bounce-gentle hidden dark:block"
        />
      </div>
      <div className="absolute top-1/2 left-0 animate-move-right-fast opacity-5 dark:opacity-10">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-20 h-20 object-contain animate-pulse-gentle block dark:hidden"
        />
        <img
          src="/logo_white.png"
          alt="Xtablo"
          className="w-20 h-20 object-contain animate-pulse-gentle hidden dark:block"
        />
      </div>
      <div className="absolute top-2/3 left-0 animate-move-right-slow opacity-2 dark:opacity-4">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-14 h-14 object-contain animate-wiggle block dark:hidden"
        />
        <img
          src="/logo_white.png"
          alt="Xtablo"
          className="w-14 h-14 object-contain animate-wiggle hidden dark:block"
        />
      </div>
      <div className="absolute top-3/4 left-0 animate-move-right-medium opacity-3 dark:opacity-7">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-18 h-18 object-contain animate-float-gentle"
        />
      </div>

      {/* Diagonal moving logos */}
      <div className="absolute top-0 left-1/4 animate-move-diagonal-1 opacity-3 dark:opacity-6">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-10 h-10 object-contain animate-spin-reverse"
        />
      </div>
      <div className="absolute top-0 left-1/2 animate-move-diagonal-2 opacity-4 dark:opacity-8">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-16 h-16 object-contain animate-scale-gentle"
        />
      </div>
      <div className="absolute top-0 left-3/4 animate-move-diagonal-3 opacity-2 dark:opacity-5">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-12 h-12 object-contain animate-rotate-gentle"
        />
      </div>

      {/* Vertical moving logos */}
      <div className="absolute left-1/6 top-0 animate-move-down-slow opacity-3 dark:opacity-6">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-14 h-14 object-contain animate-bounce-soft"
        />
      </div>
      <div className="absolute left-5/6 top-0 animate-move-down-medium opacity-4 dark:opacity-7">
        <img src="/logo_dark.png" alt="Xtablo" className="w-16 h-16 object-contain animate-sway" />
      </div>

      {/* Circular moving logos */}
      <div className="absolute top-1/2 left-1/2 animate-orbit-1 opacity-2 dark:opacity-4">
        <img src="/logo_dark.png" alt="Xtablo" className="w-8 h-8 object-contain" />
      </div>
      <div className="absolute top-1/2 left-1/2 animate-orbit-2 opacity-3 dark:opacity-5">
        <img src="/logo_dark.png" alt="Xtablo" className="w-10 h-10 object-contain" />
      </div>
      <div className="absolute top-1/2 left-1/2 animate-orbit-3 opacity-2 dark:opacity-4">
        <img src="/logo_dark.png" alt="Xtablo" className="w-6 h-6 object-contain" />
      </div>
      <div className="absolute top-1/2 left-1/2 animate-orbit-4 opacity-3 dark:opacity-6">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-12 h-12 object-contain animate-spin-fast"
        />
      </div>
      <div className="absolute top-1/2 left-1/2 animate-orbit-5 opacity-2 dark:opacity-5">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-7 h-7 object-contain animate-pulse-fast"
        />
      </div>

      {/* Zigzag moving logos */}
      <div className="absolute top-1/4 left-0 animate-zigzag-1 opacity-4 dark:opacity-8">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-14 h-14 object-contain animate-wobble"
        />
      </div>
      <div className="absolute top-1/2 left-0 animate-zigzag-2 opacity-3 dark:opacity-6">
        <img src="/logo_dark.png" alt="Xtablo" className="w-11 h-11 object-contain animate-shake" />
      </div>
      <div className="absolute top-3/4 left-0 animate-zigzag-3 opacity-5 dark:opacity-9">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-16 h-16 object-contain animate-bounce-crazy"
        />
      </div>

      {/* Spiral moving logos */}
      <div className="absolute top-0 left-1/4 animate-spiral-1 opacity-3 dark:opacity-7">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-9 h-9 object-contain animate-spin-wobble"
        />
      </div>
      <div className="absolute top-0 left-3/4 animate-spiral-2 opacity-4 dark:opacity-8">
        <img src="/logo_dark.png" alt="Xtablo" className="w-13 h-13 object-contain animate-flip" />
      </div>

      {/* Random floating logos */}
      <div className="absolute top-1/6 left-1/3 animate-float-random-1 opacity-2 dark:opacity-5">
        <img src="/logo_dark.png" alt="Xtablo" className="w-8 h-8 object-contain animate-twirl" />
      </div>
      <div className="absolute top-1/3 left-2/3 animate-float-random-2 opacity-3 dark:opacity-6">
        <img src="/logo_dark.png" alt="Xtablo" className="w-10 h-10 object-contain animate-dance" />
      </div>
      <div className="absolute top-2/3 left-1/4 animate-float-random-3 opacity-4 dark:opacity-7">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-12 h-12 object-contain animate-jiggle"
        />
      </div>
      <div className="absolute top-5/6 left-3/4 animate-float-random-4 opacity-2 dark:opacity-4">
        <img src="/logo_dark.png" alt="Xtablo" className="w-9 h-9 object-contain animate-vibrate" />
      </div>

      {/* Wave pattern logos */}
      <div className="absolute top-1/8 left-0 animate-wave-1 opacity-3 dark:opacity-6">
        <img src="/logo_dark.png" alt="Xtablo" className="w-11 h-11 object-contain animate-swing" />
      </div>
      <div className="absolute top-3/8 left-0 animate-wave-2 opacity-4 dark:opacity-8">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-13 h-13 object-contain animate-pendulum"
        />
      </div>
      <div className="absolute top-5/8 left-0 animate-wave-3 opacity-2 dark:opacity-5">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-10 h-10 object-contain animate-elastic"
        />
      </div>
      <div className="absolute top-7/8 left-0 animate-wave-4 opacity-5 dark:opacity-9">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-15 h-15 object-contain animate-rubber"
        />
      </div>

      {/* Corner shooters */}
      <div className="absolute top-0 left-0 animate-corner-shoot-1 opacity-3 dark:opacity-7">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-12 h-12 object-contain animate-rocket"
        />
      </div>
      <div className="absolute top-0 right-0 animate-corner-shoot-2 opacity-4 dark:opacity-8">
        <img src="/logo_dark.png" alt="Xtablo" className="w-14 h-14 object-contain animate-comet" />
      </div>
      <div className="absolute bottom-0 left-0 animate-corner-shoot-3 opacity-2 dark:opacity-5">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-10 h-10 object-contain animate-meteor"
        />
      </div>
      <div className="absolute bottom-0 right-0 animate-corner-shoot-4 opacity-5 dark:opacity-10">
        <img src="/logo_dark.png" alt="Xtablo" className="w-16 h-16 object-contain animate-blast" />
      </div>

      {/* Bouncing balls */}
      <div className="absolute top-1/5 left-1/5 animate-bounce-ball-1 opacity-4 dark:opacity-8">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-8 h-8 object-contain animate-spin-bounce"
        />
      </div>
      <div className="absolute top-2/5 left-4/5 animate-bounce-ball-2 opacity-3 dark:opacity-6">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-11 h-11 object-contain animate-flip-bounce"
        />
      </div>
      <div className="absolute top-4/5 left-2/5 animate-bounce-ball-3 opacity-5 dark:opacity-9">
        <img
          src="/logo_dark.png"
          alt="Xtablo"
          className="w-13 h-13 object-contain animate-scale-bounce"
        />
      </div>
    </div>
  );
};
