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

/**
 * AuroraBackground – Mehrschichtiges Hintergrund-System für Hero-Surfaces.
 *
 * Schichten von hinten nach vorne:
 *   1. Solid Surface (warm off-white oder dark)
 *   2. Aurora-Blobs (radial gradients, langsam drift)
 *   3. Grid (subtile 64px Linien)
 *   4. Noise (1px radial pattern für Filmkorn-Gefühl)
 *
 * Variante "subtle" für Sektionen unter dem Hero.
 */
export function AuroraBackground({
  variant = "hero",
  className,
}: {
  variant?: "hero" | "subtle" | "showcase";
  className?: string;
}) {
  return (
    <div
      aria-hidden
      className={cn(
        "pointer-events-none absolute inset-0 -z-10 overflow-hidden",
        className,
      )}
    >
      {/* Aurora blobs */}
      {variant === "hero" && (
        <>
          <div
            className="absolute -left-[10%] -top-[15%] h-[55vw] max-h-[760px] w-[55vw] max-w-[760px] rounded-full opacity-[0.6] blur-[80px] motion-safe:animate-[aurora-drift_22s_ease-in-out_infinite]"
            style={{
              background:
                "radial-gradient(circle at 30% 30%, rgb(var(--grad-from) / 0.6), transparent 60%)",
            }}
          />
          <div
            className="absolute -right-[10%] top-[5%] h-[50vw] max-h-[700px] w-[50vw] max-w-[700px] rounded-full opacity-[0.55] blur-[90px] motion-safe:animate-[aurora-drift_28s_ease-in-out_infinite_4s]"
            style={{
              background:
                "radial-gradient(circle at 50% 50%, rgb(var(--grad-to) / 0.5), transparent 60%)",
            }}
          />
          <div
            className="absolute bottom-[-20%] left-[20%] h-[45vw] max-h-[600px] w-[45vw] max-w-[600px] rounded-full opacity-[0.45] blur-[100px] motion-safe:animate-[aurora-drift_34s_ease-in-out_infinite_8s]"
            style={{
              background:
                "radial-gradient(circle at 50% 50%, rgb(var(--grad-via) / 0.45), transparent 60%)",
            }}
          />
        </>
      )}

      {variant === "showcase" && (
        <>
          <div
            className="absolute -right-[15%] top-[10%] h-[60vw] max-h-[800px] w-[60vw] max-w-[800px] rounded-full opacity-[0.4] blur-[100px] motion-safe:animate-[aurora-drift_30s_ease-in-out_infinite]"
            style={{
              background:
                "radial-gradient(circle at 50% 50%, rgb(var(--brand-500) / 0.50), transparent 60%)",
            }}
          />
          <div
            className="absolute -left-[10%] bottom-[-15%] h-[50vw] max-h-[700px] w-[50vw] max-w-[700px] rounded-full opacity-[0.30] blur-[100px] motion-safe:animate-[aurora-drift_36s_ease-in-out_infinite_6s]"
            style={{
              background:
                "radial-gradient(circle at 50% 50%, rgb(var(--cat-security) / 0.30), transparent 60%)",
            }}
          />
        </>
      )}

      {variant === "subtle" && (
        <div
          className="absolute inset-x-0 top-0 h-[400px] opacity-50"
          style={{
            background:
              "radial-gradient(ellipse 80% 60% at 50% 0%, rgb(var(--brand-500) / 0.06), transparent 70%)",
          }}
        />
      )}

      {/* Grid */}
      <div
        className={cn(
          "absolute inset-0 bg-grid-faint bg-grid-64",
          variant === "hero"
            ? "opacity-50 [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,black_30%,transparent_85%)]"
            : "opacity-30 [mask-image:radial-gradient(ellipse_at_top,black,transparent_75%)]",
        )}
      />

      {/* Noise */}
      <div
        className="absolute inset-0 bg-noise bg-noise-3 opacity-[0.4] mix-blend-multiply"
        style={{ filter: "contrast(1.2)" }}
      />
    </div>
  );
}