'use client';

import { Brain, Sparkles, Zap } from 'lucide-react';

export default function AILoadingAnimation() {
  return (
    <div className="flex flex-col items-center justify-center py-16 px-4">
      <div className="relative mb-10">
        {/* Outer glow */}
        <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full blur-2xl animate-pulse" />
        
        {/* Main orb */}
        <div className="relative w-32 h-32 bg-gradient-to-br from-white to-gray-50 rounded-3xl shadow-2xl flex items-center justify-center">
          {/* Animated brain */}
          <div className="relative">
            <Brain className="w-16 h-16 text-blue-600 animate-pulse" />
            
            {/* Floating particles - simplified positions */}
            {[0, 1, 2, 3].map((i) => {
              // Simplified positions: top-left, top-right, bottom-right, bottom-left
              const positions = [
                { top: '-10px', left: '-10px' },
                { top: '-10px', left: 'calc(100% - 10px)' },
                { top: 'calc(100% - 10px)', left: 'calc(100% - 10px)' },
                { top: 'calc(100% - 10px)', left: '-10px' }
              ];
              
              return (
                <div
                  key={i}
                  className="absolute w-3 h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-bounce"
                  style={{
                    animationDelay: `${i * 0.5}s`,
                    ...positions[i]
                  }}
                >
                  <Sparkles className="w-full h-full text-white" />
                </div>
              );
            })}
            
            {/* Center sparkle */}
            <div className="absolute -top-2 -right-2 animate-bounce">
              <Zap className="w-6 h-6 text-purple-500" />
            </div>
          </div>
        </div>
        
        {/* Rotating rings */}
        <div className="absolute -inset-4">
          <div 
            className="absolute inset-0 border-4 border-blue-300/30 rounded-full animate-spin" 
            style={{ animationDuration: '8s' }} 
          />
          <div 
            className="absolute inset-3 border-4 border-purple-300/30 rounded-full animate-spin" 
            style={{ animationDuration: '10s', animationDirection: 'reverse' }} 
          />
        </div>
      </div>
      
      <div className="text-center space-y-4 max-w-md">
        <div>
          <h3 className="text-2xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
            AI is finding your perfect match
          </h3>
          <p className="text-gray-600 mt-2">
            Analyzing your requirements and matching with top immigration consultants...
          </p>
        </div>
        
        {/* Progress indicator */}
        <div className="w-full max-w-xs bg-gray-100 rounded-full h-2 overflow-hidden">
          <div 
            className="h-full bg-gradient-to-r from-blue-500 via-purple-500 to-blue-500 animate-pulse" 
            style={{ animationDuration: '2s', width: '100%' }} 
          />
        </div>
        
        {/* Loading dots */}
        <div className="flex items-center justify-center gap-2 pt-6">
          {[0, 1, 2].map((i) => (
            <div
              key={i}
              className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-bounce"
              style={{ animationDelay: `${i * 0.15}s` }}
            />
          ))}
        </div>
        
        {/* Tips */}
        <div className="pt-8 border-t border-gray-100">
          <p className="text-sm text-gray-500">
            Tip: Be specific about your location, target country, and visa type for better matches
          </p>
        </div>
      </div>
    </div>
  );
}