import { cn } from "@/shared/utils";

interface AnimatedBackgroundProps {
  className?: string;
}

/**
 * Mesh gradient background with floating geometric shapes
 */
export function AnimatedBackground({ className }: AnimatedBackgroundProps) {
  return (
    <div className={cn("absolute inset-0 -z-10 overflow-hidden", className)}>
      {/* Mesh gradient */}
      <div
        className={cn(
          "absolute inset-0",
          "bg-[radial-gradient(ellipse_at_20%_30%,_oklch(0.72_0.12_260_/_0.12)_0%,_transparent_50%),",
          "radial-gradient(ellipse_at_80%_20%,_oklch(0.72_0.14_290_/_0.08)_0%,_transparent_50%),",
          "radial-gradient(ellipse_at_60%_80%,_oklch(0.75_0.1_200_/_0.06)_0%,_transparent_50%)]"
        )}
        style={{
          background: `
            radial-gradient(ellipse at 20% 30%, oklch(0.72 0.12 260 / 0.12) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 20%, oklch(0.72 0.14 290 / 0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 60% 80%, oklch(0.75 0.1 200 / 0.06) 0%, transparent 50%)
          `,
        }}
      />

      {/* Floating shapes */}
      <div
        className={cn(
          "absolute top-1/4 left-1/4 w-64 h-64 rounded-full",
          "bg-gradient-to-br from-primary/5 to-transparent",
          "cp-float-slow blur-3xl"
        )}
        aria-hidden="true"
      />
      <div
        className={cn(
          "absolute top-1/2 right-1/4 w-48 h-48 rounded-full",
          "bg-gradient-to-br from-accent-gradient/5 to-transparent",
          "cp-float-delayed blur-3xl"
        )}
        aria-hidden="true"
      />
      <div
        className={cn(
          "absolute bottom-1/4 left-1/3 w-32 h-32 rounded-full",
          "bg-gradient-to-br from-primary/8 to-transparent",
          "cp-float blur-2xl"
        )}
        aria-hidden="true"
      />

      {/* Subtle grid pattern overlay */}
      <div
        className="absolute inset-0 opacity-[0.02]"
        style={{
          backgroundImage: `
            linear-gradient(to right, currentColor 1px, transparent 1px),
            linear-gradient(to bottom, currentColor 1px, transparent 1px)
          `,
          backgroundSize: "64px 64px",
        }}
        aria-hidden="true"
      />
    </div>
  );
}