import Link from 'next/link';

export default function HomePage() {
  return (
    <div className="min-h-screen bg-white">

      {/* Hero Section */}
      <section className="bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-white py-20">
        <div className="container mx-auto px-4 text-center">
          <div className="max-w-4xl mx-auto">
            <div className="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium mb-8 border border-white/20">
              <span className="w-2 h-2 bg-green-400 rounded-full mr-2"></span>
              Established 1995 • Accredited Institution
            </div>
            
            <h1 className="text-5xl md:text-7xl font-bold mb-8">
              <span className="text-white">Excellence in</span>
              <br />
              <span className="text-blue-300">Higher Education</span>
            </h1>
            
            <p className="text-xl md:text-2xl text-blue-100 mb-12 max-w-3xl mx-auto">
              Join a community of scholars, innovators, and leaders. Our university combines 
              academic excellence with cutting-edge research, preparing students for success 
              in an ever-evolving global landscape.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-6 justify-center mb-16">
              <Link 
                href="/admissions"
                className="px-8 py-4 bg-white text-slate-900 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors"
              >
                Apply for Admission
              </Link>
              
              <Link 
                href="/programs"
                className="px-8 py-4 border-2 border-white text-white rounded-lg font-semibold text-lg hover:bg-white hover:text-slate-900 transition-colors"
              >
                Explore Programs
              </Link>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
              <div className="text-center p-6 bg-white/20 backdrop-blur-sm rounded-lg border border-white/20">
                <div className="text-3xl font-bold text-white mb-2">25,000+</div>
                <div className="text-blue-100 text-sm font-medium">Students Enrolled</div>
              </div>
              <div className="text-center p-6 bg-white/20 backdrop-blur-sm rounded-lg border border-white/20">
                <div className="text-3xl font-bold text-white mb-2">150+</div>
                <div className="text-blue-100 text-sm font-medium">Academic Programs</div>
              </div>
              <div className="text-center p-6 bg-white/20 backdrop-blur-sm rounded-lg border border-white/20">
                <div className="text-3xl font-bold text-white mb-2">95%</div>
                <div className="text-blue-100 text-sm font-medium">Graduate Success Rate</div>
              </div>
              <div className="text-center p-6 bg-white/20 backdrop-blur-sm rounded-lg border border-white/20">
                <div className="text-3xl font-bold text-white mb-2">OMR 2.5B</div>
                <div className="text-blue-100 text-sm font-medium">Research Funding</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Video Section */}
      <section className="py-20 bg-gray-900">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Experience Our
              <span className="text-blue-400"> Campus</span>
            </h2>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              Take a virtual tour of our state-of-the-art facilities and discover the vibrant 
              learning environment that awaits you at our university.
            </p>
          </div>
          
          <div className="max-w-6xl mx-auto">
            <div className="relative rounded-2xl overflow-hidden shadow-2xl">
              <video 
                className="w-full h-auto"
                autoPlay 
                muted 
                loop 
                playsInline
                poster="/images/hero1.jpg"
              >
                <source src="/Campus%20Tech%20Transformation%20July%2020%202025.mp4" type="video/mp4" />
                Your browser does not support the video tag.
              </video>
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              A Tradition of
              <span className="text-blue-600"> Excellence</span>
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              For nearly three decades, we have been at the forefront of higher education, 
              combining academic rigor with innovative research and global perspectives.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
              <div className="w-16 h-16 bg-blue-600 rounded-xl flex items-center justify-center text-3xl mb-6">
                🎓
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-4">Academic Excellence</h3>
              <p className="text-gray-600">
                Consistently ranked among the top universities globally, with world-renowned faculty and cutting-edge research facilities.
              </p>
            </div>
            
            <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
              <div className="w-16 h-16 bg-indigo-600 rounded-xl flex items-center justify-center text-3xl mb-6">
                🔬
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-4">Research Leadership</h3>
              <p className="text-gray-600">
                Leading breakthrough research in medicine, technology, and environmental sciences with over OMR 2.5 billion in research funding.
              </p>
            </div>
            
            <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
              <div className="w-16 h-16 bg-emerald-600 rounded-xl flex items-center justify-center text-3xl mb-6">
                💼
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-4">Career Success</h3>
              <p className="text-gray-600">
                95% of graduates employed within 6 months, with strong industry partnerships and career development programs.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Programs Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              World-Class
              <span className="text-blue-600"> Education</span>
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Choose from over 150 academic programs across undergraduate, graduate, and doctoral levels, 
              designed to prepare you for success in your chosen field.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
              <div className="p-6 bg-blue-600 text-white">
                <div className="text-4xl mb-4">💻</div>
                <h3 className="text-xl font-bold mb-2">Computer Science & Engineering</h3>
                <p className="text-sm opacity-90">Bachelor of Science • 4 Years</p>
              </div>
              <div className="p-6">
                <p className="text-gray-600 mb-4">
                  Develop cutting-edge software solutions and advance the frontiers of technology.
                </p>
                <Link href="/programs" className="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                  Learn More
                </Link>
              </div>
            </div>
            
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
              <div className="p-6 bg-emerald-600 text-white">
                <div className="text-4xl mb-4">📊</div>
                <h3 className="text-xl font-bold mb-2">Business Administration</h3>
                <p className="text-sm opacity-90">Master of Business Administration • 2 Years</p>
              </div>
              <div className="p-6">
                <p className="text-gray-600 mb-4">
                  Develop leadership skills and business acumen through our AACSB-accredited MBA program.
                </p>
                <Link href="/programs" className="inline-block px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700">
                  Learn More
                </Link>
              </div>
            </div>
            
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
              <div className="p-6 bg-purple-600 text-white">
                <div className="text-4xl mb-4">🧠</div>
                <h3 className="text-xl font-bold mb-2">Psychology & Neuroscience</h3>
                <p className="text-sm opacity-90">Master of Science • 2 Years</p>
              </div>
              <div className="p-6">
                <p className="text-gray-600 mb-4">
                  Explore the complexities of human behavior and cognition through rigorous research.
                </p>
                <Link href="/programs" className="inline-block px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                  Learn More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-blue-600 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Ready to Join Our Community?
          </h2>
          <p className="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
            Take the first step towards your future with a world-class education that prepares you for success.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link 
              href="/register"
              className="px-8 py-4 bg-white text-blue-600 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors"
            >
              Apply Now
            </Link>
            <Link 
              href="/contact"
              className="px-8 py-4 border-2 border-white text-white rounded-lg font-semibold text-lg hover:bg-white hover:text-blue-600 transition-colors"
            >
              Contact Us
            </Link>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white">
        <div className="container mx-auto px-4 py-16">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-4">University Portal</h3>
              <p className="text-gray-400 mb-4">
                Empowering students worldwide with world-class education and cutting-edge technology.
              </p>
            </div>
            
            <div>
              <h4 className="text-lg font-semibold mb-4">Academics</h4>
              <ul className="space-y-2 text-gray-400">
                <li><Link href="/programs" className="hover:text-white">Programs</Link></li>
                <li><Link href="/courses" className="hover:text-white">Courses</Link></li>
                <li><Link href="/admissions" className="hover:text-white">Admissions</Link></li>
                <li><Link href="/scholarships" className="hover:text-white">Scholarships</Link></li>
              </ul>
            </div>
            
            <div>
              <h4 className="text-lg font-semibold mb-4">Campus Life</h4>
              <ul className="space-y-2 text-gray-400">
                <li><Link href="/campus" className="hover:text-white">Campus</Link></li>
                <li><Link href="/events" className="hover:text-white">Events</Link></li>
                <li><Link href="/international" className="hover:text-white">International</Link></li>
                <li><Link href="/contact" className="hover:text-white">Contact</Link></li>
              </ul>
            </div>
            
            <div>
              <h4 className="text-lg font-semibold mb-4">Support</h4>
              <ul className="space-y-2 text-gray-400">
                <li><Link href="/help" className="hover:text-white">Help Center</Link></li>
                <li><Link href="/accessibility" className="hover:text-white">Accessibility</Link></li>
                <li><Link href="/privacy" className="hover:text-white">Privacy Policy</Link></li>
                <li><Link href="/terms" className="hover:text-white">Terms of Service</Link></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-12 pt-8">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <p className="text-gray-400 text-sm">
                © 2025 University Portal. All rights reserved.
              </p>
              <div className="flex space-x-6 mt-4 md:mt-0">
                <Link href="/privacy" className="text-gray-400 hover:text-white text-sm">Privacy</Link>
                <Link href="/terms" className="text-gray-400 hover:text-white text-sm">Terms</Link>
                <Link href="/cookies" className="text-gray-400 hover:text-white text-sm">Cookies</Link>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}