"use client";

export function AuroraBackground() {
  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden">
      {/* Base gradient */}
      <div className="absolute inset-0 bg-gradient-to-b from-[#0a0a1a] via-[#06060f] to-[#0d1117]" />

      {/* Aurora layers */}
      <div
        className="animate-aurora absolute -left-1/4 top-0 h-[60%] w-[150%] opacity-40"
        style={{
          background:
            "radial-gradient(ellipse at 30% 0%, rgba(139, 92, 246, 0.35) 0%, transparent 60%)",
        }}
      />
      <div
        className="animate-aurora absolute -right-1/4 top-[10%] h-[50%] w-[120%] opacity-30"
        style={{
          background:
            "radial-gradient(ellipse at 70% 20%, rgba(34, 211, 238, 0.3) 0%, transparent 55%)",
          animationDelay: "-4s",
        }}
      />
      <div
        className="animate-aurora absolute left-0 top-[30%] h-[40%] w-full opacity-25"
        style={{
          background:
            "radial-gradient(ellipse at 50% 50%, rgba(217, 70, 239, 0.25) 0%, transparent 50%)",
          animationDelay: "-8s",
        }}
      />

      {/* Grid overlay */}
      <div
        className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage: `
            linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)
          `,
          backgroundSize: "60px 60px",
        }}
      />

      {/* Scan line */}
      <div
        className="absolute left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-400/20 to-transparent"
        style={{ animation: "scan-line 8s linear infinite" }}
      />
    </div>
  );
}