"use client";

/**
 * Reusable soft gradient background (glassmorphism / ethereal).
 * Soft gradient base + blurred blobs (cyan, lavender, teal) for frosted glow.
 * Use with a parent that has page-soft-bg and relative overflow-hidden.
 * Wrap page content in a container with relative z-10.
 */
export function Background() {
  return (
    <div
      className="absolute inset-0 z-0 overflow-hidden pointer-events-none"
      aria-hidden
    >
      {/* Top-left: light airy blue / cyan */}
      <div
        className="absolute -top-32 -left-32 h-[700px] w-[700px] rounded-full bg-[#7dd3fc] opacity-30 blur-[100px] animate-blob-float"
        style={{ animationDelay: "0s" }}
      />
      <div
        className="absolute top-0 left-1/4 h-[500px] w-[500px] rounded-full bg-[#38bdf8] opacity-20 blur-[80px] animate-blob-float"
        style={{ animationDelay: "-4s" }}
      />
      {/* Mid / center-right: subtle lavender */}
      <div
        className="absolute top-1/3 right-0 w-[600px] h-[600px] rounded-full bg-[#c4b5fd] opacity-28 blur-[100px] animate-blob-float"
        style={{ animationDelay: "-8s" }}
      />
      <div
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[550px] h-[550px] rounded-full bg-[#a78bfa] opacity-18 blur-[90px] animate-blob-float"
        style={{ animationDelay: "-12s" }}
      />
      {/* Bottom-right: soft green / teal */}
      <div
        className="absolute -bottom-40 -right-20 h-[600px] w-[600px] rounded-full bg-[#5eead4] opacity-25 blur-[100px] animate-blob-float"
        style={{ animationDelay: "-2s" }}
      />
      <div
        className="absolute bottom-0 right-1/3 h-[450px] w-[450px] rounded-full bg-[#6ee7b7] opacity-20 blur-[80px] animate-blob-float"
        style={{ animationDelay: "-6s" }}
      />
    </div>
  );
}