'use client'

export default function AmbientBackground() {
  return (
    <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none" aria-hidden>
      {/* Main gradient orbs */}
      <div
        className="absolute -top-[40%] -left-[20%] w-[70vw] h-[70vw] rounded-full opacity-[0.035]"
        style={{
          background: 'radial-gradient(circle, #00e87b 0%, transparent 70%)',
          animation: 'float-orb 20s ease-in-out infinite',
        }}
      />
      <div
        className="absolute -bottom-[30%] -right-[20%] w-[60vw] h-[60vw] rounded-full opacity-[0.025]"
        style={{
          background: 'radial-gradient(circle, #06b6d4 0%, transparent 70%)',
          animation: 'float-orb 25s ease-in-out infinite reverse',
        }}
      />
      <div
        className="absolute top-[40%] left-[50%] w-[40vw] h-[40vw] rounded-full opacity-[0.02]"
        style={{
          background: 'radial-gradient(circle, #a78bfa 0%, transparent 70%)',
          animation: 'float-orb 30s ease-in-out infinite 5s',
        }}
      />

      {/* Dot grid pattern */}
      <div
        className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage: 'radial-gradient(circle, #8896b8 1px, transparent 1px)',
          backgroundSize: '32px 32px',
        }}
      />

      {/* Top gradient line */}
      <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-g-green/20 to-transparent" />
    </div>
  )
}