course_detail.php

<?php
session_start();
require_once 'db/config.php';
require_once 'notification_helper.php';

// Handle logout
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: login_signup.php');
    exit();
}

// Function to fetch course details by ID
function fetchCourseById($conn, $courseId) {
    $sql = "SELECT c.*, e.fullname as instructor_name, e.image as instructor_image, e.about_me as instructor_bio
            FROM course c 
            LEFT JOIN expert e ON c.eid = e.eid 
            WHERE c.cid = ?";
    
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("i", $courseId);
    $stmt->execute();
    $result = $stmt->get_result();
    
    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        
        // Generate random data for missing fields
        $studentCount = rand(150, 1500);
        $rating = number_format(rand(42, 50) / 10, 1);
        
        // Process comma-separated data
        $whatYouLearn = $row['outcome'] ? explode(',', $row['outcome']) : [];
        $courseContent = $row['content'] ? explode(',', $row['content']) : [];
        
        // Determine if course is free
        $fee = $row['fee'];
        $price = (stripos($fee, '0') === 0 || empty($fee)) ? 'FREE!' : $fee;
        
        return [
            'cid' => $row['cid'],
            'id' => $row['cid'],
            'title' => $row['title'],
            'teacher' => $row['instructor_name'] ?: 'Mental Health Expert',
            'desc' => $row['description'],
            'img' => $row['image'],
            'price' => $price,
            'duration' => $row['duration'],
            'level' => $row['type'],
            'students' => $studentCount . '+',
            'rating' => $rating,
            'instructor_bio' => $row['instructor_bio'] ?: 'Experienced mental health professional dedicated to helping students achieve their wellness goals.',
            'instructor_image' => $row['instructor_image'],
            'what_you_learn' => $whatYouLearn,
            'course_content' => $courseContent,
            'eid' => $row['eid']
        ];
    }
    
    return null;
}

// Function to check if user is enrolled in course
function checkUserEnrollment($conn, $userId, $courseId) {
    $sql = "SELECT * FROM enrollment WHERE uid = ? AND cid = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("ii", $userId, $courseId);
    $stmt->execute();
    $result = $stmt->get_result();
    
    if ($result->num_rows > 0) {
        return $result->fetch_assoc();
    }
    
    return null;
}

// Function to enroll user in course
function enrollUser($conn, $userId, $courseId, $userName) {
    // Check if user name matches session user
    $userCheckSql = "SELECT fullname FROM user WHERE uid = ?";
    $userStmt = $conn->prepare($userCheckSql);
    $userStmt->bind_param("i", $userId);
    $userStmt->execute();
    $userResult = $userStmt->get_result();
    
    if ($userResult->num_rows > 0) {
        $user = $userResult->fetch_assoc();
        if (strtolower($user['fullname']) === strtolower($userName)) {
            // Insert enrollment
            $sql = "INSERT INTO enrollment (uid, cid, feedback, status) VALUES (?, ?, '', 'in progress')";
            $stmt = $conn->prepare($sql);
            $stmt->bind_param("ii", $userId, $courseId);
            
            if ($stmt->execute()) {
                // Get course name for notification
                $courseSql = "SELECT title FROM course WHERE cid = ?";
                $courseStmt = $conn->prepare($courseSql);
                $courseStmt->bind_param("i", $courseId);
                $courseStmt->execute();
                $courseResult = $courseStmt->get_result();
                
                if ($courseRow = $courseResult->fetch_assoc()) {
                    // Send notification to other enrolled users
                    notifyCourseNewMember($conn, $courseId, $user['fullname'], $courseRow['title'], $userId);
                }
                $courseStmt->close();
                
                return true;
            }
        }
    }
    
    return false;
}

// Function to update enrollment status
function updateEnrollmentStatus($conn, $userId, $courseId, $status) {
    $sql = "UPDATE enrollment SET status = ? WHERE uid = ? AND cid = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("sii", $status, $userId, $courseId);
    return $stmt->execute();
}

// Function to update enrollment feedback
function updateEnrollmentFeedback($conn, $userId, $courseId, $feedback) {
    $sql = "UPDATE enrollment SET feedback = ? WHERE uid = ? AND cid = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("sii", $feedback, $userId, $courseId);
    
    if ($stmt->execute()) {
        // Get user name and course name for notification
        $userSql = "SELECT fullname FROM user WHERE uid = ?";
        $userStmt = $conn->prepare($userSql);
        $userStmt->bind_param("i", $userId);
        $userStmt->execute();
        $userResult = $userStmt->get_result();
        
        $courseSql = "SELECT title FROM course WHERE cid = ?";
        $courseStmt = $conn->prepare($courseSql);
        $courseStmt->bind_param("i", $courseId);
        $courseStmt->execute();
        $courseResult = $courseStmt->get_result();
        
        if ($userResult->num_rows > 0 && $courseResult->num_rows > 0) {
            $userRow = $userResult->fetch_assoc();
            $courseRow = $courseResult->fetch_assoc();
            
            // Send notification to other users and experts taking the course
            notifyCourseFeedback($conn, $courseId, $userRow['fullname'], $courseRow['title'], $userId);
        }
        
        $userStmt->close();
        $courseStmt->close();
        
        return true;
    }
    
    return false;
}

// Function to get all feedback for a course (for experts to view)
function getCourseFeedback($conn, $courseId) {
    $sql = "SELECT e.feedback, e.status, u.fullname 
            FROM enrollment e 
            JOIN user u ON e.uid = u.uid 
            WHERE e.cid = ? AND e.feedback IS NOT NULL AND e.feedback != '' 
            ORDER BY e.joined_at DESC";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("i", $courseId);
    $stmt->execute();
    $result = $stmt->get_result();
    
    $feedback = [];
    while ($row = $result->fetch_assoc()) {
        $feedback[] = $row;
    }
    
    return $feedback;
}

// Get course ID from URL
$courseId = isset($_GET['id']) ? (int)$_GET['id'] : 1;

// Fetch course details
$course = fetchCourseById($conn, $courseId);

// Redirect if course not found
if (!$course) {
    header('Location: courses.php');
    exit;
}

// Check user enrollment
$userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
$expertId = isset($_SESSION['expert_id']) ? $_SESSION['expert_id'] : null;
$enrollment = null;
$courseFeedback = [];

if ($userId) {
    $enrollment = checkUserEnrollment($conn, $userId, $courseId);
} elseif ($expertId) {
    // If expert, get all feedback for this course instead of enrollment
    $courseFeedback = getCourseFeedback($conn, $courseId);
}

// Handle POST requests
$message = '';
$messageType = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['enroll']) && $userId) {
        $userName = trim($_POST['user_name']);
        $courseIdToEnroll = (int)$_POST['course_id'];
        if (enrollUser($conn, $userId, $courseIdToEnroll, $userName)) {
            $message = 'Successfully enrolled in the course!';
            $messageType = 'success';
            $enrollment = checkUserEnrollment($conn, $userId, $courseIdToEnroll); // Refresh enrollment status
        } else {
            $message = 'Enrollment failed. Please check your name and try again.';
            $messageType = 'error';
        }
    } elseif (isset($_POST['update_status']) && $userId && $enrollment) {
        $newStatus = $_POST['update_status'];
        $courseIdToUpdate = (int)$_POST['course_id'];
        if (updateEnrollmentStatus($conn, $userId, $courseIdToUpdate, $newStatus)) {
            $message = 'Status updated successfully!';
            $messageType = 'success';
            $enrollment['status'] = $newStatus; // Update local enrollment data
        } else {
            $message = 'Failed to update status.';
            $messageType = 'error';
        }
    } elseif (isset($_POST['update_feedback']) && $userId && $enrollment) {
        $feedback = trim($_POST['feedback']);
        $courseIdToUpdate = (int)$_POST['course_id'];
        if (updateEnrollmentFeedback($conn, $userId, $courseIdToUpdate, $feedback)) {
            $message = 'Feedback updated successfully!';
            $messageType = 'success';
            $enrollment['feedback'] = $feedback; // Update local enrollment data
        } else {
            $message = 'Failed to update feedback.';
            $messageType = 'error';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($course['title']) ?> - Soullift</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0fdfc',
                            100: '#ccfbf1',
                            200: '#99f6e4',
                            300: '#5eead4',
                            400: '#2dd4bf',
                            500: '#14b8a6',
                            600: '#0d9488',
                            700: '#0f766e',
                            800: '#115e59',
                            900: '#134e4a',
                        },
                        secondary: {
                            50: '#fdf4ff',
                            100: '#fae8ff',
                            200: '#f5d0fe',
                            300: '#f0abfc',
                            400: '#e879f9',
                            500: '#dc4cff',
                            600: '#c026d3',
                            700: '#a21caf',
                            800: '#86198f',
                            900: '#701a75',
                        },
                        accent: {
                            50: '#fff7ed',
                            100: '#ffedd5',
                            200: '#fed7aa',
                            300: '#fdba74',
                            400: '#fb923c',
                            500: '#f97316',
                            600: '#ea580c',
                            700: '#c2410c',
                            800: '#9a3412',
                            900: '#7c2d12',
                        }
                    },
                    fontFamily: {
                        'heading': ['Poppins', 'sans-serif'],
                        'body': ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'fade-in': 'fadeIn 0.5s ease-in',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'bounce-in': 'bounceIn 0.5s ease-out',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #dc4cff 0%, #a21caf 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #14b8a6 0%, #dc4cff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes bounceIn {
            from { opacity: 0; transform: scale(0.3); }
            50% { opacity: 1; transform: scale(1.05); }
            to { opacity: 1; transform: scale(1); }
        }
        
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(148, 163, 184, 0.1);
            border-radius: 3px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #14b8a6, #dc4cff);
            border-radius: 3px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #0f766e, #a21caf);
        }
        
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        }
        
        function toggleModule(index) {
            const content = document.getElementById(`module-${index}`);
            const chevron = document.getElementById(`chevron-${index}`);
            
            if (content.classList.contains('hidden')) {
                content.classList.remove('hidden');
                content.classList.add('animate-slide-up');
                chevron.style.transform = 'rotate(90deg)';
            } else {
                content.classList.add('hidden');
                content.classList.remove('animate-slide-up');
                chevron.style.transform = 'rotate(0deg)';
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-primary-50 via-white to-secondary-50 min-h-screen font-body">
    <!-- Floating Background Elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-20 left-10 w-32 h-32 bg-primary-200 rounded-full opacity-20 animate-float"></div>
        <div class="absolute top-40 right-20 w-24 h-24 bg-secondary-300 rounded-full opacity-20 animate-float" style="animation-delay: 2s;"></div>
        <div class="absolute bottom-40 left-1/4 w-20 h-20 bg-accent-200 rounded-full opacity-20 animate-float" style="animation-delay: 4s;"></div>
        <div class="absolute bottom-20 right-1/3 w-28 h-28 bg-primary-300 rounded-full opacity-20 animate-float" style="animation-delay: 1s;"></div>
    </div>
    <!-- Navigation -->
    <header class="glass-effect sticky top-0 z-50 border-b border-white/20">
        <div class="container mx-auto px-6">
            <nav class="flex justify-between items-center py-4">
                <!-- Logo -->
                <a href="Homepage.php" class="flex items-center space-x-3 group">
                    <div class="relative">
                        <img src="resources/soullift-logo.svg" alt="SoulLift Logo" class="h-10 w-auto group-hover:scale-105 transition-transform duration-300">
                    </div>
                </a>
                
                <!-- Desktop Navigation -->
                <ul class="hidden lg:flex items-center space-x-8">
                    <li><a href="Homepage.php?page=home" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Home</a></li>
                    <li><a href="user_profile.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">My Profile</a></li>
                    <li><a href="blog.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Blog</a></li>
                    <?php
                        // choose appointments page based on role
                        $appointmentsPage = (isset($_SESSION['role']) && $_SESSION['role'] === 'expert') ? 'expert_appointments.php' : 'user_appointments.php';
                    ?>
                    <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'user'): ?>
                        <li><a href="experts.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Experts</a></li>
                        <li><a href="courses.php" class="text-primary-600 font-semibold px-4 py-2 rounded-xl bg-primary-50/50 backdrop-blur-sm">Courses</a></li>
                        <li><a href="services.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Services</a></li>
                        <li><a href="<?php echo $appointmentsPage; ?>" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Appointments</a></li>
                    <?php elseif (isset($_SESSION['role']) && $_SESSION['role'] === 'expert'): ?>
                        <li><a href="courses.php" class="text-primary-600 font-semibold px-4 py-2 rounded-xl bg-primary-50/50 backdrop-blur-sm">Courses</a></li>
                        <li><a href="schedule.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Schedule</a></li>
                        <li><a href="<?php echo $appointmentsPage; ?>" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Appointments</a></li>
                    <?php else: ?>
                        <li><a href="courses.php" class="text-primary-600 font-semibold px-4 py-2 rounded-xl bg-primary-50/50 backdrop-blur-sm">Courses</a></li>
                    <?php endif; ?>
                    <li><a href="about.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">About Us</a></li>
                </ul>

                <!-- Right side buttons -->
                <div class="flex items-center space-x-4">
                    <!-- Notification Button -->
                    <a href="notifications.php" class="relative glass-effect text-primary-600 px-4 py-2 rounded-xl hover:bg-white/50 transition-all duration-300 group">
                        <i class="fas fa-bell mr-2 group-hover:animate-pulse"></i>
                        <span class="hidden sm:inline">Notifications</span>
                    </a>
                    
                    <?php if (isset($_SESSION['role'])): ?>
                        <a href="Homepage.php?logout=1" class="btn-secondary text-white px-6 py-2 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300">
                            <i class="fas fa-sign-out-alt mr-2"></i>
                            Log Out
                        </a>
                    <?php else: ?>
                        <a href="login_signup.php" class="btn-primary text-white px-6 py-2 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300">
                            <i class="fas fa-rocket mr-2"></i>
                            Get Started
                        </a>
                    <?php endif; ?>
                </div>
                
                <!-- Mobile Menu Button -->
                <button class="lg:hidden text-gray-700 hover:text-primary-600 transition-colors p-2" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </nav>
            
            <!-- Mobile Navigation -->
            <div id="mobile-menu" class="lg:hidden hidden pb-4">
                <div class="glass-card rounded-2xl p-4 mt-4">
                    <ul class="space-y-2">
                        <li><a href="Homepage.php?page=home" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Home</a></li>
                        <li><a href="user_profile.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">My Profile</a></li>
                        <li><a href="blog.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Blog</a></li>
                        <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'user'): ?>
                            <li><a href="experts.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Experts</a></li>
                            <li><a href="courses.php" class="block text-primary-600 font-semibold px-4 py-3 rounded-xl bg-primary-50/50">Courses</a></li>
                            <li><a href="services.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Services</a></li>
                            <li><a href="<?php echo $appointmentsPage; ?>" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Appointments</a></li>
                        <?php elseif (isset($_SESSION['role']) && $_SESSION['role'] === 'expert'): ?>
                            <li><a href="courses.php" class="block text-primary-600 font-semibold px-4 py-3 rounded-xl bg-primary-50/50">Courses</a></li>
                            <li><a href="schedule.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Schedule</a></li>
                            <li><a href="<?php echo $appointmentsPage; ?>" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Appointments</a></li>
                        <?php else: ?>
                            <li><a href="courses.php" class="block text-primary-600 font-semibold px-4 py-3 rounded-xl bg-primary-50/50">Courses</a></li>
                        <?php endif; ?>
                        <li><a href="about.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">About Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <!-- Notification Messages -->
    <?php if ($message): ?>
    <div class="fixed top-20 right-4 z-50 <?= $messageType === 'success' ? 'bg-green-500' : 'bg-red-500' ?> text-white px-6 py-4 rounded-lg shadow-2xl" id="notification">
        <div class="flex items-center space-x-3">
            <i class="fas <?= $messageType === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle' ?> text-xl"></i>
            <span class="font-semibold"><?= htmlspecialchars($message) ?></span>
            <button onclick="hideNotification()" class="ml-4 text-white hover:text-gray-200">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    <script>
        function hideNotification() {
            document.getElementById('notification').style.display = 'none';
        }
        // Auto hide after 5 seconds
        setTimeout(hideNotification, 5000);
    </script>
    <?php endif; ?>

    <!-- Course Hero Section -->
    <section class="pt-24 pb-12 bg-gradient-to-br from-primary-50 via-white to-secondary-50 relative z-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div class="animate-fade-in">
                    <a href="courses.php" class="inline-flex items-center text-primary-600 hover:text-primary-800 font-medium mb-6 transition-all duration-300 group glass-effect px-4 py-2 rounded-lg">
                        <i class="fas fa-arrow-left mr-2 group-hover:-translate-x-1 transition-transform"></i>
                        Back to Courses
                    </a>
                    
                    <div class="flex items-center space-x-2 mb-4">
                        <span class="bg-gradient-to-r from-primary-100 to-primary-200 text-primary-800 px-4 py-2 rounded-full text-sm font-medium shadow-sm">
                            <?= htmlspecialchars($course['level']) ?>
                        </span>
                        <?php if($course['price'] === 'FREE!'): ?>
                        <span class="bg-gradient-to-r from-accent-100 to-accent-200 text-accent-800 px-4 py-2 rounded-full text-sm font-medium shadow-sm">FREE</span>
                        <?php else: ?>
                        <span class="bg-gradient-to-r from-secondary-500 to-secondary-600 text-white px-4 py-2 rounded-full text-sm font-medium shadow-sm"><?= htmlspecialchars($course['price']) ?></span>
                        <?php endif; ?>
                    </div>
                    
                    <h1 class="text-4xl md:text-5xl font-heading font-bold gradient-text mb-6 animate-slide-up">
                        <?= htmlspecialchars($course['title']) ?>
                    </h1>
                    
                    <p class="text-xl text-slate-600 mb-8 leading-relaxed">
                        <?= htmlspecialchars($course['desc']) ?>
                    </p>
                    
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                        <div class="text-center group">
                            <div class="w-12 h-12 bg-gradient-to-br from-primary-100 to-primary-200 rounded-full flex items-center justify-center mx-auto mb-2 shadow-sm group-hover:shadow-lg transition-shadow">
                                <i class="fas fa-clock text-primary-600"></i>
                            </div>
                            <p class="text-sm font-medium text-slate-900"><?= htmlspecialchars($course['duration']) ?></p>
                            <p class="text-xs text-slate-600">Duration</p>
                        </div>
                        
                        <div class="text-center group">
                            <div class="w-12 h-12 bg-gradient-to-br from-secondary-100 to-secondary-200 rounded-full flex items-center justify-center mx-auto mb-2 shadow-sm group-hover:shadow-lg transition-shadow">
                                <i class="fas fa-users text-secondary-600"></i>
                            </div>
                            <p class="text-sm font-medium text-slate-900"><?= htmlspecialchars($course['students']) ?></p>
                            <p class="text-xs text-slate-600">Students</p>
                        </div>
                        
                        <div class="text-center group">
                            <div class="w-12 h-12 bg-gradient-to-br from-accent-100 to-accent-200 rounded-full flex items-center justify-center mx-auto mb-2 shadow-sm group-hover:shadow-lg transition-shadow">
                                <i class="fas fa-star text-accent-600"></i>
                            </div>
                            <p class="text-sm font-medium text-slate-900"><?= htmlspecialchars($course['rating']) ?></p>
                            <p class="text-xs text-slate-600">Rating</p>
                        </div>
                        
                        <div class="text-center group">
                            <div class="w-12 h-12 bg-gradient-to-br from-primary-100 to-accent-100 rounded-full flex items-center justify-center mx-auto mb-2 shadow-sm group-hover:shadow-lg transition-shadow">
                                <i class="fas fa-certificate text-primary-600"></i>
                            </div>
                            <p class="text-sm font-medium text-slate-900">Yes</p>
                            <p class="text-xs text-slate-600">Certificate</p>
                        </div>
                    </div>
                </div>
                
                <div class="relative animate-bounce-in">
                    <div class="glass-card rounded-2xl p-2 shadow-xl border border-white/20">
                        <img src="<?= htmlspecialchars($course['img']) ?>" alt="<?= htmlspecialchars($course['title']) ?>" 
                             class="w-full h-96 object-cover rounded-xl">
                        <div class="absolute inset-2 bg-gradient-to-t from-black/20 to-transparent rounded-xl"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <section class="py-16 relative z-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-3 gap-12">
                <!-- Course Content -->
                <div class="lg:col-span-2 space-y-8">
                    <!-- What You'll Learn -->
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-r from-primary-400 to-secondary-400 rounded-3xl blur opacity-25 group-hover:opacity-40 transition duration-1000"></div>
                        <div class="relative glass-card rounded-2xl p-8 shadow-xl animate-fade-in border border-white/30">
                            <div class="flex items-center mb-8">
                                <div class="relative">
                                    <div class="w-16 h-16 bg-gradient-to-br from-primary-400 via-secondary-400 to-accent-400 rounded-2xl flex items-center justify-center shadow-lg transform rotate-3 group-hover:rotate-6 transition-transform">
                                        <i class="fas fa-lightbulb text-white text-xl"></i>
                                    </div>
                                    <div class="absolute -top-2 -right-2 w-6 h-6 bg-accent-400 rounded-full animate-pulse"></div>
                                </div>
                                <div class="ml-6">
                                    <h2 class="text-3xl font-heading font-bold gradient-text">What You'll Learn</h2>
                                    <p class="text-slate-600 mt-1">Key skills and insights you'll gain</p>
                                </div>
                            </div>
                            
                            <div class="grid md:grid-cols-2 gap-6">
                                <?php 
                                if (!empty($course['what_you_learn'])) {
                                    foreach ($course['what_you_learn'] as $index => $learning): 
                                        $learning = trim($learning);
                                        if (!empty($learning)):
                                ?>
                                <div class="group/item flex items-start space-x-4 p-4 rounded-xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-secondary-50 transition-all duration-300 border border-transparent hover:border-primary-200">
                                    <div class="relative">
                                        <div class="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center shadow-md group-hover/item:shadow-lg group-hover/item:scale-110 transition-all duration-300">
                                            <span class="text-white text-sm font-bold"><?= $index + 1 ?></span>
                                        </div>
                                        <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-secondary-400 rounded-full opacity-0 group-hover/item:opacity-100 transition-opacity"></div>
                                    </div>
                                    <div class="flex-1">
                                        <p class="text-slate-700 font-medium group-hover/item:text-slate-900 transition-colors leading-relaxed"><?= htmlspecialchars($learning) ?></p>
                                    </div>
                                </div>
                                <?php 
                                        endif;
                                    endforeach;
                                } else {
                                    echo '<p class="text-slate-600 col-span-2 text-center py-8">Learning objectives not available.</p>';
                                }
                                ?>
                            </div>
                        </div>
                    </div>

                    <!-- Course Content -->
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-r from-secondary-400 to-accent-400 rounded-3xl blur opacity-25 group-hover:opacity-40 transition duration-1000"></div>
                        <div class="relative glass-card rounded-2xl p-8 shadow-xl animate-slide-up border border-white/30">
                            <div class="flex items-center mb-8">
                                <div class="relative">
                                    <div class="w-16 h-16 bg-gradient-to-br from-secondary-400 via-accent-400 to-primary-400 rounded-2xl flex items-center justify-center shadow-lg transform -rotate-3 group-hover:-rotate-6 transition-transform">
                                        <i class="fas fa-book-open text-white text-xl"></i>
                                    </div>
                                    <div class="absolute -top-2 -right-2 w-6 h-6 bg-primary-400 rounded-full animate-pulse" style="animation-delay: 0.5s;"></div>
                                </div>
                                <div class="ml-6">
                                    <h2 class="text-3xl font-heading font-bold gradient-text">Course Curriculum</h2>
                                    <p class="text-slate-600 mt-1">Structured learning path</p>
                                </div>
                            </div>
                            
                            <div class="space-y-3">
                            <?php 
                            if (!empty($course['course_content'])) {
                                foreach ($course['course_content'] as $index => $content): 
                                    $content = trim($content);
                                    if (!empty($content)):
                                        $moduleColor = ['primary', 'secondary', 'accent'][($index) % 3];
                            ?>
                            <div class="group/module border border-slate-200 rounded-xl overflow-hidden hover:border-<?= $moduleColor ?>-300 transition-all duration-300 bg-white/50 backdrop-blur-sm">
                                <div class="flex items-center p-5 cursor-pointer" onclick="toggleModule(<?= $index ?>)">
                                    <div class="flex items-center space-x-4 flex-1">
                                        <div class="relative">
                                            <div class="w-12 h-12 bg-gradient-to-br from-<?= $moduleColor ?>-400 to-<?= $moduleColor ?>-600 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover/module:shadow-xl group-hover/module:scale-105 transition-all duration-300">
                                                <?= sprintf("%02d", $index + 1) ?>
                                            </div>
                                            <div class="absolute -top-1 -right-1 w-4 h-4 bg-white rounded-full border-2 border-<?= $moduleColor ?>-400 opacity-0 group-hover/module:opacity-100 transition-opacity">
                                                <div class="w-full h-full bg-<?= $moduleColor ?>-400 rounded-full animate-ping"></div>
                                            </div>
                                        </div>
                                        <div class="flex-1">
                                            <h3 class="font-heading font-semibold text-slate-900 group-hover/module:text-<?= $moduleColor ?>-700 transition-colors text-lg">
                                                Module <?= $index + 1 ?>
                                            </h3>
                                            <p class="text-slate-600 text-sm mt-1 line-clamp-2"><?= htmlspecialchars($content) ?></p>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center group-hover/module:bg-<?= $moduleColor ?>-100 transition-colors">
                                            <i class="fas fa-chevron-right text-slate-500 group-hover/module:text-<?= $moduleColor ?>-600 transition-all duration-300 transform group-hover/module:translate-x-0.5" id="chevron-<?= $index ?>"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="hidden px-5 pb-5" id="module-<?= $index ?>">
                                    <div class="bg-gradient-to-r from-<?= $moduleColor ?>-50 to-<?= $moduleColor ?>-100/50 rounded-lg p-4 border-l-4 border-<?= $moduleColor ?>-400">
                                        <p class="text-slate-700 leading-relaxed"><?= htmlspecialchars($content) ?></p>
                                        <div class="flex items-center mt-3 space-x-4 text-sm text-<?= $moduleColor ?>-600">
                                            <span class="flex items-center">
                                                <i class="fas fa-clock mr-1"></i>
                                                <?= rand(15, 45) ?> min
                                            </span>
                                            <span class="flex items-center">
                                                <i class="fas fa-play-circle mr-1"></i>
                                                Video lesson
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php 
                                    endif;
                                endforeach;
                            } else {
                                echo '<div class="text-center py-12 text-slate-600">
                                        <i class="fas fa-book-open text-4xl mb-4 opacity-50"></i>
                                        <p>Course content not available.</p>
                                      </div>';
                            }
                            ?>
                        </div>
                        
                        <!-- Course Stats -->
                        <div class="mt-8 grid grid-cols-3 gap-4">
                            <div class="text-center p-4 bg-gradient-to-br from-primary-50 to-primary-100 rounded-xl border border-primary-200">
                                <div class="text-2xl font-bold text-primary-700"><?= count($course['course_content']) ?></div>
                                <div class="text-sm text-primary-600">Modules</div>
                            </div>
                            <div class="text-center p-4 bg-gradient-to-br from-secondary-50 to-secondary-100 rounded-xl border border-secondary-200">
                                <div class="text-2xl font-bold text-secondary-700"><?= rand(8, 20) ?>h</div>
                                <div class="text-sm text-secondary-600">Content</div>
                            </div>
                            <div class="text-center p-4 bg-gradient-to-br from-accent-50 to-accent-100 rounded-xl border border-accent-200">
                                <div class="text-2xl font-bold text-accent-700"><?= rand(5, 15) ?></div>
                                <div class="text-sm text-accent-600">Resources</div>
                            </div>
                        </div>
                    </div>
                </div>

                    <!-- Instructor Info -->
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-r from-accent-400 to-primary-400 rounded-3xl blur opacity-25 group-hover:opacity-40 transition duration-1000"></div>
                        <div class="relative glass-card rounded-2xl p-8 shadow-xl border border-white/30 animate-bounce-in overflow-hidden">
                            <!-- Background Pattern -->
                            <div class="absolute top-0 right-0 w-32 h-32 opacity-5">
                                <svg viewBox="0 0 100 100" class="w-full h-full">
                                    <circle cx="50" cy="50" r="30" fill="currentColor"/>
                                    <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
                                    <circle cx="50" cy="50" r="10" fill="currentColor"/>
                                </svg>
                            </div>
                            
                            <div class="relative">
                                <div class="flex items-center mb-8">
                                    <div class="relative">
                                        <div class="w-16 h-16 bg-gradient-to-br from-accent-400 via-primary-400 to-secondary-400 rounded-2xl flex items-center justify-center shadow-lg">
                                            <i class="fas fa-user-tie text-white text-xl"></i>
                                        </div>
                                        <div class="absolute -top-2 -right-2 w-6 h-6 bg-secondary-400 rounded-full animate-pulse" style="animation-delay: 1s;"></div>
                                    </div>
                                    <div class="ml-6">
                                        <h2 class="text-3xl font-heading font-bold gradient-text">Meet Your Instructor</h2>
                                        <p class="text-slate-600 mt-1">Expert guidance every step</p>
                                    </div>
                                </div>
                                
                                <div class="flex flex-col sm:flex-row sm:items-start sm:space-x-8 space-y-6 sm:space-y-0">
                                    <div class="relative flex-shrink-0 mx-auto sm:mx-0">
                                        <div class="relative w-32 h-32 group/avatar">
                                            <?php if ($course['instructor_image']): ?>
                                                <img src="<?= htmlspecialchars($course['instructor_image']) ?>" alt="<?= htmlspecialchars($course['teacher']) ?>" class="w-32 h-32 rounded-2xl object-cover border-4 border-white shadow-xl group-hover/avatar:shadow-2xl transition-shadow">
                                            <?php else: ?>
                                                <div class="w-32 h-32 bg-gradient-to-br from-primary-200 via-secondary-200 to-accent-200 rounded-2xl flex items-center justify-center border-4 border-white shadow-xl">
                                                    <i class="fas fa-user text-primary-600 text-4xl"></i>
                                                </div>
                                            <?php endif; ?>
                                            
                                            <!-- Floating elements around avatar -->
                                            <div class="absolute -top-2 -left-2 w-4 h-4 bg-primary-400 rounded-full animate-bounce"></div>
                                            <div class="absolute -bottom-2 -right-2 w-6 h-6 bg-secondary-400 rounded-full animate-bounce" style="animation-delay: 0.5s;"></div>
                                            <div class="absolute top-1/2 -right-3 w-3 h-3 bg-accent-400 rounded-full animate-bounce" style="animation-delay: 1s;"></div>
                                        </div>
                                    </div>
                                    
                                    <div class="flex-1 text-center sm:text-left">
                                        <h3 class="text-2xl font-heading font-bold text-slate-900 mb-3"><?= htmlspecialchars($course['teacher']) ?></h3>
                                        <p class="text-slate-600 leading-relaxed mb-6"><?= htmlspecialchars($course['instructor_bio']) ?></p>
                                        
                                        <!-- Instructor badges -->
                                        <div class="flex flex-wrap gap-3 justify-center sm:justify-start">
                                            <span class="px-4 py-2 bg-gradient-to-r from-primary-100 to-primary-200 text-primary-700 rounded-full text-sm font-medium border border-primary-300">
                                                <i class="fas fa-award mr-2"></i>Certified Expert
                                            </span>
                                            <span class="px-4 py-2 bg-gradient-to-r from-secondary-100 to-secondary-200 text-secondary-700 rounded-full text-sm font-medium border border-secondary-300">
                                                <i class="fas fa-users mr-2"></i><?= rand(500, 2000) ?>+ Students
                                            </span>
                                            <span class="px-4 py-2 bg-gradient-to-r from-accent-100 to-accent-200 text-accent-700 rounded-full text-sm font-medium border border-accent-300">
                                                <i class="fas fa-star mr-2"></i><?= number_format(rand(45, 50) / 10, 1) ?> Rating
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Enrollment Sidebar -->
                <div class="lg:col-span-1">
                    <div class="glass-card rounded-2xl p-8 shadow-lg sticky top-24 border border-white/20 animate-fade-in">
                        <div class="text-center mb-6">
                            <div class="text-4xl font-heading font-bold gradient-text mb-2">
                                <?= htmlspecialchars($course['price']) ?>
                            </div>
                            <?php if($course['price'] !== 'Free' && $course['price'] !== 'FREE!'): ?>
                            <p class="text-slate-600">One-time payment</p>
                            <?php endif; ?>
                        </div>

                        <?php if ($enrollment): ?>
                        <!-- Enrolled Student Interface -->
                        <div class="space-y-6">
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-check-circle text-green-600"></i>
                                    <span class="text-green-800 font-semibold">You're enrolled in this course!</span>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <h3 class="font-semibold text-gray-900">Update Status:</h3>
                                <div class="text-center text-sm text-gray-600">
                                    Status: <span class="font-semibold capitalize text-purple-500"><?= htmlspecialchars($enrollment['status']) ?></span>
                                </div>
                                <form method="POST" class="flex space-x-2">
                                    <input type="hidden" name="course_id" value="<?= $course['cid'] ?>">
                                    
                                    <button type="submit" name="update_status" value="in-progress"
                                            class="flex-1 bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors">
                                        In Progress
                                    </button>
                                    <button type="submit" name="update_status" value="completed"
                                            class="flex-1 bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition-colors">
                                        Completed
                                    </button>
                                </form>
                            </div>
                            
                            <div class="space-y-4">
                                <h3 class="font-semibold text-gray-900">Course Feedback:</h3>
                                <form method="POST" class="space-y-4">
                                    <input type="hidden" name="course_id" value="<?= $course['cid'] ?>">
                                    <textarea name="feedback" rows="4" 
                                             class="w-full border-2 border-slate-200 rounded-xl px-4 py-3 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300 bg-white/80 backdrop-blur-sm"
                                             placeholder="Share your experience with this course..."><?= htmlspecialchars($enrollment['feedback'] ?? '') ?></textarea>
                                    <button type="submit" name="update_feedback"
                                            class="w-full btn-primary text-white py-3 rounded-xl hover:opacity-90 transition-all duration-300 transform hover:scale-105">
                                        Update Feedback
                                    </button>
                                </form>
                            </div>
                        </div>
                        <?php elseif (isset($_SESSION['expert_id'])): ?>
                            <!-- Expert View - Show Student Feedback -->
                            <div class="space-y-6">
                                <div class="text-center bg-gradient-to-br from-primary-50 to-secondary-50 rounded-xl p-6 border border-primary-200">
                                    <div class="w-16 h-16 bg-gradient-to-br from-primary-400 to-secondary-400 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
                                        <i class="fas fa-chalkboard-teacher text-white text-2xl"></i>
                                    </div>
                                    <h3 class="text-lg font-heading font-semibold gradient-text mb-2">Course Instructor View</h3>
                                    <p class="text-slate-600">You are viewing this course as an instructor.</p>
                                </div>
                                
                                <div class="space-y-4">
                                    <div class="flex items-center space-x-3 mb-6">
                                        <div class="w-10 h-10 bg-gradient-to-br from-accent-400 to-primary-400 rounded-xl flex items-center justify-center shadow-md">
                                            <i class="fas fa-comments text-white"></i>
                                        </div>
                                        <h3 class="font-heading font-semibold text-slate-900 text-lg">Student Feedback</h3>
                                        <div class="flex-1 h-px bg-gradient-to-r from-primary-300 to-secondary-300"></div>
                                    </div>
                                    
                                    <?php if (!empty($courseFeedback)): ?>
                                        <div class="space-y-4 max-h-96 overflow-y-auto custom-scrollbar">
                                            <?php foreach ($courseFeedback as $index => $feedback): 
                                                $feedbackColor = ['primary', 'secondary', 'accent'][($index) % 3];
                                            ?>
                                                <div class="group relative">
                                                    <div class="absolute -inset-0.5 bg-gradient-to-r from-<?= $feedbackColor ?>-300 to-<?= $feedbackColor ?>-400 rounded-xl blur opacity-20 group-hover:opacity-30 transition duration-300"></div>
                                                    <div class="relative glass-card rounded-xl p-5 border border-<?= $feedbackColor ?>-200 hover:border-<?= $feedbackColor ?>-300 transition-all duration-300">
                                                        <div class="flex justify-between items-start mb-3">
                                                            <div class="flex items-center space-x-3">
                                                                <div class="w-10 h-10 bg-gradient-to-br from-<?= $feedbackColor ?>-100 to-<?= $feedbackColor ?>-200 rounded-full flex items-center justify-center shadow-sm">
                                                                    <span class="text-<?= $feedbackColor ?>-700 font-bold text-sm"><?= strtoupper(substr($feedback['fullname'], 0, 2)) ?></span>
                                                                </div>
                                                                <div>
                                                                    <div class="font-heading font-semibold text-slate-900"><?= htmlspecialchars($feedback['fullname']) ?></div>
                                                                    <div class="text-xs text-slate-500">Course participant</div>
                                                                </div>
                                                            </div>
                                                            <span class="px-3 py-1 bg-gradient-to-r from-<?= $feedbackColor ?>-100 to-<?= $feedbackColor ?>-200 text-<?= $feedbackColor ?>-700 rounded-full text-xs font-medium border border-<?= $feedbackColor ?>-300">
                                                                <i class="fas fa-circle text-xs mr-1"></i>
                                                                <?= htmlspecialchars(ucfirst($feedback['status'])) ?>
                                                            </span>
                                                        </div>
                                                        <div class="bg-gradient-to-r from-<?= $feedbackColor ?>-50/50 to-white rounded-lg p-4 border-l-4 border-<?= $feedbackColor ?>-400">
                                                            <p class="text-slate-700 leading-relaxed italic">"<?= htmlspecialchars($feedback['feedback']) ?>"</p>
                                                        </div>
                                                        
                                                        <!-- Feedback rating simulation -->
                                                        <div class="flex justify-between items-center mt-4 pt-3 border-t border-slate-200">
                                                            <div class="flex items-center space-x-1">
                                                                <?php for($i = 0; $i < 5; $i++): ?>
                                                                    <i class="fas fa-star text-<?= $feedbackColor ?>-400 text-sm"></i>
                                                                <?php endfor; ?>
                                                            </div>
                                                            <span class="text-xs text-slate-500">
                                                                <i class="fas fa-calendar mr-1"></i>
                                                                <?= date('M j, Y', strtotime('-' . rand(1, 30) . ' days')) ?>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            <?php endforeach; ?>
                                        </div>
                                    <?php else: ?>
                                        <div class="text-center py-12">
                                            <div class="relative mx-auto w-24 h-24 mb-6">
                                                <div class="absolute inset-0 bg-gradient-to-br from-slate-200 to-slate-300 rounded-2xl transform rotate-6"></div>
                                                <div class="relative bg-gradient-to-br from-slate-100 to-slate-200 rounded-2xl w-full h-full flex items-center justify-center">
                                                    <i class="fas fa-comment-slash text-slate-400 text-3xl"></i>
                                                </div>
                                            </div>
                                            <h4 class="font-heading font-semibold text-slate-600 mb-2">No Feedback Yet</h4>
                                            <p class="text-slate-500 text-sm">Student feedback will appear here once they start sharing their experience.</p>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php else: ?>
                            <?php if (!isset($_SESSION['user_id'])): ?>
                                <!-- Prompt login for unauthenticated users -->
                                <div class="mb-6 bg-gray-100 rounded-xl p-6 text-center">
                                    <p class="text-gray-600 mb-4">Please log in to enroll in this course.</p>
                                    <a href="login_signup.php" class="btn-primary text-white px-6 py-3 rounded-xl font-semibold hover:opacity-90 transition-all duration-300 transform hover:scale-105">Log In</a>
                                </div>
                            <?php else: ?>
                                <!-- Enrollment Form -->
                                <form method="POST" class="space-y-6">
                                    <input type="hidden" name="course_id" value="<?= $course['cid'] ?>">
                                    
                                    <div>
                                        <label class="text-gray-700 font-semibold mb-2 flex items-center space-x-2">
                                            <i class="fas fa-user text-purple-600"></i>
                                            <span>Full Name</span>
                                        </label>
                                        <input type="text" name="user_name" required 
                                               class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:border-purple-500 focus:ring-4 focus:ring-purple-100 transition-all duration-300"
                                               placeholder="Enter your full name">
                                    </div>
                                    
                                    <div>
                                        <label class="text-gray-700 font-semibold mb-2 flex items-center space-x-2">
                                            <i class="fas fa-phone text-purple-600"></i>
                                            <span>Phone Number</span>
                                        </label>
                                        <input type="tel" name="phone" required 
                                               class="w-full border-2 border-slate-200 rounded-xl px-4 py-3 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300 bg-white/80 backdrop-blur-sm"
                                               placeholder="Enter your phone number">
                                    </div>
                                    
                                    <button type="submit" name="enroll"
                                            class="w-full btn-primary text-white py-4 rounded-xl font-bold text-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
                                        <i class="fas fa-graduation-cap mr-2"></i>
                                        Enroll Now
                                    </button>
                                </form>
                            <?php endif; ?>
                        <?php endif; ?>

                        <div class="mt-8 pt-6 border-t border-gray-200">
                            <h3 class="font-bold text-gray-900 mb-4">This course includes:</h3>
                            <div class="space-y-3 text-sm">
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-play-circle text-green-500"></i>
                                    <span class="text-gray-700">Video lessons</span>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-file-pdf text-green-500"></i>
                                    <span class="text-gray-700">Downloadable resources</span>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-users text-green-500"></i>
                                    <span class="text-gray-700">Community access</span>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-certificate text-green-500"></i>
                                    <span class="text-gray-700">Certificate of completion</span>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-infinity text-green-500"></i>
                                    <span class="text-gray-700">Lifetime access</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 rounded-full flex items-center justify-center">
                            <img class="w-8 h-8 rounded-full object-cover" src="soullift1.jpg" alt="">
                        </div>
                        <span class="text-xl font-bold">Soullift</span>
                    </div>
                    <p class="text-gray-400">Providing compassionate mental health support and counseling services to help you live a more fulfilling life.</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="Homepage.php" class="hover:text-white transition-colors">Home</a></li>
                        <li><a href="services.php" class="hover:text-white transition-colors">Services</a></li>
                        <li><a href="experts.php" class="hover:text-white transition-colors">Therapists</a></li>
                        <li><a href="courses.php" class="hover:text-white transition-colors">Resources</a></li>
                        <li><a href="about.php" class="hover:text-white transition-colors">About Us</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="mailto:info@soullift.com" class="hover:text-white transition-colors">info@soullift.com</a></li>
                        <li><a href="tel:+15551234567" class="hover:text-white transition-colors">+1 (555) 123-4567</a></li>
                        <li>123 Wellness Street, Mindful City</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Follow Us</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors"><i class="fab fa-facebook mr-2"></i>Facebook</a></li>
                        <li><a href="#" class="hover:text-white transition-colors"><i class="fab fa-instagram mr-2"></i>Instagram</a></li>
                        <li><a href="#" class="hover:text-white transition-colors"><i class="fab fa-twitter mr-2"></i>Twitter</a></li>
                        <li><a href="#" class="hover:text-white transition-colors"><i class="fab fa-linkedin mr-2"></i>LinkedIn</a></li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; <?php echo date("Y"); ?> Soullift. All rights reserved. | Mental wellness for everyone</p>
            </div>
        </div>
    </footer>
</body>
</html>