<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Academia – Professional Learning Platform</title>
    <!-- Tailwind CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800&display=swap" rel="stylesheet" />
    <!-- Alpine.js -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <!-- AOS Animations -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-dark: #4338ca;
            --secondary: #7c3aed;
        }
        body { font-family: 'Inter', sans-serif; }
        h1, h2, h3, .font-heading { font-family: 'Outfit', sans-serif; }
        .glass-nav {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .gradient-text {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero-gradient {
            background: radial-gradient(circle at 70% 30%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 30% 70%, rgba(79, 70, 229, 0.1) 0%, transparent 50%);
        }
        .course-card:hover .course-img {
            transform: scale(1.05);
        }
        .rotating-text-container {
            min-height: 1.2em;
        }
        .fade-transition {
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }
        .fade-out {
            opacity: 0;
            transform: translateY(-10px);
        }
        .fade-in {
            opacity: 1;
            transform: translateY(0);
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .animate-float { animation: float 6s ease-in-out infinite; }
        .animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }
    </style>
</head>
<body class="bg-white text-slate-900 leading-relaxed overflow-x-hidden">
    <!-- Navbar -->
    <header class="fixed inset-x-0 top-0 z-[100] transition-all duration-300 glass-nav border-b border-slate-100" id="main-header">
        <div class="max-w-7xl mx-auto flex items-center justify-between px-6 py-4">
            <a href="#" class="flex items-center gap-2 group">
                <div class="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:rotate-12 transition-transform">
                    <i data-lucide="graduation-cap"></i>
                </div>
                <span class="text-2xl font-extrabold tracking-tight text-slate-900">ACADEMIA</span>
            </a>
            
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#home" class="text-sm font-semibold text-slate-600 hover:text-indigo-600 transition">HOME</a>
                <a href="#courses" class="text-sm font-semibold text-slate-600 hover:text-indigo-600 transition">COURSES</a>
                <a href="#sessions" class="text-sm font-semibold text-slate-600 hover:text-indigo-600 transition">SESSIONS</a>
                <a href="#register" class="text-sm font-semibold text-slate-600 hover:text-indigo-600 transition">REGISTER</a>
                <a href="#contact" class="text-sm font-semibold text-slate-600 hover:text-indigo-600 transition">CONTACT</a>
            </nav>
            
            <div class="flex items-center gap-4">
                <a href="#register" class="hidden sm:inline-flex bg-indigo-600 text-white px-6 py-2.5 rounded-full font-bold text-sm hover:bg-indigo-700 hover:shadow-lg hover:shadow-indigo-500/30 transition-all">Get Started</a>
                <button class="md:hidden p-2 text-slate-600" id="nav-toggle">
                    <i data-lucide="menu"></i>
                </button>
            </div>
        </div>
        
        <!-- Mobile menu -->
        <div class="md:hidden hidden bg-white border-t border-slate-100 shadow-xl" id="mobile-menu">
            <nav class="flex flex-col p-6 space-y-4">
                <a href="#home" class="text-lg font-bold text-slate-700 hover:text-indigo-600">HOME</a>
                <a href="#courses" class="text-lg font-bold text-slate-700 hover:text-indigo-600">COURSES</a>
                <a href="#sessions" class="text-lg font-bold text-slate-700 hover:text-indigo-600">SESSIONS</a>
                <a href="#register" class="text-lg font-bold text-slate-700 hover:text-indigo-600">REGISTER</a>
                <a href="#contact" class="text-lg font-bold text-slate-700 hover:text-indigo-600">CONTACT</a>
                <hr class="border-slate-100">
                <a href="#register" class="bg-indigo-600 text-white text-center py-4 rounded-xl font-bold">Get Certificate</a>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section id="home" class="relative pt-40 pb-24 lg:pt-52 lg:pb-36 overflow-hidden hero-gradient">
        <div class="max-w-7xl mx-auto px-6 relative z-10">
            <div class="flex flex-col lg:flex-row items-center gap-16">
                <!-- Content -->
                <div class="lg:w-3/5 text-center lg:text-left" data-aos="fade-right">
                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-50 text-indigo-700 text-sm font-bold mb-8">
                        <span class="relative flex h-2 w-2">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-600"></span>
                        </span>
                        LEARN FROM THE BEST
                    </div>
                    
                    <h1 class="text-5xl md:text-7xl font-extrabold text-slate-900 mb-6 leading-[1.1]">
                        <?php echo e($contents['hero_title_line_1'] ?? 'Best Online'); ?> <br>
                        <span class="gradient-text"><?php echo e($contents['hero_title_line_2'] ?? 'Education Expertise'); ?></span>
                    </h1>
                    
                    <div class="rotating-text-container mb-8">
                        <h2 id="rotating-title" class="text-2xl md:text-3xl font-bold text-slate-600 fade-transition">
                            BUILD YOUR TECH CAREER
                        </h2>
                    </div>
                    
                    <p class="text-lg text-slate-600 mb-10 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
                        <?php echo e($contents['hero_description'] ?? 'Master in-demand skills with our comprehensive online courses. Learn from world-class experts and transform your professional journey today.'); ?>

                    </p>
                    
                    <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
                        <a href="#register" class="w-full sm:w-auto bg-indigo-600 text-white px-10 py-5 rounded-2xl font-bold text-lg hover:bg-indigo-700 shadow-xl hover:shadow-indigo-500/40 hover:-translate-y-1 transition-all flex items-center justify-center gap-2">
                            Get Started Now <i data-lucide="arrow-right" class="w-5 h-5"></i>
                        </a>
                        <a href="#courses" class="w-full sm:w-auto bg-white text-slate-700 border-2 border-slate-200 px-10 py-5 rounded-2xl font-bold text-lg hover:border-indigo-600 hover:text-indigo-600 transition-all flex items-center justify-center gap-2">
                            View Courses <i data-lucide="play-circle" class="w-5 h-5"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Image/Illustration -->
                <div class="lg:w-2/5 relative" data-aos="fade-left">
                    <div class="relative z-10 rounded-[2.5rem] overflow-hidden shadow-2xl border-8 border-white">
                        <img src="<?php echo e($contents['hero_image_url'] ?? 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&q=80&w=800'); ?>" alt="Students Learning" class="w-full h-full object-cover">
                    </div>
                    
                    <!-- Floating Badge 1 -->
                    <div class="absolute -top-10 -right-10 bg-white p-5 rounded-3xl shadow-2xl animate-float z-20 flex items-center gap-4">
                        <div class="w-12 h-12 bg-green-100 rounded-2xl flex items-center justify-center text-green-600">
                            <i data-lucide="check-circle"></i>
                        </div>
                        <div>
                            <div class="text-xs font-bold text-slate-400">SUCCESS RATE</div>
                            <div class="text-xl font-bold text-slate-900"><?php echo e($contents['hero_stats_success'] ?? '98.5%'); ?></div>
                        </div>
                    </div>
                    
                    <!-- Floating Badge 2 -->
                    <div class="absolute -bottom-10 -left-10 bg-white p-5 rounded-3xl shadow-2xl animate-float-delayed z-20 flex items-center gap-4">
                        <div class="w-12 h-12 bg-orange-100 rounded-2xl flex items-center justify-center text-orange-600">
                            <i data-lucide="users"></i>
                        </div>
                        <div>
                            <div class="text-xs font-bold text-slate-400">ACTIVE STUDENTS</div>
                            <div class="text-xl font-bold text-slate-900"><?php echo e($contents['hero_stats_students'] ?? '15K+'); ?></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Background Elements -->
        <div class="absolute top-0 right-0 w-1/3 h-full bg-indigo-50/50 -skew-x-12 translate-x-1/2 z-0"></div>
    </section>

    <!-- Features Section -->
    <section class="py-24 bg-white relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-sm font-bold text-indigo-600 tracking-widest uppercase mb-4"><?php echo e($contents['features_subtitle'] ?? 'OUR ADVANTAGES'); ?></h2>
                <h3 class="text-4xl md:text-5xl font-extrabold text-slate-900"><?php echo e($contents['features_title'] ?? 'Benefits About Online Learning Expertise'); ?></h3>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="group p-10 rounded-[2rem] border border-slate-100 hover:border-indigo-100 hover:bg-indigo-50/30 transition-all duration-500" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-16 h-16 bg-indigo-100 rounded-2xl flex items-center justify-center text-indigo-600 mb-8 group-hover:rotate-6 transition-transform">
                        <i data-lucide="book-open" class="w-8 h-8"></i>
                    </div>
                    <h4 class="text-2xl font-bold text-slate-900 mb-4">Online Courses</h4>
                    <p class="text-slate-600 leading-relaxed">Access our extensive library of world-class courses anytime, anywhere, on any device.</p>
                </div>
                
                <!-- Feature 2 -->
                <div class="group p-10 rounded-[2rem] border border-slate-100 hover:border-purple-100 hover:bg-purple-50/30 transition-all duration-500 shadow-xl shadow-slate-200/50" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center text-purple-600 mb-8 group-hover:rotate-6 transition-transform">
                        <i data-lucide="award" class="w-8 h-8"></i>
                    </div>
                    <h4 class="text-2xl font-bold text-slate-900 mb-4">Earn Certificates</h4>
                    <p class="text-slate-600 leading-relaxed">Get industry-recognized certificates that showcase your expertise and boost your career.</p>
                </div>
                
                <!-- Feature 3 -->
                <div class="group p-10 rounded-[2rem] border border-slate-100 hover:border-blue-100 hover:bg-blue-50/30 transition-all duration-500" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center text-blue-600 mb-8 group-hover:rotate-6 transition-transform">
                        <i data-lucide="user-check" class="w-8 h-8"></i>
                    </div>
                    <h4 class="text-2xl font-bold text-slate-900 mb-4">Learn with Experts</h4>
                    <p class="text-slate-600 leading-relaxed">Learn directly from industry veterans and top educators with practical, real-world knowledge.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Popular Courses -->
    <section id="courses" class="py-24 bg-slate-50" x-data="{ openModal: false, modalTitle: '', modalCourses: [] }">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-sm font-bold text-indigo-600 tracking-widest uppercase mb-4">Our Courses</h2>
                <h3 class="text-4xl md:text-5xl font-extrabold text-slate-900">Explore our wide range of professional IT courses designed to take your skills to the next level.</h3>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Card 1 -->
                <div class="group p-10 rounded-[2.5rem] bg-white border border-slate-100 hover:border-indigo-100 hover:shadow-2xl transition-all duration-500" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-16 h-16 bg-indigo-100 rounded-2xl flex items-center justify-center text-indigo-600 mb-8 group-hover:rotate-6 transition-transform">
                        <i data-lucide="monitor" class="w-8 h-8"></i>
                    </div>
                    <h4 class="text-2xl font-bold text-slate-900 mb-4 tracking-tight">Core IT Career Starters & Certification Courses</h4>
                    <p class="text-slate-600 leading-relaxed mb-8">Master a comprehensive range of IT skills from office productivity and programming to networking and cybersecurity.</p>
                    <button @click="openModal = true; modalTitle = 'Core IT Career Starters'; modalCourses = ['Office Productivity (Word, Excel, PPT)', 'Python Programming', 'Java & Web Development', 'Networking Essentials', 'Cybersecurity Fundamentals', 'Database Management']" class="w-full bg-indigo-600 text-white py-4 rounded-2xl font-bold hover:bg-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30">View Courses</button>
                </div>
                
                <!-- Card 2 -->
                <div class="group p-10 rounded-[2.5rem] bg-white border border-slate-100 hover:border-purple-100 hover:shadow-2xl transition-all duration-500 shadow-xl shadow-slate-200/20" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center text-purple-600 mb-8 group-hover:rotate-6 transition-transform">
                        <i data-lucide="shield-check" class="w-8 h-8"></i>
                    </div>
                    <h4 class="text-2xl font-bold text-slate-900 mb-4 tracking-tight">ISO Career Professional Certification Courses</h4>
                    <p class="text-slate-600 leading-relaxed mb-8">Master globally recognized ISO management system standards and certifications.</p>
                    <button @click="openModal = true; modalTitle = 'ISO Career Professional'; modalCourses = ['ISO 9001: Quality Management', 'ISO 27001: Information Security', 'ISO 22301: Business Continuity', 'ISO 45001: Occupational Health', 'ISO 14001: Environmental Management']" class="w-full bg-purple-600 text-white py-4 rounded-2xl font-bold hover:bg-purple-700 transition-all shadow-lg hover:shadow-purple-500/30">View Courses</button>
                </div>
                
                <!-- Card 3 -->
                <div class="group p-10 rounded-[2.5rem] bg-white border border-slate-100 hover:border-blue-100 hover:shadow-2xl transition-all duration-500" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center text-blue-600 mb-8 group-hover:rotate-6 transition-transform">
                        <i data-lucide="briefcase" class="w-8 h-8"></i>
                    </div>
                    <h4 class="text-2xl font-bold text-slate-900 mb-4 tracking-tight">Corporate Career Builders Courses</h4>
                    <p class="text-slate-600 leading-relaxed mb-8">Elevate your professional career with elite certifications in Agile, Scrum, Six Sigma, Marketing, and Business Analysis.</p>
                    <button @click="openModal = true; modalTitle = 'Corporate Career Builders'; modalCourses = ['Agile & Scrum Master', 'Six Sigma Green Belt', 'Digital Marketing Expert', 'Business Analysis Professional', 'Project Management Professional (PMP)', 'Leadership & Strategy']" class="w-full bg-blue-600 text-white py-4 rounded-2xl font-bold hover:bg-blue-700 transition-all shadow-lg hover:shadow-blue-500/30">View Courses</button>
                </div>
            </div>
        </div>

        <!-- Course List Modal -->
        <template x-teleport="body">
            <div x-show="openModal" 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0 z-[200] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm">
                
                <div @click.away="openModal = false" 
                     class="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-3xl overflow-hidden transform transition-all"
                     x-show="openModal"
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="scale-95 translate-y-4"
                     x-transition:enter-end="scale-100 translate-y-0">
                    
                    <div class="bg-indigo-600 p-8 text-white flex justify-between items-center">
                        <h3 class="text-2xl font-bold" x-text="modalTitle"></h3>
                        <button @click="openModal = false" class="p-2 hover:bg-white/10 rounded-lg transition-colors">
                            <i data-lucide="x"></i>
                        </button>
                    </div>
                    
                    <div class="p-8">
                        <ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <template x-for="course in modalCourses">
                                <li class="flex items-center gap-4 p-4 rounded-2xl bg-slate-50 border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50 transition-all group">
                                    <div class="w-8 h-8 bg-white rounded-lg shadow-sm flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all flex-shrink-0">
                                        <i data-lucide="chevron-right" class="w-4 h-4"></i>
                                    </div>
                                    <span class="font-bold text-slate-700 text-sm" x-text="course"></span>
                                </li>
                            </template>
                        </ul>
                        
                        <div class="mt-8 flex gap-4">
                            <button @click="openModal = false" class="flex-1 bg-slate-100 text-slate-700 py-4 rounded-2xl font-bold hover:bg-slate-200 transition-all">Close</button>
                            <a href="#register" @click="openModal = false" class="flex-1 bg-indigo-600 text-white py-4 rounded-2xl font-bold hover:bg-indigo-700 text-center transition-all">Enroll Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </section>

    <!-- Categories Section -->
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-sm font-bold text-indigo-600 tracking-widest uppercase mb-4">DISCOVER PATHS</h2>
                <h3 class="text-4xl md:text-5xl font-extrabold text-slate-900">Browse Our Online Categories</h3>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
                <!-- UI/UX -->
                <a href="#" class="group p-8 rounded-3xl border border-slate-100 text-center hover:bg-indigo-600 transition-all duration-300">
                    <div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-indigo-500 transition-colors">
                        <i data-lucide="palette" class="w-8 h-8 text-indigo-600 group-hover:text-white"></i>
                    </div>
                    <h4 class="font-bold text-slate-900 group-hover:text-white">UI/UX Design</h4>
                    <p class="text-sm text-slate-400 group-hover:text-indigo-100">85 Courses</p>
                </a>
                
                <!-- Art & Design -->
                <a href="#" class="group p-8 rounded-3xl border border-slate-100 text-center hover:bg-purple-600 transition-all duration-300">
                    <div class="w-16 h-16 bg-purple-50 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-purple-500 transition-colors">
                        <i data-lucide="pen-tool" class="w-8 h-8 text-purple-600 group-hover:text-white"></i>
                    </div>
                    <h4 class="font-bold text-slate-900 group-hover:text-white">Art & Design</h4>
                    <p class="text-sm text-slate-400 group-hover:text-purple-100">60 Courses</p>
                </a>
                
                <!-- Computer Science -->
                <a href="#" class="group p-8 rounded-3xl border border-slate-100 text-center hover:bg-blue-600 transition-all duration-300">
                    <div class="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-500 transition-colors">
                        <i data-lucide="code" class="w-8 h-8 text-blue-600 group-hover:text-white"></i>
                    </div>
                    <h4 class="font-bold text-slate-900 group-hover:text-white">Comp. Science</h4>
                    <p class="text-sm text-slate-400 group-hover:text-blue-100">120 Courses</p>
                </a>
                
                <!-- Marketing -->
                <a href="#" class="group p-8 rounded-3xl border border-slate-100 text-center hover:bg-green-600 transition-all duration-300">
                    <div class="w-16 h-16 bg-green-50 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-green-500 transition-colors">
                        <i data-lucide="trending-up" class="w-8 h-8 text-green-600 group-hover:text-white"></i>
                    </div>
                    <h4 class="font-bold text-slate-900 group-hover:text-white">Marketing</h4>
                    <p class="text-sm text-slate-400 group-hover:text-green-100">45 Courses</p>
                </a>
                
                <!-- Business -->
                <a href="#" class="group p-8 rounded-3xl border border-slate-100 text-center hover:bg-orange-600 transition-all duration-300">
                    <div class="w-16 h-16 bg-orange-50 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-orange-500 transition-colors">
                        <i data-lucide="briefcase" class="w-8 h-8 text-orange-600 group-hover:text-white"></i>
                    </div>
                    <h4 class="font-bold text-slate-900 group-hover:text-white">Business</h4>
                    <p class="text-sm text-slate-400 group-hover:text-orange-100">90 Courses</p>
                </a>
                
                <!-- Music -->
                <a href="#" class="group p-8 rounded-3xl border border-slate-100 text-center hover:bg-red-600 transition-all duration-300">
                    <div class="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-red-500 transition-colors">
                        <i data-lucide="music" class="w-8 h-8 text-red-600 group-hover:text-white"></i>
                    </div>
                    <h4 class="font-bold text-slate-900 group-hover:text-white">Music</h4>
                    <p class="text-sm text-slate-400 group-hover:text-red-100">35 Courses</p>
                </a>
            </div>
        </div>
    </section>

    <!-- Sessions Section -->
    <section id="sessions" class="py-24 bg-slate-50 relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-sm font-bold text-indigo-600 tracking-widest uppercase mb-4">Timing Options</h2>
                <h3 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4"><?php echo e($contents['sessions_title'] ?? 'Training Sessions'); ?></h3>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto"><?php echo e($contents['sessions_subtitle'] ?? 'We offer flexible timing options to suit your personal and professional schedule.'); ?></p>
            </div>
            
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Morning Session -->
                <div class="group p-8 rounded-[2rem] bg-white border border-slate-100 hover:border-indigo-100 hover:shadow-2xl transition-all duration-500" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 mb-6 group-hover:rotate-6 transition-transform">
                        <i data-lucide="sun" class="w-7 h-7"></i>
                    </div>
                    <h4 class="text-xl font-bold text-slate-900 mb-2">Morning Session</h4>
                    <p class="text-indigo-600 font-bold mb-4"><?php echo e($contents['session_morning_time'] ?? '9:00 AM - 12:00 PM'); ?></p>
                    <p class="text-slate-600 text-sm leading-relaxed"><?php echo e($contents['session_morning_desc'] ?? 'Perfect for early birds looking to start their day with intensive learning.'); ?></p>
                </div>
                
                <!-- Afternoon Session -->
                <div class="group p-8 rounded-[2rem] bg-white border border-slate-100 hover:border-red-100 hover:shadow-2xl transition-all duration-500" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-14 h-14 bg-red-50 rounded-2xl flex items-center justify-center text-red-500 mb-6 group-hover:rotate-6 transition-transform">
                        <i data-lucide="cloud-sun" class="w-7 h-7"></i>
                    </div>
                    <h4 class="text-xl font-bold text-slate-900 mb-2">Afternoon Session</h4>
                    <p class="text-red-600 font-bold mb-4"><?php echo e($contents['session_afternoon_time'] ?? '1:00 PM - 4:00 PM'); ?></p>
                    <p class="text-slate-600 text-sm leading-relaxed"><?php echo e($contents['session_afternoon_desc'] ?? 'Ideal for students and professionals with flexible daytime schedules.'); ?></p>
                </div>
                
                <!-- Evening Session -->
                <div class="group p-8 rounded-[2rem] bg-white border border-slate-100 hover:border-purple-100 hover:shadow-2xl transition-all duration-500" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-14 h-14 bg-purple-50 rounded-2xl flex items-center justify-center text-purple-600 mb-6 group-hover:rotate-6 transition-transform">
                        <i data-lucide="moon" class="w-7 h-7"></i>
                    </div>
                    <h4 class="text-xl font-bold text-slate-900 mb-2">Evening Session <span class="text-sm font-normal text-slate-400">(remotely)</span></h4>
                    <p class="text-purple-600 font-bold mb-4"><?php echo e($contents['session_evening_time'] ?? '5:00 PM - 8:00 PM'); ?></p>
                    <p class="text-slate-600 text-sm leading-relaxed"><?php echo e($contents['session_evening_desc'] ?? 'Designed for working professionals to upgrade skills after office hours.'); ?></p>
                </div>
                
                <!-- Weekend Classes -->
                <div class="group p-8 rounded-[2rem] bg-white border border-slate-100 hover:border-blue-100 hover:shadow-2xl transition-all duration-500" data-aos="fade-up" data-aos-delay="400">
                    <div class="w-14 h-14 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 mb-6 group-hover:rotate-6 transition-transform">
                        <i data-lucide="calendar" class="w-7 h-7"></i>
                    </div>
                    <h4 class="text-xl font-bold text-slate-900 mb-2">Weekend Classes</h4>
                    <p class="text-blue-600 font-bold mb-4"><?php echo e($contents['session_weekend_time'] ?? 'Saturdays'); ?></p>
                    <p class="text-slate-600 text-sm leading-relaxed"><?php echo e($contents['session_weekend_desc'] ?? 'Flexible weekend options for those with busy weekday commitments.'); ?></p>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="py-24 bg-slate-900 text-white relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-6 relative z-10">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-sm font-bold text-indigo-400 tracking-widest uppercase mb-4">TESTIMONIALS</h2>
                <h3 class="text-4xl md:text-5xl font-extrabold">Our Successful Students</h3>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Testimonial 1 -->
                <div class="p-10 rounded-[2.5rem] bg-white/5 border border-white/10 backdrop-blur-xl" data-aos="fade-up" data-aos-delay="100">
                    <div class="flex items-center gap-4 mb-8">
                        <img src="https://i.pravatar.cc/150?u=emily" class="w-16 h-16 rounded-2xl object-cover" alt="Emily">
                        <div>
                            <h4 class="font-bold text-lg">Emily Rivera</h4>
                            <p class="text-indigo-400 text-sm">Marketing Manager</p>
                        </div>
                    </div>
                    <p class="text-slate-300 italic text-lg leading-relaxed">"The courses here are exceptional. I've gained practical skills that I use daily in my role. The expert guidance was a game changer for my career path."</p>
                </div>
                
                <!-- Testimonial 2 -->
                <div class="p-10 rounded-[2.5rem] bg-indigo-600 shadow-2xl shadow-indigo-500/20" data-aos="fade-up" data-aos-delay="200">
                    <div class="flex items-center gap-4 mb-8">
                        <img src="https://i.pravatar.cc/150?u=michael" class="w-16 h-16 rounded-2xl object-cover border-2 border-white/20" alt="Michael">
                        <div>
                            <h4 class="font-bold text-lg">Michael Chen</h4>
                            <p class="text-indigo-100 text-sm">Freelance Developer</p>
                        </div>
                    </div>
                    <p class="text-indigo-50 italic text-lg leading-relaxed">"Flexible learning at its best. The platform's interface is intuitive and the content is top-notch. I went from zero to full-stack in less than 6 months!"</p>
                </div>
                
                <!-- Testimonial 3 -->
                <div class="p-10 rounded-[2.5rem] bg-white/5 border border-white/10 backdrop-blur-xl" data-aos="fade-up" data-aos-delay="300">
                    <div class="flex items-center gap-4 mb-8">
                        <img src="https://i.pravatar.cc/150?u=sofia" class="w-16 h-16 rounded-2xl object-cover" alt="Sofia">
                        <div>
                            <h4 class="font-bold text-lg">Sofia Patel</h4>
                            <p class="text-indigo-400 text-sm">UI Designer</p>
                        </div>
                    </div>
                    <p class="text-slate-300 italic text-lg leading-relaxed">"I completed the UX masterclass and it literally changed my life. The portfolio projects helped me land a job at a top tech firm within weeks of graduating."</p>
                </div>
            </div>
        </div>
        
        <!-- Decoration -->
        <div class="absolute -top-24 -left-24 w-96 h-96 bg-indigo-600/20 rounded-full blur-[100px]"></div>
        <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-purple-600/20 rounded-full blur-[100px]"></div>
    </section>

    <!-- Registration Form -->
    <section id="register" class="py-24 bg-white overflow-hidden">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid lg:grid-cols-2 gap-16 items-center">
                <!-- Content Column -->
                <div data-aos="fade-right">
                    <h2 class="text-sm font-bold text-indigo-600 tracking-widest uppercase mb-4">Get In touch</h2>
                    <h3 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-8 leading-tight"><?php echo $contents['register_header'] ?? "We're Committed to <br>your Success."; ?></h3>
                    <p class="text-xl text-slate-600 mb-8 leading-relaxed">
                        <?php echo e($contents['register_desc'] ?? 'Move from feeling ill-equipped and anxious about imminent catastrophe to outsmarting the bad actors and protecting your organization with confidence.'); ?>

                    </p>
                    <div class="flex flex-col gap-6">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600">
                                <i data-lucide="check-circle-2"></i>
                            </div>
                            <span class="font-semibold text-slate-700">Expert-led training modules</span>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600">
                                <i data-lucide="shield-check"></i>
                            </div>
                            <span class="font-semibold text-slate-700">Comprehensive security strategies</span>
                        </div>
                    </div>
                </div>

                <!-- Form Column -->
                <div data-aos="fade-left">
                    <div class="bg-white rounded-[3rem] shadow-2xl overflow-hidden border border-slate-100">
                        <div class="bg-indigo-600 px-10 py-12 text-white text-center relative overflow-hidden">
                            <h2 class="text-3xl font-bold mb-4 relative z-10"><?php echo e($contents['register_form_title'] ?? 'Register for a Course'); ?></h2>
                            <p class="text-indigo-100 text-lg relative z-10"><?php echo e($contents['register_form_subtitle'] ?? "Fill out the form below and we'll get back to you shortly."); ?></p>
                            <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
                        </div>
                        
                        <form action="/register" method="POST" class="p-8 md:p-12 space-y-6">
                            <?php echo csrf_field(); ?>
                            <div class="grid md:grid-cols-2 gap-6">
                                <div class="space-y-2">
                                    <label class="text-sm font-bold text-slate-700 ml-1">Full Name</label>
                                    <input type="text" name="full_name" required placeholder="John Doe" class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all">
                                </div>
                                <div class="space-y-2">
                                    <label class="text-sm font-bold text-slate-700 ml-1">Email Address</label>
                                    <input type="email" name="email" required placeholder="john@example.com" class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all">
                                </div>
                            </div>
                            
                            <div class="grid md:grid-cols-2 gap-6">
                                <div class="space-y-2">
                                    <label class="text-sm font-bold text-slate-700 ml-1">Phone Number</label>
                                    <input type="tel" name="phone" required placeholder="+1 234 567 890" class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all">
                                </div>
                                <div class="space-y-2">
                                    <label class="text-sm font-bold text-slate-700 ml-1">Select Course</label>
                                    <select name="course" required class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all bg-white">
                                        <option value="" disabled selected>Choose a program</option>
                                        <option>Software Engineering</option>
                                        <option>UI/UX Design</option>
                                        <option>Digital Marketing</option>
                                        <option>Business Analysis</option>
                                        <option>Data Science</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="text-sm font-bold text-slate-700 ml-1">Preferred Session</label>
                                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="session" value="Morning" class="peer sr-only">
                                        <div class="px-3 py-2 text-center border-2 border-slate-100 rounded-xl peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 hover:bg-slate-50 transition-all font-semibold text-sm">Morning</div>
                                    </label>
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="session" value="Afternoon" class="peer sr-only">
                                        <div class="px-3 py-2 text-center border-2 border-slate-100 rounded-xl peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 hover:bg-slate-50 transition-all font-semibold text-sm">Afternoon</div>
                                    </label>
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="session" value="Evening" class="peer sr-only">
                                        <div class="px-3 py-2 text-center border-2 border-slate-100 rounded-xl peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 hover:bg-slate-50 transition-all font-semibold text-sm">Evening</div>
                                    </label>
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="session" value="Weekend" class="peer sr-only">
                                        <div class="px-3 py-2 text-center border-2 border-slate-100 rounded-xl peer-checked:border-indigo-600 peer-checked:bg-indigo-50 peer-checked:text-indigo-600 hover:bg-slate-50 transition-all font-semibold text-sm">Weekend</div>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <label class="text-sm font-bold text-slate-700 ml-1">Additional Message</label>
                                <textarea name="message" rows="3" placeholder="Anything else you'd like to tell us?" class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all"></textarea>
                            </div>
                            
                            <button type="submit" class="w-full bg-indigo-600 text-white font-bold py-5 rounded-2xl hover:bg-indigo-700 shadow-xl hover:shadow-indigo-500/30 transition-all transform hover:-translate-y-1">Confirm Registration</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form Section (New) -->
    <section id="contact" class="py-24 bg-slate-50">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid lg:grid-cols-2 gap-16 items-center">
                <div data-aos="fade-right">
                    <h2 class="text-sm font-bold text-indigo-600 tracking-widest uppercase mb-4">GET IN TOUCH</h2>
                    <h3 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-8">Have Questions? <br>Reach Out to Us</h3>
                    <p class="text-lg text-slate-600 mb-12">Our support team is always here to help you. Whether you have a question about a course, pricing, or anything else, don't hesitate to contact us.</p>
                    
                    <div class="space-y-8">
                        <div class="flex items-center gap-6">
                            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-indigo-600">
                                <i data-lucide="mail"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-900">Email Us</h4>
                                <p class="text-slate-500">Info@seditechgroup.com</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-6">
                            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-indigo-600">
                                <i data-lucide="phone"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-900">Call Us</h4>
                                <p class="text-slate-500">+234 813 451 7546 <br> +234 915 9295 388</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-10 md:p-12 rounded-[2.5rem] shadow-xl" data-aos="fade-left">
                    <form action="/contact" method="POST" class="space-y-6">
                        <?php echo csrf_field(); ?>
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-slate-700 ml-1">Name</label>
                            <input type="text" name="name" required placeholder="Your Name" class="w-full px-6 py-4 rounded-xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-slate-700 ml-1">Email</label>
                            <input type="email" name="email" required placeholder="your@email.com" class="w-full px-6 py-4 rounded-xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-slate-700 ml-1">Message</label>
                            <textarea name="message" rows="5" required placeholder="How can we help?" class="w-full px-6 py-4 rounded-xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-indigo-600 text-white font-bold py-4 rounded-xl hover:bg-indigo-700 shadow-lg transition-all">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Newsletter Section -->
    <section class="py-24 bg-indigo-600 relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-6 relative z-10">
            <div class="max-w-3xl mx-auto text-center text-white">
                <h2 class="text-4xl md:text-5xl font-extrabold mb-6" data-aos="fade-up">Ready to Learn?</h2>
                <p class="text-xl text-indigo-100 mb-10" data-aos="fade-up" data-aos-delay="100">Subscribe to our newsletter and get 20% off your first course enrollment!</p>
                
                <form class="flex flex-col sm:flex-row gap-4 p-2 bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-full border border-white/20" data-aos="fade-up" data-aos-delay="200">
                    <input type="email" placeholder="Enter your email address" class="flex-1 px-8 py-4 bg-transparent text-white placeholder-indigo-200 outline-none border-none">
                    <button type="submit" class="bg-white text-indigo-600 px-10 py-4 rounded-2xl sm:rounded-full font-extrabold hover:bg-indigo-50 transition-all">Subscribe Now</button>
                </form>
            </div>
        </div>
        
        <!-- Decoration -->
        <div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none">
            <div class="absolute -top-20 -left-20 w-80 h-80 bg-white rounded-full blur-3xl"></div>
            <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-white rounded-full blur-3xl"></div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-slate-900 text-slate-300 pt-24 pb-12">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid md:grid-2 lg:grid-cols-4 gap-16 mb-20">
                <div class="col-span-1 lg:col-span-1">
                    <a href="#" class="flex items-center gap-2 mb-8">
                        <div class="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white">
                            <i data-lucide="graduation-cap"></i>
                        </div>
                        <span class="text-2xl font-extrabold tracking-tight text-white">ACADEMIA</span>
                    </a>
                    <p class="leading-relaxed mb-8"><?php echo e($contents['footer_about'] ?? 'Empowering learners worldwide through high-quality, accessible online education. Join our community of 15k+ students today.'); ?></p>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-indigo-600 transition-colors text-white">
                            <i data-lucide="facebook" class="w-5 h-5"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-indigo-600 transition-colors text-white">
                            <i data-lucide="twitter" class="w-5 h-5"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-indigo-600 transition-colors text-white">
                            <i data-lucide="instagram" class="w-5 h-5"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-indigo-600 transition-colors text-white">
                            <i data-lucide="linkedin" class="w-5 h-5"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-white font-bold mb-8 uppercase text-xs tracking-widest">Explore</h4>
                    <ul class="space-y-4">
                        <li><a href="#" class="hover:text-indigo-400 transition">About Us</a></li>
                        <li><a href="#courses" class="hover:text-indigo-400 transition">Popular Courses</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition">Our Mentors</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition">Success Stories</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white font-bold mb-8 uppercase text-xs tracking-widest">Support</h4>
                    <ul class="space-y-4">
                        <li><a href="#" class="hover:text-indigo-400 transition">Help Center</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition">Terms of Service</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition">Privacy Policy</a></li>
                        <li><a href="#contact" class="hover:text-indigo-400 transition">Contact Us</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white font-bold mb-8 uppercase text-xs tracking-widest">Contact Info</h4>
                    <ul class="space-y-6">
                        <li class="flex items-center gap-4">
                            <i data-lucide="phone" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
                            <span class="text-sm">+234 813 451 7546</span>
                        </li>
                        <li class="flex items-center gap-4">
                            <i data-lucide="phone" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
                            <span class="text-sm">+234 915 9295 388</span>
                        </li>
                        <li class="flex items-center gap-4">
                            <i data-lucide="mail" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
                            <span class="text-sm">Info@seditechgroup.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
                <p class="text-xs text-slate-500">© 2026 Academia Inc. All rights reserved.</p>
                <div class="flex gap-8 text-xs text-slate-500">
                    <a href="#" class="hover:text-white transition">Privacy Policy</a>
                    <a href="#" class="hover:text-white transition">Cookie Policy</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        // Initialize Lucide icons
        lucide.createIcons();
        
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true,
            offset: 100
        });

        // Sticky Header Effect
        const header = document.getElementById('main-header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 20) {
                header.classList.add('py-2', 'shadow-lg');
                header.classList.remove('py-4');
            } else {
                header.classList.remove('py-2', 'shadow-lg');
                header.classList.add('py-4');
            }
        });

        // Mobile Menu Toggle
        const navToggle = document.getElementById('nav-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        navToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Rotating Hero Titles
        const titles = [
            "BUILD YOUR TECH CAREER", 
            "ADVANCED COMPUTER TRAINING", 
            "PROFESSIONAL IT CERTIFICATIONS"
        ];
        let currentIndex = 0;
        const titleEl = document.getElementById('rotating-title');

        function rotateTitle() {
            titleEl.classList.add('fade-out');
            
            setTimeout(() => {
                currentIndex = (currentIndex + 1) % titles.length;
                titleEl.textContent = titles[currentIndex];
                titleEl.classList.remove('fade-out');
                titleEl.classList.add('fade-in');
                
                setTimeout(() => {
                    titleEl.classList.remove('fade-in');
                }, 500);
            }, 500);
        }

        setInterval(rotateTitle, 4000);
    </script>
</body>
</html><?php /**PATH /Applications/MAMP/htdocs/comp/resources/views/welcome.blade.php ENDPATH**/ ?>