import VideoCard from './VideoCard';
import { Video, Sparkles } from 'lucide-react';

export default async function YouTubeVideos({videoData}) {
  const videos = videoData || [];

  if (videos.length === 0) {
    return (
      <div className="min-h-100 flex items-center justify-center">
        <div className="text-center max-w-md mx-auto">
          <div className="w-16 h-16 mx-auto mb-4 bg-linear-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center">
            <Video className="w-8 h-8 text-gray-400" />
          </div>
          <h3 className="text-xl font-semibold text-gray-900 mb-2">No Videos Yet</h3>
          <p className="text-gray-500 mb-6">
            We're working on creating amazing content. Check back soon for new videos!
          </p>
          <div className="animate-pulse flex space-x-2 justify-center">
            <div className="w-2 h-2 bg-gray-300 rounded-full"></div>
            <div className="w-2 h-2 bg-gray-300 rounded-full"></div>
            <div className="w-2 h-2 bg-gray-300 rounded-full"></div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <section className="relative py-16 bg-linear-to-b from-gray-50 to-white overflow-hidden">
      {/* Animated Background similar to Hero */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
        {[...Array(10)].map((_, i) => (
          <div
            key={i}
            className="absolute rounded-full bg-linear-to-r from-teal-200/5 to-blue-200/5 animate-float"
            style={{
              width: Math.random() * 80 + 20,
              height: Math.random() * 80 + 20,
              top: `${Math.random() * 100}%`,
              left: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 5}s`,
              animationDuration: `${Math.random() * 10 + 10}s`
            }}
          />
        ))}
      </div>
      
      <div className="container mx-auto px-4 relative z-10">
        {/* Header Section */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-linear-to-r from-teal-600 to-blue-500 rounded-2xl shadow-lg mb-6">
            <Video className="w-8 h-8 text-white" />
          </div>
          
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Latest <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">Videos</span>
          </h2>
          
          <div className="w-24 h-1 bg-linear-to-r from-teal-600 to-blue-500 mx-auto mb-6 rounded-full"></div>
          
          <p className="text-lg md:text-xl text-gray-600 max-w-6xl mx-auto leading-relaxed">
            Stay updated with the newest content on <a href="https://universitiespage.com/" className='text-blue-500'>Universities Page</a>. Explore videos that guide you through international education services, international education advisory services, Higher Education Abroad, and Study Abroad Programs. Learn about Overseas Education Opportunities, Student Visa & Admission Services, and trusted Global Education Services to make informed decisions and plan your study abroad journey with confidence.
          </p>
        </div>

        {/* Videos Grid */}
        <div className="relative">
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8">
            {videos.map((video, index) => (
              <div 
                key={video.id}
                className="animate-fade-in-up"
                style={{
                  animationDelay: `${index * 100}ms`,
                  animationFillMode: 'both'
                }}
              >
                <VideoCard video={video} />
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
}