import Image from "next/image";

export default function Loading() {
  return (
    <div className="fixed inset-0 z-[9999] bg-background flex items-center justify-center">
      {/* Background pattern */}
      <div className="absolute inset-0 bg-gradient-to-br from-background via-background to-muted/20" />
      
      {/* Loading content */}
      <div className="relative z-10 flex flex-col items-center space-y-4">
        {/* Logo with animation */}
        <div className="relative">
          <div className="animate-pulse">
            <Image
              src="/black-logo.png"
              alt="blcklst"
              width={160}
              height={50}
              className="h-12 w-auto block dark:hidden"
              priority
            />
            <Image
              src="/white-logo.png"
              alt="blcklst"
              width={160}
              height={50}
              className="h-12 w-auto hidden dark:block"
              priority
            />
          </div>
        </div>

        {/* Loading text - closer to logo */}
        <div className="text-center space-y-3 -mt-2">
          <p className="text-sm text-muted-foreground animate-pulse">
            not everyone gets blcklsted
          </p>
          
          {/* Loading dots */}
          <div className="flex items-center justify-center space-x-1">
            <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce [animation-delay:-0.3s]"></div>
            <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce [animation-delay:-0.15s]"></div>
            <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce"></div>
          </div>
        </div>

        {/* Progress bar */}
        <div className="w-64 h-1 bg-muted rounded-full overflow-hidden">
          <div className="h-full bg-foreground rounded-full animate-[loading_1s_ease-in-out_infinite]"></div>
        </div>
      </div>
    </div>
  );
}