export default function AuroraBackground() {
  return (
    <div className="fixed inset-0 overflow-hidden pointer-events-none -z-10" id="aurora-container">
      {/* Background base layer */}
      <div className="absolute inset-0 bg-gradient-to-b from-brand-950 via-slate-900 to-brand-900 opacity-95" />
      
      {/* Aurora glow blobs */}
      <div className="absolute inset-0 opacity-40 mix-blend-screen filter blur-[120px] md:blur-[160px]">
        {/* Teal blob */}
        <div className="absolute top-1/10 left-1/5 w-72 h-72 md:w-96 md:h-96 rounded-full bg-brand-500 opacity-60 animate-aurora-1" />
        
        {/* Blue blob */}
        <div className="absolute top-1/3 right-1/4 w-80 h-80 md:w-[450px] md:h-[450px] rounded-full bg-accent-500 opacity-55 animate-aurora-2" />
        
        {/* Cyan/Deep teal blob */}
        <div className="absolute bottom-1/4 left-1/3 w-72 h-72 md:w-[400px] md:h-[400px] rounded-full bg-brand-700 opacity-50 animate-aurora-3" />
      </div>

      {/* Subtle grid pattern overlay for high-tech aesthetic */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#00bcac05_1px,transparent_1px),linear-gradient(to_bottom,#00bcac05_1px,transparent_1px)] bg-[size:24px_24px]" />
    </div>
  );
}