'use client';

import React, { useState, useEffect } from 'react';
import { useAuth } from '@/components/providers/MockAuthProvider';
import { useLanguage } from '@/components/providers/LanguageProvider';
import { 
  Globe, 
  BookOpen, 
  Users, 
  MessageSquare, 
  Heart, 
  Shield, 
  BarChart3, 
  Languages,
  LogIn,
  GraduationCap,
  Star,
  MapPin,
  Trophy,
  Waves,
  Leaf,
  ChevronRight,
  Award,
  Zap,
  MapIcon,
  Phone,
  Mail,
  ExternalLink
} from 'lucide-react';
import Link from 'next/link';
import Image from 'next/image';
import { useRouter } from 'next/navigation';

export default function HomePage() {
  const { user, login, loading } = useAuth();
  const { language, setLanguage } = useLanguage();
  const router = useRouter();
  const [loginForm, setLoginForm] = useState({ email: '', password: '' });
  const [showLogin, setShowLogin] = useState(false);
  const [currentSlide, setCurrentSlide] = useState(0);
  const [animatedStats, setAnimatedStats] = useState({ students: 0, programs: 0, satisfaction: 0 });

  // Auto-slide for hero banner
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % 3);
    }, 5000);
    return () => clearInterval(timer);
  }, []);

  // Animate statistics
  useEffect(() => {
    const timer = setTimeout(() => {
      const interval = setInterval(() => {
        setAnimatedStats(prev => ({
          students: prev.students < 35000 ? prev.students + 500 : 35000,
          programs: prev.programs < 350 ? prev.programs + 5 : 350,
          satisfaction: prev.satisfaction < 92 ? prev.satisfaction + 1 : 92
        }));
      }, 50);
      
      setTimeout(() => clearInterval(interval), 2000);
    }, 1000);
    
    return () => clearTimeout(timer);
  }, []);

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const success = await login(loginForm.email, loginForm.password);
      if (success) {
        router.push('/dashboard');
      } else {
        alert('Invalid credentials. Use: student@university.edu / password123 or admin@university.edu / admin123');
      }
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  const toggleLanguage = () => {
    setLanguage(language === 'en' ? 'ar' : 'en');
  };

  const heroSlides = [
    {
      title: language === 'en' ? "#1 in Climate Action Globally" : "#1 عالمياً في العمل المناخي",
      subtitle: language === 'en' ? "Leading the world in sustainability and environmental innovation" : "رائدة عالمياً في الاستدامة والابتكار البيئي",
      image: "https://images.unsplash.com/photo-1569163139394-de4e4f43e4e3?w=1200&h=600&fit=crop",
      cta: language === 'en' ? "Discover Our Impact" : "اكتشف تأثيرنا"
    },
    {
      title: language === 'en' ? "World-Class Marine & Antarctic Science" : "علوم بحرية وقطبية عالمية المستوى",
      subtitle: language === 'en' ? "Pioneering research in marine ecosystems and climate science" : "أبحاث رائدة في النظم البيئية البحرية وعلوم المناخ",
      image: "https://images.unsplash.com/photo-1583212292454-1fe6229603b7?w=1200&h=600&fit=crop",
      cta: language === 'en' ? "Explore Research" : "اكتشف البحوث"
    },
    {
      title: language === 'en' ? "Transform Your Future with UTAS" : "حوّل مستقبلك مع جامعة تاسمانيا",
      subtitle: language === 'en' ? "Join Australia's most sustainable university" : "انضم إلى أكثر الجامعات الأسترالية استدامة",
      image: "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1200&h=600&fit=crop",
      cta: language === 'en' ? "Start Your Journey" : "ابدأ رحلتك"
    }
  ];

  const studyAreas = [
    {
      title: language === 'en' ? "Business and Law" : "الأعمال والقانون",
      description: language === 'en' ? "Leading programs in commerce, law, and business innovation" : "برامج رائدة في التجارة والقانون وابتكار الأعمال",
      icon: <Users className="w-8 h-8" />,
      color: "from-blue-500 to-blue-600"
    },
    {
      title: language === 'en' ? "Earth, Sea, Antarctic & Environment" : "الأرض والبحار والقطب الجنوبي والبيئة",
      description: language === 'en' ? "World-renowned research in climate and environmental sciences" : "أبحاث مشهورة عالمياً في علوم المناخ والبيئة",
      icon: <Waves className="w-8 h-8" />,
      color: "from-teal-500 to-cyan-600"
    },
    {
      title: language === 'en' ? "Health and Medicine" : "الصحة والطب",
      description: language === 'en' ? "Innovative health programs with real-world impact" : "برامج صحية مبتكرة ذات تأثير حقيقي",
      icon: <Heart className="w-8 h-8" />,
      color: "from-red-500 to-pink-600"
    },
    {
      title: language === 'en' ? "Science, Technology & Engineering" : "العلوم والتكنولوجيا والهندسة",
      description: language === 'en' ? "Cutting-edge programs in STEM fields" : "برامج متطورة في مجالات العلوم والتكنولوجيا",
      icon: <Zap className="w-8 h-8" />,
      color: "from-purple-500 to-indigo-600"
    },
    {
      title: language === 'en' ? "Creative Arts and Design" : "الفنون الإبداعية والتصميم",
      description: language === 'en' ? "Inspiring creativity and artistic excellence" : "إلهام الإبداع والتميز الفني",
      icon: <Star className="w-8 h-8" />,
      color: "from-orange-500 to-yellow-600"
    },
    {
      title: language === 'en' ? "Education, Humanities & Social Sciences" : "التعليم والعلوم الإنسانية والاجتماعية",
      description: language === 'en' ? "Shaping the future of education and society" : "تشكيل مستقبل التعليم والمجتمع",
      icon: <BookOpen className="w-8 h-8" />,
      color: "from-green-500 to-emerald-600"
    }
  ];

  const achievements = [
    {
      rank: "#1",
      title: language === 'en' ? "Climate Action Globally" : "العمل المناخي عالمياً",
      subtitle: language === 'en' ? "THE Impact Rankings 2025" : "تصنيف التأثير 2025",
      icon: <Trophy className="w-6 h-6" />
    },
    {
      rank: "5★",
      title: language === 'en' ? "QS Overall Rating" : "التقييم العام QS",
      subtitle: language === 'en' ? "Excellence in Education" : "التميز في التعليم",
      icon: <Award className="w-6 h-6" />
    },
    {
      rank: "Top 1%",
      title: language === 'en' ? "Global Universities" : "الجامعات العالمية",
      subtitle: language === 'en' ? "World University Rankings" : "تصنيف الجامعات العالمية",
      icon: <Globe className="w-6 h-6" />
    }
  ];

  if (user) {
    router.push('/dashboard');
    return null;
  }

  return (
    <div className={`min-h-screen ${language === 'ar' ? 'rtl' : 'ltr'}`}>
      {/* Header */}
      <header className="bg-white/95 backdrop-blur-sm shadow-lg border-b border-gray-200 sticky top-0 z-50">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-20">
            {/* Logo */}
            <div className="flex items-center space-x-4">
              <div className="bg-gradient-to-br from-blue-600 to-teal-600 p-2 rounded-xl">
                <GraduationCap size={32} className="text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-teal-600 bg-clip-text text-transparent">
                  UTAS Portal
                </h1>
                <p className="text-xs text-gray-500">University of Tasmania</p>
              </div>
            </div>

            {/* Navigation */}
            <nav className="hidden md:flex items-center space-x-8">
              <Link href="#study" className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                {language === 'en' ? 'Study' : 'الدراسة'}
              </Link>
              <Link href="#research" className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                {language === 'en' ? 'Research' : 'البحث'}
              </Link>
              <Link href="#campus" className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                {language === 'en' ? 'Campus Life' : 'الحياة الجامعية'}
              </Link>
              <Link href="#about" className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                {language === 'en' ? 'About' : 'حول'}
              </Link>
            </nav>

            {/* Language & Login */}
            <div className="flex items-center space-x-4">
              <button
                onClick={toggleLanguage}
                className="flex items-center space-x-2 px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors"
              >
                <Languages size={18} />
                <span className="font-medium">{language === 'en' ? 'ع' : 'EN'}</span>
              </button>
              
              <button
                onClick={() => setShowLogin(true)}
                className="bg-gradient-to-r from-blue-600 to-teal-600 text-white px-6 py-2 rounded-xl hover:shadow-lg transition-all duration-200 font-medium flex items-center space-x-2"
              >
                <LogIn size={18} />
                <span>{language === 'en' ? 'Portal Login' : 'دخول البوابة'}</span>
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative h-screen overflow-hidden">
        {heroSlides.map((slide, index) => (
          <div
            key={index}
            className={`absolute inset-0 transition-transform duration-1000 ease-in-out ${
              index === currentSlide ? 'translate-x-0' : 
              index < currentSlide ? '-translate-x-full' : 'translate-x-full'
            }`}
            style={{
              backgroundImage: `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url(${slide.image})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center'
            }}
          >
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="text-center text-white max-w-4xl px-4">
                <h1 className="text-5xl md:text-7xl font-bold mb-6 animate-fade-in-up">
                  {slide.title}
                </h1>
                <p className="text-xl md:text-2xl mb-8 opacity-90 animate-fade-in-up-delay">
                  {slide.subtitle}
                </p>
                <button className="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:shadow-2xl transition-all duration-300 transform hover:scale-105 animate-fade-in-up-delay-2">
                  {slide.cta} <ChevronRight className="inline ml-2" size={20} />
                </button>
              </div>
            </div>
          </div>
        ))}

        {/* Slide Indicators */}
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3">
          {heroSlides.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentSlide(index)}
              className={`w-3 h-3 rounded-full transition-all duration-300 ${
                index === currentSlide ? 'bg-white scale-125' : 'bg-white/50'
              }`}
            />
          ))}
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-20 left-1/2 transform -translate-x-1/2 animate-bounce">
          <div className="w-1 h-16 bg-white/30 rounded-full">
            <div className="w-1 h-4 bg-white rounded-full animate-pulse"></div>
          </div>
        </div>
      </section>

      {/* Statistics Section */}
      <section className="py-20 bg-gradient-to-r from-blue-600 to-teal-600 text-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
            <div className="space-y-4">
              <div className="text-5xl font-bold">{animatedStats.students.toLocaleString()}+</div>
              <div className="text-xl opacity-90">{language === 'en' ? 'Students Worldwide' : 'طالب حول العالم'}</div>
            </div>
            <div className="space-y-4">
              <div className="text-5xl font-bold">{animatedStats.programs}+</div>
              <div className="text-xl opacity-90">{language === 'en' ? 'Study Programs' : 'برنامج دراسي'}</div>
            </div>
            <div className="space-y-4">
              <div className="text-5xl font-bold">{animatedStats.satisfaction}%</div>
              <div className="text-xl opacity-90">{language === 'en' ? 'Student Satisfaction' : 'رضا الطلاب'}</div>
            </div>
          </div>
        </div>
      </section>

      {/* Achievements Banner */}
      <section className="py-16 bg-gradient-to-r from-gray-900 to-blue-900 text-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold mb-4">
              {language === 'en' ? 'Globally Recognized Excellence' : 'تميز معترف به عالمياً'}
            </h2>
            <p className="text-xl opacity-90">
              {language === 'en' ? 'Leading the world in sustainability and innovation' : 'رائدة عالمياً في الاستدامة والابتكار'}
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {achievements.map((achievement, index) => (
              <div key={index} className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 text-center hover:bg-white/15 transition-all duration-300">
                <div className="flex justify-center mb-4 text-teal-400">
                  {achievement.icon}
                </div>
                <div className="text-3xl font-bold text-teal-400 mb-2">{achievement.rank}</div>
                <div className="text-xl font-semibold mb-2">{achievement.title}</div>
                <div className="text-sm opacity-75">{achievement.subtitle}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Study Areas */}
      <section id="study" 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-4">
              {language === 'en' ? 'Discover Your Pathway' : 'اكتشف مسارك'}
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              {language === 'en' 
                ? 'Choose from world-class programs designed to prepare you for the future'
                : 'اختر من بين البرامج عالمية المستوى المصممة لإعدادك للمستقبل'
              }
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {studyAreas.map((area, index) => (
              <div
                key={index}
                className="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2"
              >
                <div className={`h-2 bg-gradient-to-r ${area.color}`}></div>
                <div className="p-8">
                  <div className={`inline-flex p-4 rounded-2xl bg-gradient-to-r ${area.color} text-white mb-6 group-hover:scale-110 transition-transform duration-300`}>
                    {area.icon}
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-4 group-hover:text-blue-600 transition-colors">
                    {area.title}
                  </h3>
                  <p className="text-gray-600 mb-6">
                    {area.description}
                  </p>
                  <button className="text-blue-600 font-semibold hover:text-blue-800 transition-colors flex items-center">
                    {language === 'en' ? 'Learn More' : 'اعرف أكثر'} 
                    <ChevronRight size={16} className="ml-1 group-hover:translate-x-1 transition-transform" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AI Features Showcase */}
      <section className="py-20 bg-gradient-to-br from-blue-900 via-purple-900 to-teal-900 text-white relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0 bg-repeat" style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
            backgroundSize: '60px 60px'
          }}></div>
        </div>
        
        <div className="container mx-auto px-4 relative z-10">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">
              {language === 'en' ? 'AI-Powered Student Experience' : 'تجربة طلابية مدعومة بالذكاء الاصطناعي'}
            </h2>
            <p className="text-xl opacity-90 max-w-3xl mx-auto">
              {language === 'en' 
                ? 'Experience the future of education with our intelligent portal features'
                : 'اختبر مستقبل التعليم مع ميزات البوابة الذكية'
              }
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 hover:bg-white/20 transition-all duration-300">
              <MessageSquare size={40} className="text-teal-400 mb-4" />
              <h3 className="text-xl font-bold mb-3">
                {language === 'en' ? '24/7 AI Assistant' : 'مساعد ذكي 24/7'}
              </h3>
              <p className="text-sm opacity-90">
                {language === 'en' 
                  ? 'Multilingual support in English and Arabic with smart FAQ responses'
                  : 'دعم متعدد اللغات بالإنجليزية والعربية مع ردود ذكية'
                }
              </p>
            </div>

            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 hover:bg-white/20 transition-all duration-300">
              <Shield size={40} className="text-blue-400 mb-4" />
              <h3 className="text-xl font-bold mb-3">
                {language === 'en' ? 'Smart Accessibility' : 'إمكانية وصول ذكية'}
              </h3>
              <p className="text-sm opacity-90">
                {language === 'en' 
                  ? 'AI-powered alt-text generation and WCAG compliance checking'
                  : 'توليد نص بديل بالذكاء الاصطناعي وفحص التوافق مع معايير الوصول'
                }
              </p>
            </div>

            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 hover:bg-white/20 transition-all duration-300">
              <Heart size={40} className="text-pink-400 mb-4" />
              <h3 className="text-xl font-bold mb-3">
                {language === 'en' ? 'Mental Health Support' : 'دعم الصحة النفسية'}
              </h3>
              <p className="text-sm opacity-90">
                {language === 'en' 
                  ? 'AI-powered mental health triage with crisis detection and escalation'
                  : 'فرز الصحة النفسية بالذكاء الاصطناعي مع كشف الأزمات'
                }
              </p>
            </div>

            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 hover:bg-white/20 transition-all duration-300">
              <BarChart3 size={40} className="text-green-400 mb-4" />
              <h3 className="text-xl font-bold mb-3">
                {language === 'en' ? 'Smart Analytics' : 'تحليلات ذكية'}
              </h3>
              <p className="text-sm opacity-90">
                {language === 'en' 
                  ? 'Real-time dashboards with predictive insights and personalized recommendations'
                  : 'لوحات معلومات فورية مع رؤى تنبؤية وتوصيات شخصية'
                }
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Campus Locations */}
      <section id="campus" 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-4">
              {language === 'en' ? 'Our Campuses' : 'حرمنا الجامعي'}
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              {language === 'en' 
                ? 'Study at world-class facilities across Australia'
                : 'ادرس في مرافق عالمية المستوى عبر أستراليا'
              }
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              { name: 'Hobart', location: 'Tasmania, Australia', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop' },
              { name: 'Launceston', location: 'Tasmania, Australia', image: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=400&h=300&fit=crop' },
              { name: 'Burnie', location: 'Tasmania, Australia', image: 'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=400&h=300&fit=crop' },
              { name: 'Sydney', location: 'NSW, Australia', image: 'https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?w=400&h=300&fit=crop' }
            ].map((campus, index) => (
              <div key={index} className="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500">
                <Image 
                  src={campus.image} 
                  alt={campus.name}
                  width={400}
                  height={300}
                  className="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent">
                  <div className="absolute bottom-6 left-6 text-white">
                    <h3 className="text-2xl font-bold mb-2">{campus.name}</h3>
                    <p className="flex items-center opacity-90">
                      <MapPin size={16} className="mr-1" />
                      {campus.location}
                    </p>
                  </div>
                </div>
                <div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <ExternalLink size={16} className="text-white" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
            <div className="col-span-1 md:col-span-2">
              <div className="flex items-center space-x-4 mb-6">
                <div className="bg-gradient-to-br from-blue-600 to-teal-600 p-2 rounded-xl">
                  <GraduationCap size={32} className="text-white" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold">University of Tasmania</h3>
                  <p className="text-gray-400">{language === 'en' ? '#1 in Climate Action Globally' : '#1 عالمياً في العمل المناخي'}</p>
                </div>
              </div>
              <p className="text-gray-400 mb-6 max-w-md">
                {language === 'en' 
                  ? 'Leading the world in sustainability research and education. Join us in creating a better future for all.'
                  : 'رائدة عالمياً في أبحاث وتعليم الاستدامة. انضم إلينا في خلق مستقبل أفضل للجميع.'
                }
              </p>
              <div className="flex space-x-4">
                <div className="bg-blue-600 p-2 rounded-lg">
                  <Award size={20} />
                </div>
                <div className="bg-teal-600 p-2 rounded-lg">
                  <Leaf size={20} />
                </div>
                <div className="bg-green-600 p-2 rounded-lg">
                  <Globe size={20} />
                </div>
              </div>
            </div>

            <div>
              <h4 className="text-lg font-semibold mb-6">{language === 'en' ? 'Quick Links' : 'روابط سريعة'}</h4>
              <ul className="space-y-3">
                <li><Link href="#study" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Study Areas' : 'مجالات الدراسة'}</Link></li>
                <li><Link href="#research" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Research' : 'البحث'}</Link></li>
                <li><Link href="#campus" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Campus Life' : 'الحياة الجامعية'}</Link></li>
                <li><Link href="/privacy" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Privacy Policy' : 'سياسة الخصوصية'}</Link></li>
              </ul>
            </div>

            <div>
              <h4 className="text-lg font-semibold mb-6">{language === 'en' ? 'Contact Us' : 'اتصل بنا'}</h4>
              <div className="space-y-3">
                <div className="flex items-center space-x-3">
                  <Phone size={16} className="text-teal-400" />
                  <span className="text-gray-400">+61 3 6226 6200</span>
                </div>
                <div className="flex items-center space-x-3">
                  <Mail size={16} className="text-teal-400" />
                  <span className="text-gray-400">info@utas.edu.au</span>
                </div>
                <div className="flex items-center space-x-3">
                  <MapIcon size={16} className="text-teal-400" />
                  <span className="text-gray-400">Hobart, Tasmania</span>
                </div>
              </div>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-12 pt-8 text-center">
            <p className="text-gray-400">
              {language === 'en' 
                ? '© 2025 University of Tasmania. All rights reserved. CRICOS Provider Code 00586B'
                : '© 2025 جامعة تاسمانيا. جميع الحقوق محفوظة. رمز مقدم CRICOS 00586B'
              }
            </p>
          </div>
        </div>
      </footer>

      {/* Login Modal */}
      {showLogin && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 transform transition-all duration-300 scale-100">
            <div className="text-center mb-8">
              <div className="bg-gradient-to-br from-blue-600 to-teal-600 p-3 rounded-2xl inline-block mb-4">
                <LogIn size={32} className="text-white" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">
                {language === 'en' ? 'Welcome Back' : 'مرحباً بعودتك'}
              </h2>
              <p className="text-gray-600">
                {language === 'en' ? 'Sign in to access your portal' : 'سجل الدخول للوصول إلى بوابتك'}
              </p>
            </div>

            <form onSubmit={handleLogin} className="space-y-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  {language === 'en' ? 'Email Address' : 'عنوان البريد الإلكتروني'}
                </label>
                <input
                  type="email"
                  value={loginForm.email}
                  onChange={(e) => setLoginForm({...loginForm, email: e.target.value})}
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  placeholder={language === 'en' ? 'Enter your email' : 'أدخل بريدك الإلكتروني'}
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  {language === 'en' ? 'Password' : 'كلمة المرور'}
                </label>
                <input
                  type="password"
                  value={loginForm.password}
                  onChange={(e) => setLoginForm({...loginForm, password: e.target.value})}
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  placeholder={language === 'en' ? 'Enter your password' : 'أدخل كلمة المرور'}
                  required
                />
              </div>

              <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
                <p className="text-sm text-blue-800 mb-2 font-medium">
                  {language === 'en' ? 'Demo Accounts:' : 'حسابات تجريبية:'}
                </p>
                <div className="text-xs text-blue-700 space-y-1">
                  <div>Student: student@university.edu / password123</div>
                  <div>Admin: admin@university.edu / admin123</div>
                </div>
              </div>

              <div className="flex space-x-4">
                <button
                  type="button"
                  onClick={() => setShowLogin(false)}
                  className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-all duration-200 font-medium"
                >
                  {language === 'en' ? 'Cancel' : 'إلغاء'}
                </button>
                <button
                  type="submit"
                  disabled={loading}
                  className="flex-1 bg-gradient-to-r from-blue-600 to-teal-600 text-white px-6 py-3 rounded-xl hover:shadow-lg transition-all duration-200 font-medium disabled:opacity-50"
                >
                  {loading ? (language === 'en' ? 'Signing in...' : 'جارٍ تسجيل الدخول...') : (language === 'en' ? 'Sign In' : 'تسجيل الدخول')}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}