// components/organisms/VideoSection.jsx
"use client";
import React, { useState, useEffect } from 'react';

const VideoSection = () => {
  const [selectedVideo, setSelectedVideo] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [hoveredVideo, setHoveredVideo] = useState(null);

  // Enhanced videos data with realistic thumbnails
  const videos = [
    {
      id: '4',
      youtubeId: 'dQw4w9WgXcQ',
      title: 'Life as an International Student: Challenges & Opportunities',
      description: 'Get real insights into daily life, challenges, and amazing opportunities for international students.',
      duration: '22:15',
      views: '156K',
      uploadDate: '2 months ago',
      category: 'Student Life',
      thumbnail: 'https://images.unsplash.com/photo-1523580494863-6f3031224c94?w=400&h=225&fit=crop'
    },
    {
      id: '5',
      youtubeId: 'dQw4w9WgXcQ',
      title: 'Choosing the Perfect Country for Your Studies',
      description: 'Key factors to consider when selecting the ideal study destination for your academic goals.',
      duration: '14:50',
      views: '278K',
      uploadDate: '1 week ago',
      category: 'Destinations',
      thumbnail: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=400&h=225&fit=crop'
    },
    {
      id: '6',
      youtubeId: 'dQw4w9WgXcQ',
      title: 'Career Opportunities After Studying Abroad',
      description: 'How international education can significantly boost your career prospects globally.',
      duration: '16:35',
      views: '201K',
      uploadDate: '4 weeks ago',
      category: 'Career',
      thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=225&fit=crop'
    }
  ];

  const openVideoModal = (video) => {
    setSelectedVideo(video);
    setIsModalOpen(true);
    document.body.style.overflow = 'hidden';
  };

  const closeVideoModal = () => {
    setIsModalOpen(false);
    setSelectedVideo(null);
    document.body.style.overflow = 'auto';
  };

  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      closeVideoModal();
    }
  };

  // Keyboard escape handler
  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape') closeVideoModal();
    };
    
    if (isModalOpen) {
      document.addEventListener('keydown', handleEscape);
    }
    
    return () => document.removeEventListener('keydown', handleEscape);
  }, [isModalOpen]);

  return (
    <>
      <section className="py-20 relative overflow-hidden">
      
        <div className="container mx-auto px-4 max-w-7xl relative z-10">
          {/* Enhanced Section Header */}
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium mb-6">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l6 4.5-6 4.5z"/>
              </svg>
              Video Learning Platform
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              Master Your{' '}
              <span className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                Study Abroad
              </span>{' '}
              Journey
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
              Expert-led video guides, real student experiences, and step-by-step tutorials 
              to help you navigate every aspect of studying abroad with confidence.
            </p>
          </div>

          {/* Enhanced Videos Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
            {videos.map((video, index) => (
              <div 
                key={video.id}
                className="group cursor-pointer"
                onMouseEnter={() => setHoveredVideo(video.id)}
                onMouseLeave={() => setHoveredVideo(null)}
                onClick={() => openVideoModal(video)}
              >
                <div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 border border-gray-100 overflow-hidden">
                  {/* Enhanced Thumbnail Container */}
                  <div className="relative overflow-hidden">
                    <div className="aspect-video relative">
                      <img 
                        src={video.thumbnail}
                        alt={video.title}
                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                      />
                      {/* Gradient Overlay */}
                      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                      
                      {/* Category Badge */}
                      <div className="absolute top-4 left-4">
                        <span className="bg-white/90 backdrop-blur-sm text-gray-800 px-3 py-1 rounded-full text-xs font-semibold">
                          {video.category}
                        </span>
                      </div>
                      
                      {/* Enhanced Play Button */}
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className={`transform transition-all duration-500 ${
                          hoveredVideo === video.id ? 'scale-110 rotate-12' : 'scale-100'
                        }`}>
                          <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-2xl group-hover:shadow-3xl">
                            <div className="w-0 h-0 border-l-[12px] border-l-blue-600 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent ml-1"></div>
                          </div>
                        </div>
                      </div>


                      {/* Hover Progress Bar */}
                      <div className="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-blue-500 to-cyan-500 group-hover:w-full transition-all duration-1000 ease-out"></div>
                    </div>
                  </div>

                  {/* Enhanced Video Info */}
                  <div className="p-6">
                    <div className="flex items-start justify-between mb-3">
                      <h3 className="font-bold text-gray-900 text-lg leading-tight flex-1 pr-4 group-hover:text-blue-600 transition-colors duration-300 line-clamp-2">
                        {video.title}
                      </h3>
                      <div className="flex-shrink-0 transform group-hover:scale-110 transition-transform duration-300">
                        <svg className="w-5 h-5 text-gray-400 group-hover:text-blue-500" fill="currentColor" viewBox="0 0 24 24">
                          <path d="M14.75 6h5.5v12h-5.5zM3.75 18V6h5.5v12z"/>
                        </svg>
                      </div>
                    </div>
                    
                    <p className="text-gray-600 text-sm mb-4 leading-relaxed line-clamp-2">
                      {video.description}
                    </p>
                    
                    {/* Enhanced Stats */}
                    <div className="flex items-center justify-between text-sm text-gray-500">
                    
                      <button className="text-blue-600 hover:text-blue-700 font-semibold text-sm transition-colors duration-300 flex items-center space-x-1">
                        <span>Watch Now</span>
                        <svg className="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Enhanced CTA Section */}
          <div className="text-center">
            <div className="bg-white rounded-2xl p-8 shadow-lg border border-gray-100 max-w-2xl mx-auto">
              <h3 className="text-2xl font-bold text-gray-900 mb-4">
                Ready to Start Your Journey?
              </h3>
              <p className="text-gray-600 mb-6">
                Join thousands of successful students who transformed their dreams into reality with our guidance.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <button className="bg-gradient-to-r from-blue-600 to-cyan-600 text-white px-8 py-4 rounded-xl font-semibold hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 inline-flex items-center space-x-3 group">
                  <span>Explore All Videos</span>
                  <svg className="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                  </svg>
                </button>
                <button className="border-2 border-gray-300 text-gray-700 px-8 py-4 rounded-xl font-semibold hover:border-blue-500 hover:text-blue-600 transition-all duration-300 inline-flex items-center space-x-3">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                  </svg>
                  <span>Subscribe to Channel</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Enhanced Video Modal */}
      {isModalOpen && selectedVideo && (
        <div 
          className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in"
          onClick={handleBackdropClick}
        >
          <div className="bg-white rounded-2xl max-w-6xl w-full max-h-[95vh] overflow-hidden animate-scale-in shadow-2xl">
            {/* Enhanced Modal Header */}
            <div className="flex justify-between items-center p-6 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
              <div className="flex items-center space-x-3">
                <div className="w-3 h-8 bg-gradient-to-b from-blue-500 to-cyan-500 rounded-full"></div>
                <div>
                  <h3 className="text-xl font-bold text-gray-900 truncate pr-4">
                    {selectedVideo.title}
                  </h3>
                  <p className="text-sm text-gray-600">{selectedVideo.category}</p>
                </div>
              </div>
              <button 
                onClick={closeVideoModal}
                className="text-gray-500 hover:text-gray-700 transition-all duration-300 p-3 rounded-2xl hover:bg-gray-100 active:scale-95"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* Enhanced YouTube Video Player */}
            <div className="relative bg-black">
              <div className="relative pt-[56.25%]">
                <iframe
                  src={`https://www.youtube.com/embed/${selectedVideo.youtubeId}?autoplay=1&rel=0&modestbranding=1`}
                  className="absolute top-0 left-0 w-full h-full"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                  title={selectedVideo.title}
                />
              </div>
            </div>

            {/* Enhanced Video Info in Modal */}
            <div className="p-8">
              <div className="flex flex-col lg:flex-row justify-between items-start gap-6 mb-6">
                <div className="flex-1">
                  <h2 className="text-2xl font-bold text-gray-900 mb-4 leading-tight">
                    {selectedVideo.title}
                  </h2>
                  <div className="flex flex-wrap items-center gap-4 text-sm text-gray-600 mb-4">
                    <span className="flex items-center space-x-2 bg-blue-50 text-blue-700 px-3 py-1 rounded-full">
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l6 4.5-6 4.5z"/>
                      </svg>
                      <span>{selectedVideo.views} views</span>
                    </span>
                    <span className="flex items-center space-x-2">
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                        <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                      </svg>
                      <span>{selectedVideo.uploadDate}</span>
                    </span>
                    <span className="flex items-center space-x-2 bg-gray-100 text-gray-700 px-3 py-1 rounded-full">
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                        <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                      </svg>
                      <span>{selectedVideo.duration}</span>
                    </span>
                  </div>
                </div>
                <a
                  href={`https://www.youtube.com/watch?v=${selectedVideo.youtubeId}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center space-x-3 bg-gradient-to-r from-red-600 to-red-700 text-white px-6 py-3 rounded-xl hover:shadow-lg transition-all duration-300 hover:-translate-y-1 font-semibold"
                >
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
                  </svg>
                  <span>Watch on YouTube</span>
                </a>
              </div>
              
              <p className="text-gray-700 leading-relaxed text-lg mb-8 border-l-4 border-blue-500 pl-4 bg-blue-50 py-2 rounded-r-lg">
                {selectedVideo.description}
              </p>

              {/* Enhanced Video Actions */}
              <div className="flex flex-wrap gap-4 pt-6 border-t border-gray-200">
                <button className="flex items-center space-x-3 bg-gray-100 text-gray-700 px-6 py-3 rounded-xl hover:bg-gray-200 transition-all duration-300 hover:-translate-y-1 font-medium">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
                  </svg>
                  <span>Like Video</span>
                </button>
                <button className="flex items-center space-x-3 bg-gray-100 text-gray-700 px-6 py-3 rounded-xl hover:bg-gray-200 transition-all duration-300 hover:-translate-y-1 font-medium">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                  </svg>
                  <span>Add Comment</span>
                </button>
                <button className="flex items-center space-x-3 bg-gray-100 text-gray-700 px-6 py-3 rounded-xl hover:bg-gray-200 transition-all duration-300 hover:-translate-y-1 font-medium">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                  </svg>
                  <span>Share Guide</span>
                </button>
                <button className="flex items-center space-x-3 bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition-all duration-300 hover:-translate-y-1 font-medium ml-auto">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
                  </svg>
                  <span>Save for Later</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default VideoSection;