import { cn } from '@/lib/cn';

/** Decorative stage lighting: neon glows, a fading scoreboard grid and diagonal rush streaks. */
export function Backdrop({ className, intensity = 'normal' }: { className?: string; intensity?: 'normal' | 'soft' }) {
  return (
    <div aria-hidden="true" className={cn('pointer-events-none absolute inset-0 -z-10 overflow-hidden', className)}>
      <div className="bg-grid absolute inset-0 [mask-image:radial-gradient(70%_60%_at_50%_0%,#000_20%,transparent_75%)] opacity-70" />
      <div className="bg-streaks absolute inset-0 [mask-image:linear-gradient(180deg,#000,transparent_80%)]" />
      <div
        className={cn(
          'absolute -top-[30%] left-1/2 h-[90%] w-[120%] -translate-x-1/2 bg-[radial-gradient(45%_50%_at_30%_40%,rgb(124_92_255/0.38),transparent_70%),radial-gradient(35%_45%_at_75%_30%,rgb(34_211_238/0.22),transparent_70%)]',
          intensity === 'soft' && 'opacity-60',
        )}
      />
      {/* light streaks that sweep once in a while */}
      <div className="absolute top-[18%] left-0 h-px w-1/3 bg-[linear-gradient(90deg,transparent,var(--color-cyan),transparent)] opacity-60 motion-safe:animate-streak" />
      <div className="absolute top-[42%] left-0 h-px w-1/4 bg-[linear-gradient(90deg,transparent,var(--color-violet-soft),transparent)] opacity-50 motion-safe:animate-streak motion-safe:[animation-delay:1.3s]" />
    </div>
  );
}