import React, { useState, useEffect } from 'react';
import { Search, MapPin, Phone, Mail, GraduationCap, ChevronRight, ShieldCheck, HelpCircle, ArrowUpRight, CheckCircle } from 'lucide-react';
import { Course, Student, Enrollment, Language } from './types';
import { sampleCourses, translations } from './data';
import Header from './components/Header';
import Footer from './components/Footer';
import CourseCard from './components/CourseCard';
import PaystackModal from './components/PaystackModal';
import StudentPortal from './components/StudentPortal';
import { RegisterModal, LoginModal } from './components/AuthModals';
import Logo from './components/Logo';

// Reference to our beautiful generated background image
const bgImage = "/src/assets/images/daralfikr_bg_1782520095438.jpg";

export default function App() {
  const [lang, setLang] = useState<Language>('en');
  const [currency, setCurrency] = useState<'NGN' | 'USD'>('NGN');
  
  // Auth states
  const [student, setStudent] = useState<Student | null>(null);
  const [enrollments, setEnrollments] = useState<Enrollment[]>([]);
  
  // UI States
  const [activeModal, setActiveModal] = useState<'register' | 'login' | 'paystack' | null>(null);
  const [selectedCourseForPayment, setSelectedCourseForPayment] = useState<Course | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [showToast, setShowToast] = useState(false);
  const [toastMessage, setToastMessage] = useState('');

  const t = translations[lang];

  // Load user details and enrollments from LocalStorage on mount
  useEffect(() => {
    try {
      const storedStudent = localStorage.getItem('df_student');
      if (storedStudent) {
        const parsedStudent = JSON.parse(storedStudent);
        setStudent(parsedStudent);
        
        const storedEnrollments = localStorage.getItem(`df_enrollments_${parsedStudent.id}`);
        if (storedEnrollments) {
          setEnrollments(JSON.parse(storedEnrollments));
        } else {
          // Default demo enrollment for the first course to give immediate visual progress on signup
          const initialEnrollment: Enrollment[] = [
            {
              courseId: 'course-1',
              enrolledAt: new Date().toLocaleDateString(),
              progress: 25,
              status: 'in_progress',
              completedModules: [0]
            }
          ];
          setEnrollments(initialEnrollment);
          localStorage.setItem(`df_enrollments_${parsedStudent.id}`, JSON.stringify(initialEnrollment));
        }
      }
    } catch (e) {
      console.error('Error loading localStorage state', e);
    }
  }, []);

  // Update document language direction
  useEffect(() => {
    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
    document.documentElement.lang = lang;
  }, [lang]);

  // Handle student registration
  const handleRegisterStudent = (newStudent: Student) => {
    setStudent(newStudent);
    
    // Auto-enroll in Classical Arabic Course with 25% progress as an initial dashboard tour!
    const initialEnrollment: Enrollment[] = [
      {
        courseId: 'course-1',
        enrolledAt: new Date().toLocaleDateString(),
        progress: 25,
        status: 'in_progress',
        completedModules: [0]
      }
    ];

    setEnrollments(initialEnrollment);
    
    try {
      localStorage.setItem('df_student', JSON.stringify(newStudent));
      localStorage.setItem(`df_enrollments_${newStudent.id}`, JSON.stringify(initialEnrollment));
    } catch (e) {
      console.error('Storage quota exceeded or unavailable', e);
    }

    setActiveModal(null);
    triggerToast(lang === 'en' ? 'Student Registration Successful!' : 'تم تسجيل حساب الطالب بنجاح!');
  };

  // Handle student login
  const handleLoginStudent = (loggedInStudent: Student) => {
    setStudent(loggedInStudent);
    
    try {
      localStorage.setItem('df_student', JSON.stringify(loggedInStudent));
      
      const storedEnrollments = localStorage.getItem(`df_enrollments_${loggedInStudent.id}`);
      if (storedEnrollments) {
        setEnrollments(JSON.parse(storedEnrollments));
      } else {
        const initialEnrollment: Enrollment[] = [
          {
            courseId: 'course-1',
            enrolledAt: new Date().toLocaleDateString(),
            progress: 25,
            status: 'in_progress',
            completedModules: [0]
          }
        ];
        setEnrollments(initialEnrollment);
        localStorage.setItem(`df_enrollments_${loggedInStudent.id}`, JSON.stringify(initialEnrollment));
      }
    } catch (e) {
      console.error(e);
    }

    setActiveModal(null);
    triggerToast(lang === 'en' ? 'Welcome to Student Portal!' : 'مرحباً بك في بوابة الطالب!');
  };

  // Handle logout
  const handleLogout = () => {
    setStudent(null);
    setEnrollments([]);
    localStorage.removeItem('df_student');
    triggerToast(lang === 'en' ? 'Logged out successfully.' : 'تم تسجيل الخروج بنجاح.');
  };

  // Handle course enrollment trigger
  const handleEnrollClick = (course: Course) => {
    if (!student) {
      // Prompt registration first
      setSelectedCourseForPayment(course);
      setActiveModal('register');
      triggerToast(lang === 'en' ? 'Please register a student profile first.' : 'يرجى تسجيل حساب طالب أولاً للانتساب.');
    } else {
      // Trigger Paystack secure checkout directly
      setSelectedCourseForPayment(course);
      setActiveModal('paystack');
    }
  };

  // Complete Paystack Payment simulation
  const handlePaymentSuccess = () => {
    if (!selectedCourseForPayment || !student) return;

    const newEnrollment: Enrollment = {
      courseId: selectedCourseForPayment.id,
      enrolledAt: new Date().toLocaleDateString(lang === 'ar' ? 'ar-EG' : 'en-US'),
      progress: 0,
      status: 'not_started',
      completedModules: []
    };

    const updatedEnrollments = [...enrollments, newEnrollment];
    setEnrollments(updatedEnrollments);
    
    try {
      localStorage.setItem(`df_enrollments_${student.id}`, JSON.stringify(updatedEnrollments));
    } catch (e) {
      console.error(e);
    }

    setActiveModal(null);
    setSelectedCourseForPayment(null);

    // Scroll smoothly to dashboard portal to immediately showcase the new course
    const dashboardElement = document.getElementById('student-portal-section');
    if (dashboardElement) {
      dashboardElement.scrollIntoView({ behavior: 'smooth' });
    }

    triggerToast(lang === 'en' 
      ? `Successfully Enrolled: ${selectedCourseForPayment.title}!` 
      : `تم الاشتراك بنجاح في: ${selectedCourseForPayment.titleAr}!`);
  };

  // Update enrollments (module completion changes)
  const handleUpdateEnrollments = (updated: Enrollment[]) => {
    setEnrollments(updated);
    if (student) {
      try {
        localStorage.setItem(`df_enrollments_${student.id}`, JSON.stringify(updated));
      } catch (e) {
        console.error(e);
      }
    }
  };

  const triggerToast = (msg: string) => {
    setToastMessage(msg);
    setShowToast(true);
    setTimeout(() => {
      setShowToast(false);
    }, 4000);
  };

  // Filter courses based on Search & Category tabs
  const filteredCourses = sampleCourses.filter(course => {
    const matchesSearch = 
      course.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      course.titleAr.includes(searchQuery) ||
      course.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
      course.categoryAr.includes(searchQuery) ||
      course.instructor.toLowerCase().includes(searchQuery.toLowerCase());
      
    const matchesCategory = 
      selectedCategory === 'All' || 
      course.category === selectedCategory ||
      course.categoryAr === selectedCategory;

    return matchesSearch && matchesCategory;
  });

  // Extract unique categories (in both languages)
  const categories = ['All', ...new Set(sampleCourses.map(c => lang === 'en' ? c.category : c.categoryAr))];

  return (
    <div className="min-h-screen bg-slate-50 text-gray-800 font-sans flex flex-col justify-between">
      
      {/* Dynamic Header */}
      <Header
        lang={lang}
        onToggleLang={() => setLang(lang === 'en' ? 'ar' : 'en')}
        currency={currency}
        onToggleCurrency={() => setCurrency(currency === 'NGN' ? 'USD' : 'NGN')}
        student={student}
        onShowPortal={() => {
          const portalSec = document.getElementById('student-portal-section');
          if (portalSec) portalSec.scrollIntoView({ behavior: 'smooth' });
        }}
        onShowRegister={() => setActiveModal('register')}
        onShowLogin={() => setActiveModal('login')}
        onLogout={handleLogout}
      />

      {/* Main Container */}
      <main className="flex-1 pb-16">
        
        {/* HERO SECTION - Featuring the generated background image */}
        <section className="relative min-h-[550px] md:min-h-[600px] flex items-center justify-center text-white py-20 px-4">
          {/* Main Background Image Container */}
          <div className="absolute inset-0">
            <img
              src={bgImage}
              alt="Dar Al-Fikr International Academy Campus"
              className="w-full h-full object-cover"
              referrerPolicy="no-referrer"
            />
            {/* Elegant high-contrast deep teal-black gradient mask */}
            <div className="absolute inset-0 bg-gradient-to-tr from-teal-950 via-teal-900/90 to-slate-950/70" />
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(15,118,110,0.15)_0%,transparent_100%)]" />
          </div>

          {/* Content inside Hero (Bilingual, high readability spacing) */}
          <div className="relative z-10 max-w-5xl mx-auto text-center space-y-8 px-4">
            
            {/* Floating Islamic school logo badge in Hero */}
            <div className="inline-flex items-center justify-center gap-2.5 bg-white/10 backdrop-blur-md px-5 py-2.5 rounded-full border border-white/20 shadow-lg animate-fade-in">
              <Logo hideText={true} className="h-9" />
              <span className="text-xs font-bold font-mono text-amber-400 tracking-widest uppercase">
                {lang === 'en' ? 'daralfikr.sch.ng • LMS Terminal' : 'daralfikr.sch.ng • البوابة الأكاديمية'}
              </span>
            </div>

            <div className="space-y-4 max-w-4xl mx-auto">
              {/* Grand School Headings */}
              <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-serif font-bold tracking-tight leading-tight filter drop-shadow-md">
                {lang === 'en' ? t.academyName : t.arabicName}
              </h1>
              <p className="text-base sm:text-lg md:text-xl font-medium text-amber-300 tracking-wide font-sans italic opacity-95">
                {t.tagline}
              </p>
              <p className="text-xs sm:text-sm text-slate-200/90 max-w-2xl mx-auto leading-relaxed">
                {t.bilingualNotice}
              </p>
            </div>

            {/* Live Class quick banner overlay inside Hero */}
            <div className="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/10 max-w-xl mx-auto shadow-inner flex flex-col sm:flex-row items-center justify-between gap-4">
              <div className="text-left sm:text-left">
                <span className="inline-block bg-green-500 text-white font-mono text-[9px] font-bold px-2 py-0.5 rounded-full uppercase animate-pulse">
                  {lang === 'en' ? 'LIVE NOW' : 'بث مباشر الآن'}
                </span>
                <p className="text-xs font-bold text-white mt-1">
                  {lang === 'en' ? 'Classical Arabic Nahw Sessions Active' : 'حلقة النحو العربي والإعراب جارية الآن'}
                </p>
              </div>
              <a 
                href="https://meet.google.com/dar-alk-fikr" 
                target="_blank" 
                rel="noopener noreferrer"
                className="bg-amber-500 hover:bg-amber-600 text-white font-bold text-xs py-2 px-4 rounded-xl flex items-center gap-1.5 shadow-md shrink-0 transition-all active:scale-95 cursor-pointer"
              >
                <span>{t.joinClass}</span>
                <ArrowUpRight size={14} />
              </a>
            </div>

            {/* CTAs */}
            <div className="flex flex-wrap items-center justify-center gap-4">
              <a
                href="#courses"
                className="bg-teal-700 hover:bg-teal-850 text-white font-bold text-sm px-6 py-3.5 rounded-xl shadow-lg transition-all transform hover:-translate-y-0.5 active:translate-y-0"
              >
                {t.exploreBtn}
              </a>
              {!student && (
                <button
                  onClick={() => setActiveModal('register')}
                  className="bg-white/10 hover:bg-white/15 text-white border border-white/30 font-bold text-sm px-6 py-3 rounded-xl backdrop-blur-sm transition-all transform hover:-translate-y-0.5 active:translate-y-0"
                >
                  {t.registerBtn}
                </button>
              )}
            </div>

          </div>
        </section>

        {/* Quick Bento Stats Panel */}
        <section className="max-w-7xl mx-auto px-4 md:px-8 -mt-12 relative z-20">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="bg-white p-5 rounded-2xl shadow-md border border-teal-50 flex items-center gap-4">
              <div className="bg-teal-50 text-teal-700 p-3 rounded-xl">
                <GraduationCap size={24} />
              </div>
              <div>
                <span className="text-lg font-extrabold text-teal-800 block">6+</span>
                <span className="text-[10px] text-gray-400 uppercase font-mono font-bold">{lang === 'en' ? 'Vetted Curriculums' : 'مناهج معتمدة'}</span>
              </div>
            </div>
            
            <div className="bg-white p-5 rounded-2xl shadow-md border border-teal-50 flex items-center gap-4">
              <div className="bg-amber-50 text-amber-600 p-3 rounded-xl">
                <ShieldCheck size={24} />
              </div>
              <div>
                <span className="text-lg font-extrabold text-teal-800 block">Paystack</span>
                <span className="text-[10px] text-gray-400 uppercase font-mono font-bold">{lang === 'en' ? '100% Secured Tuition' : 'بوابة دفع آمنة للرسوم'}</span>
              </div>
            </div>

            <div className="bg-white p-5 rounded-2xl shadow-md border border-teal-50 flex items-center gap-4">
              <div className="bg-teal-50 text-teal-700 p-3 rounded-xl">
                <Search size={24} />
              </div>
              <div>
                <span className="text-lg font-extrabold text-teal-800 block">Dual-Medium</span>
                <span className="text-[10px] text-gray-400 uppercase font-mono font-bold">{lang === 'en' ? 'English & Arabic' : 'إنجليزي وعربي'}</span>
              </div>
            </div>

            <div className="bg-white p-5 rounded-2xl shadow-md border border-teal-50 flex items-center gap-4">
              <div className="bg-blue-50 text-blue-600 p-3 rounded-xl">
                <HelpCircle size={24} />
              </div>
              <div>
                <span className="text-lg font-extrabold text-teal-800 block">Google / Zoom</span>
                <span className="text-[10px] text-gray-400 uppercase font-mono font-bold">{lang === 'en' ? 'Live Streaming Links' : 'بث مباشر تفاعلي'}</span>
              </div>
            </div>
          </div>
        </section>

        {/* LOGGED IN STUDENT PORTAL ANCHOR VIEW */}
        {student && (
          <section id="student-portal-section" className="max-w-7xl mx-auto px-4 md:px-8 mt-16 scroll-mt-24">
            <StudentPortal
              student={student}
              enrollments={enrollments}
              courses={sampleCourses}
              lang={lang}
              onLogout={handleLogout}
              onUpdateEnrollments={handleUpdateEnrollments}
            />
          </section>
        )}

        {/* COURSES EXPLORATION GRID (Coursera & Udemy Benchmark) */}
        <section id="courses" className="max-w-7xl mx-auto px-4 md:px-8 mt-24 space-y-8 scroll-mt-24">
          
          {/* Segment Heading */}
          <div className="text-center md:text-left md:flex md:justify-between md:items-end border-b border-gray-200 pb-5">
            <div className="space-y-1">
              <span className="text-xs font-bold text-amber-600 tracking-widest uppercase font-mono">
                {lang === 'en' ? 'ACADEMIC STUDY PROGRAMS' : 'البرامج الأكاديمية المتاحة'}
              </span>
              <h2 className="text-2xl md:text-3xl font-extrabold text-teal-950 font-sans">
                {t.featuredCourses}
              </h2>
              <p className="text-xs md:text-sm text-gray-500 max-w-xl">
                {t.coursesSubtitle}
              </p>
            </div>
            
            {/* Real-time search query block */}
            <div className="mt-4 md:mt-0 relative w-full md:w-80 shrink-0">
              <Search className="absolute left-3.5 top-3.5 text-gray-400" size={16} />
              <input
                type="text"
                placeholder={t.searchPlaceholder}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full bg-white border border-gray-300 rounded-xl py-2.5 pl-10 pr-4 text-xs font-medium focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-600 transition-all shadow-sm"
              />
            </div>
          </div>

          {/* Filtering Categories Bar */}
          <div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-none">
            {categories.map((cat) => {
              const isActive = selectedCategory === cat;
              return (
                <button
                  key={cat}
                  onClick={() => setSelectedCategory(cat)}
                  className={`py-1.5 px-4 rounded-full text-xs font-semibold whitespace-nowrap transition-all border ${
                    isActive
                      ? 'bg-teal-700 text-white border-teal-700 shadow-sm'
                      : 'bg-white text-gray-600 border-gray-200 hover:border-teal-300 hover:text-teal-700'
                  }`}
                >
                  {cat === 'All' ? t.allCategories : cat}
                </button>
              );
            })}
          </div>

          {/* Responsive Course Card Layout */}
          {filteredCourses.length === 0 ? (
            <div className="text-center py-16 bg-white rounded-2xl border border-gray-150">
              <Search size={36} className="text-gray-300 mx-auto mb-2" />
              <p className="text-sm font-semibold text-gray-500">
                {lang === 'en' ? 'No courses found matching your query.' : 'لم نجد أي دورات تطابق معايير البحث الخاصة بك.'}
              </p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredCourses.map((course) => {
                const isEnrolled = enrollments.some(e => e.courseId === course.id);
                return (
                  <CourseCard
                    key={course.id}
                    course={course}
                    lang={lang}
                    currency={currency}
                    isEnrolled={isEnrolled}
                    onEnroll={handleEnrollClick}
                    onViewPortal={() => {
                      const portalSec = document.getElementById('student-portal-section');
                      if (portalSec) portalSec.scrollIntoView({ behavior: 'smooth' });
                    }}
                  />
                );
              })}
            </div>
          )}
        </section>

        {/* OFFICE ADDRESS & MAP DETAIL SECTION */}
        <section id="contact-footer" className="max-w-7xl mx-auto px-4 md:px-8 mt-24 grid grid-cols-1 lg:grid-cols-12 gap-8 scroll-mt-24">
          
          {/* Left Column: School Location Card */}
          <div className="lg:col-span-5 bg-gradient-to-br from-teal-950 to-teal-900 text-white rounded-3xl p-6 md:p-8 shadow-xl relative overflow-hidden flex flex-col justify-between">
            <div className="absolute inset-0 opacity-5 pointer-events-none bg-[radial-gradient(#d97706_1px,transparent_1px)] [background-size:16px_16px]"></div>
            
            <div className="space-y-6">
              <div>
                <span className="text-[10px] text-amber-400 font-extrabold uppercase font-mono tracking-wider block">
                  {lang === 'en' ? 'VISIT THE CAMPUS' : 'قم بزيارتنا في مقر الأكاديمية'}
                </span>
                <h3 className="text-xl md:text-2xl font-bold font-sans mt-1">
                  {lang === 'en' ? 'Dar Al-Fikr Academy Office' : 'مكتب إدارة أكاديمية دار الفكر'}
                </h3>
              </div>

              <div className="space-y-4 text-xs md:text-sm">
                <div className="flex items-start gap-3">
                  <MapPin size={18} className="text-amber-400 shrink-0 mt-0.5" />
                  <p className="leading-relaxed text-slate-200">
                    Zone B, Sagwari-Bwari Rd, Bmuko, Dutse 901101, FCT, Nigeria
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <Phone size={18} className="text-amber-400 shrink-0 mt-0.5" />
                  <p className="font-mono text-slate-200">
                    +234 813 420 0006 <br /> +234 902 646 1916
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <Mail size={18} className="text-amber-400 shrink-0 mt-0.5" />
                  <p className="font-mono text-teal-300">
                    habuamar36@gmail.com
                  </p>
                </div>
              </div>
            </div>

            <div className="border-t border-white/10 pt-6 mt-6 text-[11px] text-teal-200">
              <span className="font-mono uppercase font-bold text-amber-400 tracking-wider block mb-1">
                {lang === 'en' ? 'Support Status' : 'حالة الدعم والأكاديمية'}
              </span>
              <p>
                {lang === 'en' 
                  ? 'Official Registrar of the Federal Capital Territory, Abuja. Physical office operational Monday - Friday (9:00 AM - 4:00 PM).' 
                  : 'المسجل الرسمي للعاصمة الاتحادية، أبوجا. يعمل المكتب الفعلي من الاثنين إلى الجمعة (9:00 صباحاً - 4:00 مساءً).'}
              </p>
            </div>
          </div>

          {/* Right Column: Stylized high-fidelity interactive map visual representing FCT */}
          <div className="lg:col-span-7 bg-white rounded-3xl border border-gray-200 shadow-lg overflow-hidden relative min-h-[300px]">
            {/* Visual satellite/vector grid graphic overlay mapping Dutse/Bwari Abuja */}
            <div className="absolute inset-0 bg-slate-50 flex flex-col items-center justify-center p-8 text-center space-y-4">
              <div className="bg-amber-100 p-4 rounded-full border-4 border-white shadow-md text-amber-600">
                <MapPin size={36} />
              </div>
              <div className="space-y-1 max-w-md">
                <h4 className="font-bold text-gray-800 text-sm md:text-base">
                  {lang === 'en' ? 'Abuja Dutse-Bwari Interactive Locator Map' : 'خريطة تحديد الموقع التفاعلية - دوتسي، أبوجا'}
                </h4>
                <p className="text-xs text-gray-500 leading-relaxed">
                  Zone B, Sagwari-Bwari Rd, Bmuko, Dutse 901101, FCT. Easily accessible from the Dutse-Bwari Expressway. Near Bmuko Community Square.
                </p>
              </div>
              
              {/* Fake Google Maps coordinate block with verification button */}
              <a 
                href="https://maps.google.com/?q=Dutse+Bwari+Abuja+Nigeria"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-teal-700 hover:bg-teal-800 text-white font-bold text-xs py-2 px-4 rounded-xl flex items-center gap-1 shadow-md transition-all cursor-pointer"
              >
                <span>{lang === 'en' ? 'Open in Google Maps' : 'افتح الموقع الجغرافي الفعلي'}</span>
                <ChevronRight size={14} />
              </a>
            </div>
          </div>
        </section>

      </main>

      {/* Global Toast Alert */}
      {showToast && (
        <div className="fixed bottom-6 right-6 bg-teal-900 text-white font-sans text-xs font-semibold px-4.5 py-3 rounded-xl shadow-2xl border border-teal-700/50 flex items-center gap-2 z-50 animate-in slide-in-from-bottom-5 duration-300">
          <CheckCircle size={14} className="text-amber-400 shrink-0" />
          <span>{toastMessage}</span>
        </div>
      )}

      {/* MODAL 1: REGISTER */}
      {activeModal === 'register' && (
        <RegisterModal
          lang={lang}
          onClose={() => { setActiveModal(null); setSelectedCourseForPayment(null); }}
          onRegister={handleRegisterStudent}
          onShowLogin={() => setActiveModal('login')}
        />
      )}

      {/* MODAL 2: LOGIN */}
      {activeModal === 'login' && (
        <LoginModal
          lang={lang}
          onClose={() => { setActiveModal(null); setSelectedCourseForPayment(null); }}
          onLogin={handleLoginStudent}
          onShowRegister={() => setActiveModal('register')}
        />
      )}

      {/* MODAL 3: SECURE PAYSTACK CHECKOUT */}
      {activeModal === 'paystack' && selectedCourseForPayment && (
        <PaystackModal
          course={selectedCourseForPayment}
          currency={currency}
          lang={lang}
          onSuccess={handlePaymentSuccess}
          onClose={() => { setActiveModal(null); setSelectedCourseForPayment(null); }}
        />
      )}

      {/* Dynamic Footer */}
      <Footer lang={lang} />

    </div>
  );
}
