user_profile.php

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

// Check if user is logged in
if ((!isset($_SESSION['user_id']) && !isset($_SESSION['expert_id'])) || !isset($_SESSION['role'])) {
    header('Location: login_signup.php');
    exit();
}

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

// Initialize messages
$update_success = '';
$update_error = '';

// Handle profile update
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'update_profile') {
    $user_id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : $_SESSION['expert_id'];
    $role = $_SESSION['role'];
    $table = $role === 'expert' ? 'expert' : 'user';
    $id_field = $role === 'expert' ? 'eid' : 'uid';
    
    $fullname = trim($_POST['fullname'] ?? '');
    $phone = trim($_POST['phone'] ?? '');
    $address = trim($_POST['address'] ?? '');
    $about_me = trim($_POST['about_me'] ?? '');
    
    // Validation
    if (empty($fullname)) {
        $update_error = 'Full name is required.';
    } else {
        // Handle image upload
        $image_path = null;
        if (isset($_FILES['profile_image']) && $_FILES['profile_image']['error'] === UPLOAD_ERR_OK) {
            $upload_dir = 'uploads/profiles/';
            
            // Create directory if it doesn't exist
            if (!is_dir($upload_dir)) {
                mkdir($upload_dir, 0777, true);
            }
            
            $file_extension = strtolower(pathinfo($_FILES['profile_image']['name'], PATHINFO_EXTENSION));
            $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif'];
            
            if (in_array($file_extension, $allowed_extensions)) {
                $new_filename = $user_id . '_' . time() . '.' . $file_extension;
                $image_path = $upload_dir . $new_filename;
                
                if (move_uploaded_file($_FILES['profile_image']['tmp_name'], $image_path)) {
                    // Image uploaded successfully
                } else {
                    $update_error = 'Failed to upload image.';
                }
            } else {
                $update_error = 'Invalid image format. Please upload JPG, JPEG, PNG, or GIF.';
            }
        }
        
        if (empty($update_error)) {
            // Update database
            if ($image_path) {
                // Update with new image
                $stmt = $db->prepare("UPDATE `$table` SET fullname = ?, phone = ?, address = ?, about_me = ?, image = ? WHERE `$id_field` = ?");
                $stmt->bind_param('sssssi', $fullname, $phone, $address, $about_me, $image_path, $user_id);
            } else {
                // Update without changing image
                $stmt = $db->prepare("UPDATE `$table` SET fullname = ?, phone = ?, address = ?, about_me = ? WHERE `$id_field` = ?");
                $stmt->bind_param('ssssi', $fullname, $phone, $address, $about_me, $user_id);
            }
            
            if ($stmt->execute()) {
                $update_success = 'Profile updated successfully!';
                $_SESSION['fullname'] = $fullname; // Update session
            } else {
                $update_error = 'Failed to update profile. Please try again.';
            }
            $stmt->close();
        }
    }
}

// Get user data from database
$user_id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : $_SESSION['expert_id'];
$role = $_SESSION['role'];
$table = $role === 'expert' ? 'expert' : 'user';
$id_field = $role === 'expert' ? 'eid' : 'uid';

$stmt = $db->prepare("SELECT * FROM `$table` WHERE `$id_field` = ? LIMIT 1");
$stmt->bind_param('i', $user_id);
$stmt->execute();
$result = $stmt->get_result();

if ($result && $result->num_rows === 1) {
    $user_data = $result->fetch_assoc();
} else {
    // If user data not found, redirect to login
    session_destroy();
    header('Location: login_signup.php');
    exit();
}
$stmt->close();

// Extract user data with fallbacks
$fullname = $user_data['fullname'] ?? 'User';
$email = $user_data['email'] ?? 'Not provided';
$phone = $user_data['phone'] ?? '';
$address = $user_data['address'] ?? '';
$about_me = $user_data['about_me'] ?? '';
$image = $user_data['image'] ?? 'https://images.unsplash.com/photo-1494790108755-2616b612b784?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80'; // Default professional profile image

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Profile - SoulLift Professional Mental Health Platform</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="resources/soullift-icon.svg">
    
    <!-- CSS Libraries -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
    
    <!-- Custom Tailwind Config -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'inter': ['Inter', 'sans-serif'],
                        'poppins': ['Poppins', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            50: '#f0fdfa',
                            100: '#ccfbf1',
                            200: '#99f6e4',
                            300: '#5eead4',
                            400: '#2dd4bf',
                            500: '#14b8a6',
                            600: '#0d9488',
                            700: '#0f766e',
                            800: '#115e59',
                            900: '#134e4a',
                        },
                        secondary: {
                            50: '#fef7ff',
                            100: '#fceaff',
                            200: '#f9d5ff',
                            300: '#f3b2ff',
                            400: '#eb7eff',
                            500: '#dc4cff',
                            600: '#c62cf7',
                            700: '#a21cdc',
                            800: '#8319b3',
                            900: '#6d1a91',
                        },
                        accent: {
                            50: '#fff8ed',
                            100: '#ffefd5',
                            200: '#fed7aa',
                            300: '#fdb574',
                            400: '#fb923c',
                            500: '#f97316',
                            600: '#ea580c',
                            700: '#c2410c',
                            800: '#9a3412',
                            900: '#7c2d12',
                        },
                        success: {
                            50: '#f0fdf4',
                            100: '#dcfce7',
                            200: '#bbf7d0',
                            300: '#86efac',
                            400: '#4ade80',
                            500: '#22c55e',
                            600: '#16a34a',
                            700: '#15803d',
                            800: '#166534',
                            900: '#14532d',
                        }
                    },
                    animation: {
                        'fade-in-up': 'fadeInUp 0.5s ease-out',
                        'fade-in-down': 'fadeInDown 0.5s ease-out',
                        'fade-in-left': 'fadeInLeft 0.5s ease-out',
                        'fade-in-right': 'fadeInRight 0.5s ease-out',
                        'bounce-in': 'bounceIn 0.6s ease-out',
                        'scale-in': 'scaleIn 0.3s ease-out',
                        'pulse-glow': 'pulseGlow 2s infinite',
                        'float': 'float 3s ease-in-out infinite',
                    },
                    backdropBlur: {
                        'xs': '2px',
                    }
                }
            }
        }
    </script>
    
    <!-- Custom CSS -->
    <style>
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes bounceIn {
            0%, 20%, 53%, 80%, 100% {
                transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transform: translate3d(0, 0, 0);
            }
            40%, 43% {
                transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -30px, 0);
            }
            70% {
                transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -15px, 0);
            }
            90% {
                transform: translate3d(0, -4px, 0);
            }
        }
        
        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 0 5px rgba(20, 184, 166, 0.5);
            }
            50% {
                box-shadow: 0 0 20px rgba(20, 184, 166, 0.8);
            }
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .teal-gradient {
            background: linear-gradient(135deg, #667eea 0%, #14b8a6 100%);
        }
        
        .mental-health-bg {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(20, 184, 166, 0.3);
        }
        
        .icon-float {
            animation: float 3s ease-in-out infinite;
        }
        
        .notification-dot {
            animation: pulse-glow 2s infinite;
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #14b8a6, #7c3aed);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #a855f7, #7c3aed);
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: linear-gradient(135deg, #9333ea, #6b21a8);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(168, 85, 247, 0.3);
        }
        
        .hero-pattern {
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(20, 184, 166, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 50%);
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #14b8a6, #7c3aed);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #0d9488, #6b21a8);
        }
    </style>
    
    <script>
        // Global functions defined immediately
        window.openCoursesModal = function() {
            const modal = document.getElementById('coursesModal');
            if (modal) {
                modal.classList.remove('hidden');
                modal.style.display = 'block';
                document.body.style.overflow = 'hidden';
                
                // Add entrance animation
                const modalContent = modal.querySelector('.modal-content');
                if (modalContent) {
                    modalContent.style.animation = 'scaleIn 0.3s ease-out';
                }
            }
        };

        window.closeCoursesModal = function() {
            const modal = document.getElementById('coursesModal');
            if (modal) {
                const modalContent = modal.querySelector('.modal-content');
                if (modalContent) {
                    modalContent.style.animation = 'fadeInUp 0.2s ease-out reverse';
                    setTimeout(() => {
                        modal.classList.add('hidden');
                        modal.style.display = 'none';
                        document.body.style.overflow = 'auto';
                    }, 200);
                } else {
                    modal.classList.add('hidden');
                    modal.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            }
        };

        window.goToCourse = function(courseId) {
            window.location.href = 'course_detail.php?id=' + courseId;
        };

        window.resetForm = function() {
            if (confirm('Are you sure you want to reset all changes?')) {
                document.getElementById('profile-form').reset();
                document.getElementById('profile-preview').src = '<?php echo htmlspecialchars($image); ?>';
            }
        };
        
        // Add page load animations
        document.addEventListener('DOMContentLoaded', function() {
            // Animate cards on load
            const cards = document.querySelectorAll('.animate-card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.animation = 'fadeInUp 0.6s ease-out';
                    card.style.opacity = '1';
                }, index * 100);
            });
        });
    </script>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-primary-50 font-inter hero-pattern">
    <!-- Animated Background Elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-secondary-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float" style="animation-delay: 2s;"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-accent-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-float" style="animation-delay: 4s;"></div>
    </div>
    <!-- Header -->
    <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-primary-600 font-semibold px-4 py-2 rounded-xl bg-primary-50/50 backdrop-blur-sm">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-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">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-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">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-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">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-primary-600 font-semibold px-4 py-3 rounded-xl bg-primary-50/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-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/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="appointment.php" 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-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/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="appointment.php" 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-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/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>

    <!-- Main Content -->
    <main class="relative z-10">
        <div class="container mx-auto px-6 py-12">
            <!-- Welcome Banner -->
            <div class="text-center mb-12 animate-card opacity-0">
                <h1 class="text-5xl font-bold text-gray-800 mb-4 font-poppins">
                    Welcome back, 
                    <span class="bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent"><?php echo htmlspecialchars($fullname); ?></span>
                    <span class="inline-block animate-bounce text-accent-500">👋</span>
                </h1>
                <p class="text-gray-600 text-xl font-medium max-w-2xl mx-auto">Continue your journey towards mental wellness and personal growth</p>
            </div>

            <!-- Profile Card -->
            <div class="glass-card rounded-3xl shadow-2xl p-8 mb-12 border border-white/20 animate-card opacity-0 relative overflow-hidden" style="animation-delay: 0.1s;">
                <!-- Decorative Elements -->
                <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-primary-200 to-secondary-200 rounded-full -translate-y-16 translate-x-16 opacity-50"></div>
                <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-accent-200 to-primary-200 rounded-full translate-y-12 -translate-x-12 opacity-50"></div>
                
                <!-- Success/Error Messages -->
                <?php if (!empty($update_success)): ?>
                    <div class="bg-gradient-to-r from-success-50 to-success-100 border border-success-200 text-success-800 px-6 py-4 rounded-2xl mb-8 shadow-lg animate-bounce-in">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle mr-3 text-success-500 text-lg"></i>
                            <span class="font-medium"><?php echo htmlspecialchars($update_success); ?></span>
                        </div>
                    </div>
                <?php endif; ?>
                
                <?php if (!empty($update_error)): ?>
                    <div class="bg-gradient-to-r from-red-50 to-red-100 border border-red-200 text-red-800 px-6 py-4 rounded-2xl mb-8 shadow-lg animate-bounce-in">
                        <div class="flex items-center">
                            <i class="fas fa-exclamation-circle mr-3 text-red-500 text-lg"></i>
                            <span class="font-medium"><?php echo htmlspecialchars($update_error); ?></span>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Profile Section Header -->
                <div class="text-center mb-8 relative z-10">
                    <div class="flex justify-center mb-6">
                        <div class="relative group">
                            <div class="w-32 h-32 bg-gradient-to-br from-primary-400 via-primary-500 to-secondary-500 rounded-3xl flex items-center justify-center text-white text-3xl font-bold overflow-hidden shadow-2xl group-hover:shadow-3xl transition-all duration-500 group-hover:scale-105 relative">
                                <img src="<?php echo htmlspecialchars($image); ?>" alt="Profile Picture" class="w-full h-full object-cover rounded-3xl" id="profile-preview">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    <div class="bg-white/20 backdrop-blur-sm rounded-full p-3">
                                        <i class="fas fa-camera text-white text-lg"></i>
                                    </div>
                                </div>
                            </div>
                            <!-- Status Indicator -->
                            <div class="absolute -bottom-2 -right-2 w-8 h-8 bg-gradient-to-r from-success-400 to-success-500 rounded-full flex items-center justify-center shadow-lg border-4 border-white">
                                <i class="fas fa-check text-white text-sm"></i>
                            </div>
                        </div>
                    </div>

                    <!-- User Info -->
                    <div class="flex justify-center items-center space-x-6 mb-6">
                        <div class="flex items-center text-sm text-primary-600 bg-primary-50 px-4 py-2 rounded-xl">
                            <i class="fas fa-user-circle mr-2"></i>
                            <span class="font-medium"><?php echo ucfirst(htmlspecialchars($role)); ?></span>
                        </div>
                        <div class="flex items-center text-sm text-success-600 bg-success-50 px-4 py-2 rounded-xl">
                            <i class="fas fa-shield-check mr-2"></i>
                            <span class="font-medium">Verified Account</span>
                        </div>
                        <div class="flex items-center text-sm text-secondary-600 bg-secondary-50 px-4 py-2 rounded-xl">
                            <i class="fas fa-star mr-2"></i>
                            <span class="font-medium">85% Complete</span>
                        </div>
                    </div>

                    <!-- Change Photo Button -->
                    <input type="file" name="profile_image" id="profile-image-input" accept="image/*" style="display: none;">
                    <button type="button" onclick="document.getElementById('profile-image-input').click()" class="btn-primary text-white px-6 py-3 rounded-2xl font-semibold shadow-lg hover:shadow-xl group relative overflow-hidden">
                        <span class="relative z-10 flex items-center">
                            <i class="fas fa-camera mr-3 group-hover:rotate-12 transition-transform duration-300"></i>
                            Change Profile Photo
                        </span>
                    </button>
                </div>

                <!-- Profile Form -->
                <form method="post" enctype="multipart/form-data" id="profile-form" class="relative z-10">
                    <input type="hidden" name="action" value="update_profile">
                    
                    <!-- Form Fields Grid -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                        <!-- Personal Information Section -->
                        <div class="space-y-6">
                            <div class="border-b border-gray-200 pb-4 mb-6">
                                <h3 class="text-xl font-bold text-gray-800 font-poppins flex items-center">
                                    <i class="fas fa-user mr-3 text-primary-500"></i>
                                    Personal Information
                                </h3>
                                <p class="text-gray-600 text-sm mt-1">Your basic profile details</p>
                            </div>

                            <div class="bg-white/70 backdrop-blur-sm p-6 rounded-2xl border border-white/50 shadow-lg hover:shadow-xl transition-all duration-300 group">
                                <label class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                    <i class="fas fa-signature mr-2 text-primary-500"></i>
                                    Full Name *
                                </label>
                                <input type="text" name="fullname" value="<?php echo htmlspecialchars($fullname); ?>" 
                                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-300 bg-white/80 backdrop-blur-sm group-hover:shadow-md" 
                                    required>
                            </div>
                            
                            <div class="bg-white/70 backdrop-blur-sm p-6 rounded-2xl border border-white/50 shadow-lg hover:shadow-xl transition-all duration-300 group">
                                <label class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                    <i class="fas fa-phone mr-2 text-primary-500"></i>
                                    Phone Number
                                </label>
                                <input type="tel" name="phone" value="<?php echo htmlspecialchars($phone); ?>" 
                                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-300 bg-white/80 backdrop-blur-sm group-hover:shadow-md" 
                                    placeholder="Enter your phone number">
                            </div>

                            <div class="bg-white/70 backdrop-blur-sm p-6 rounded-2xl border border-white/50 shadow-lg hover:shadow-xl transition-all duration-300 group">
                                <label class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                    <i class="fas fa-map-marker-alt mr-2 text-primary-500"></i>
                                    Address
                                </label>
                                <input type="text" name="address" value="<?php echo htmlspecialchars($address); ?>" 
                                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-300 bg-white/80 backdrop-blur-sm group-hover:shadow-md" 
                                    placeholder="Enter your complete address">
                            </div>
                        </div>

                        <!-- Account Information Section -->
                        <div class="space-y-6">
                            <div class="border-b border-gray-200 pb-4 mb-6">
                                <h3 class="text-xl font-bold text-gray-800 font-poppins flex items-center">
                                    <i class="fas fa-cog mr-3 text-secondary-500"></i>
                                    Account Information
                                </h3>
                                <p class="text-gray-600 text-sm mt-1">Your account details and settings</p>
                            </div>

                            <div class="bg-white/70 backdrop-blur-sm p-6 rounded-2xl border border-white/50 shadow-lg">
                                <label class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                    <i class="fas fa-envelope mr-2 text-primary-500"></i>
                                    Email Address
                                </label>
                                <div class="bg-gray-50/80 backdrop-blur-sm px-4 py-3 rounded-xl border border-gray-200">
                                    <p class="text-gray-800 font-medium"><?php echo htmlspecialchars($email); ?></p>
                                    <small class="text-gray-500 flex items-center mt-1">
                                        <i class="fas fa-lock mr-1"></i>
                                        Email cannot be changed for security
                                    </small>
                                </div>
                            </div>
                            
                            <div class="bg-white/70 backdrop-blur-sm p-6 rounded-2xl border border-white/50 shadow-lg">
                                <label class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                    <i class="fas fa-id-badge mr-2 text-primary-500"></i>
                                    Account Role
                                </label>
                                <div class="bg-gradient-to-r from-primary-50 to-secondary-50 px-4 py-3 rounded-xl border border-primary-200">
                                    <p class="text-gray-800 font-medium capitalize"><?php echo htmlspecialchars($role); ?></p>
                                    <small class="text-primary-600 flex items-center mt-1">
                                        <i class="fas fa-info-circle mr-1"></i>
                                        Role is assigned by administrators
                                    </small>
                                </div>
                            </div>

                            <div class="bg-white/70 backdrop-blur-sm p-6 rounded-2xl border border-white/50 shadow-lg hover:shadow-xl transition-all duration-300 group">
                                <label class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                    <i class="fas fa-user-edit mr-2 text-primary-500"></i>
                                    About Me
                                </label>
                                <textarea name="about_me" rows="4" 
                                        class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-300 bg-white/80 backdrop-blur-sm group-hover:shadow-md resize-none" 
                                        placeholder="Tell us about yourself, your interests, and your wellness journey..."><?php echo htmlspecialchars($about_me); ?></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="flex justify-center gap-6">
                        <button type="submit" class="btn-primary text-white px-8 py-4 rounded-2xl font-semibold shadow-lg hover:shadow-xl group relative overflow-hidden">
                            <span class="relative z-10 flex items-center">
                                <i class="fas fa-save mr-3 group-hover:scale-110 transition-transform duration-300"></i>
                                Update Profile
                            </span>
                        </button>
                        <button type="button" onclick="resetForm()" class="bg-white/80 backdrop-blur-sm text-gray-700 px-8 py-4 rounded-2xl font-semibold border-2 border-gray-200 hover:border-gray-300 hover:bg-white transition-all duration-300 shadow-lg hover:shadow-xl group">
                            <i class="fas fa-undo mr-3 group-hover:rotate-180 transition-transform duration-300"></i>
                            Reset Changes
                        </button>
                    </div>
                </form>
            </div>

            <!-- Dashboard Grid -->
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
                <!-- Upcoming Appointments -->
                <div class="glass-card rounded-3xl shadow-2xl p-8 border border-white/20 card-hover animate-card opacity-0" style="animation-delay: 0.2s;">
                    <div class="flex items-center justify-between mb-8">
                        <div class="flex items-center">
                            <div class="w-16 h-16 bg-gradient-to-br from-primary-400 to-primary-600 rounded-2xl flex items-center justify-center mr-6 shadow-lg icon-float">
                                <i class="fas fa-calendar-check text-white text-2xl"></i>
                            </div>
                            <div>
                                <h2 class="text-2xl font-bold text-gray-800 font-poppins">Upcoming Sessions</h2>
                                <p class="text-gray-600 font-medium">Your scheduled appointments</p>
                            </div>
                        </div>
                        <div class="bg-primary-50 px-4 py-2 rounded-xl">
                            <span class="text-primary-600 font-bold text-lg">
                                <?php
                                // Count upcoming appointments
                                if ($_SESSION['role'] === 'expert') {
                                    $expert_id = $_SESSION['expert_id'];
                                    $countSql = "SELECT COUNT(*) as count FROM appointment a JOIN schedule s ON a.shid = s.shid WHERE a.eid = ? AND a.status = 'accepted' AND s.schedule_date >= CURDATE()";
                                    $countStmt = $conn->prepare($countSql);
                                    $countStmt->bind_param("i", $expert_id);
                                } else {
                                    $user_id = $_SESSION['user_id'];
                                    $countSql = "SELECT COUNT(*) as count FROM appointment a JOIN schedule s ON a.shid = s.shid WHERE a.uid = ? AND a.status = 'accepted' AND s.schedule_date >= CURDATE()";
                                    $countStmt = $conn->prepare($countSql);
                                    $countStmt->bind_param("i", $user_id);
                                }
                                $countStmt->execute();
                                $countResult = $countStmt->get_result();
                                $appointmentCount = $countResult->fetch_assoc()['count'];
                                $countStmt->close();
                                echo $appointmentCount;
                                ?>
                            </span>
                        </div>
                    </div>
                    
                    <?php
                    if ($_SESSION['role'] === 'expert') {
                        // Expert: Show appointments with patients
                        $expert_id = $_SESSION['expert_id'];
                        $appointmentSql = "
                            SELECT a.aid, a.reason_of_visit, s.schedule_date, s.start_time, s.end_time, 
                                   u.fullname as user_name, u.image as user_image
                            FROM appointment a
                            JOIN schedule s ON a.shid = s.shid
                            JOIN user u ON a.uid = u.uid
                            WHERE a.eid = ? AND a.status = 'accepted' AND s.schedule_date >= CURDATE()
                            ORDER BY s.schedule_date ASC, s.start_time ASC
                            LIMIT 5
                        ";
                        $appointmentStmt = $conn->prepare($appointmentSql);
                        $appointmentStmt->bind_param("i", $expert_id);
                        $appointmentStmt->execute();
                        $appointmentResult = $appointmentStmt->get_result();
                        
                        if ($appointmentResult->num_rows > 0) {
                            echo '<div class="max-h-80 overflow-y-auto space-y-4 pr-2" style="scrollbar-width: thin; scrollbar-color: #14b8a6 #f0fdfa;">';
                            while ($appointment = $appointmentResult->fetch_assoc()) {
                                $appointmentDate = date('M j, Y', strtotime($appointment['schedule_date']));
                                $appointmentTime = date('g:i A', strtotime($appointment['start_time']));
                                echo '<div class="bg-gradient-to-r from-primary-50 to-primary-100 border border-primary-200 rounded-2xl p-5 hover:shadow-lg transition-all duration-300 group cursor-pointer">';
                                echo '<div class="flex items-center space-x-4">';
                                echo '<div class="relative">';
                                echo '<div class="w-14 h-14 bg-gradient-to-br from-primary-200 to-primary-300 rounded-2xl flex items-center justify-center overflow-hidden shadow-md group-hover:scale-105 transition-transform duration-300">';
                                if (!empty($appointment['user_image'])) {
                                    echo '<img src="' . htmlspecialchars($appointment['user_image']) . '" alt="Patient" class="w-full h-full object-cover">';
                                } else {
                                    echo '<span class="text-lg font-bold text-primary-700">' . strtoupper(substr($appointment['user_name'], 0, 1)) . '</span>';
                                }
                                echo '</div>';
                                echo '<div class="absolute -bottom-1 -right-1 w-5 h-5 bg-success-400 rounded-full border-2 border-white"></div>';
                                echo '</div>';
                                echo '<div class="flex-1 min-w-0">';
                                echo '<h4 class="font-bold text-gray-800 text-lg mb-1 group-hover:text-primary-700 transition-colors">Session with ' . htmlspecialchars($appointment['user_name']) . '</h4>';
                                echo '<p class="text-gray-600 text-sm mb-2 truncate">' . htmlspecialchars($appointment['reason_of_visit']) . '</p>';
                                echo '<div class="flex items-center text-primary-600 font-medium text-sm">';
                                echo '<i class="fas fa-calendar-alt mr-2"></i>';
                                echo '<span>' . $appointmentDate . ' at ' . $appointmentTime . '</span>';
                                echo '</div>';
                                echo '</div>';
                                echo '<div class="bg-gradient-to-r from-success-400 to-success-500 text-white px-4 py-2 rounded-xl text-sm font-bold shadow-md">';
                                echo '<i class="fas fa-check mr-1"></i>Confirmed';
                                echo '</div>';
                                echo '</div>';
                                echo '</div>';
                            }
                            echo '</div>';
                            echo '<div class="mt-6">';
                            echo '<button onclick="location.href=\'expert_appointments.php\'" class="w-full btn-primary text-white py-4 rounded-2xl font-semibold shadow-lg hover:shadow-xl group relative overflow-hidden">';
                            echo '<span class="relative z-10 flex items-center justify-center">';
                            echo '<i class="fas fa-external-link-alt mr-3 group-hover:rotate-12 transition-transform duration-300"></i>';
                            echo 'View All Appointments';
                            echo '</span>';
                            echo '</button>';
                            echo '</div>';
                        } else {
                            echo '<div class="text-center py-12">';
                            echo '<div class="w-24 h-24 bg-gradient-to-br from-primary-100 to-primary-200 rounded-3xl flex items-center justify-center mx-auto mb-6">';
                            echo '<i class="fas fa-calendar-times text-4xl text-primary-400"></i>';
                            echo '</div>';
                            echo '<h3 class="text-xl font-bold text-gray-700 mb-2">No Upcoming Sessions</h3>';
                            echo '<p class="text-gray-500 mb-6">You have no scheduled appointments at the moment</p>';
                            echo '<button onclick="location.href=\'expert_appointments.php\'" class="btn-primary text-white px-6 py-3 rounded-2xl font-semibold shadow-lg hover:shadow-xl">';
                            echo '<i class="fas fa-plus mr-2"></i>Manage Schedule';
                            echo '</button>';
                            echo '</div>';
                        }
                        $appointmentStmt->close();
                    } else {
                        // User: Show appointments with experts
                        $user_id = $_SESSION['user_id'];
                        $appointmentSql = "
                            SELECT a.aid, a.reason_of_visit, s.schedule_date, s.start_time, s.end_time, 
                                   e.fullname as expert_name, e.designation, e.image as expert_image
                            FROM appointment a
                            JOIN schedule s ON a.shid = s.shid
                            JOIN expert e ON a.eid = e.eid
                            WHERE a.uid = ? AND a.status = 'accepted' AND s.schedule_date >= CURDATE()
                            ORDER BY s.schedule_date ASC, s.start_time ASC
                            LIMIT 5
                        ";
                        $appointmentStmt = $conn->prepare($appointmentSql);
                        $appointmentStmt->bind_param("i", $user_id);
                        $appointmentStmt->execute();
                        $appointmentResult = $appointmentStmt->get_result();
                        
                        if ($appointmentResult->num_rows > 0) {
                            echo '<div class="max-h-80 overflow-y-auto space-y-4 pr-2" style="scrollbar-width: thin; scrollbar-color: #14b8a6 #f0fdfa;">';
                            while ($appointment = $appointmentResult->fetch_assoc()) {
                                $appointmentDate = date('M j, Y', strtotime($appointment['schedule_date']));
                                $appointmentTime = date('g:i A', strtotime($appointment['start_time']));
                                echo '<div class="bg-gradient-to-r from-primary-50 to-primary-100 border border-primary-200 rounded-2xl p-5 hover:shadow-lg transition-all duration-300 group cursor-pointer">';
                                echo '<div class="flex items-center space-x-4">';
                                echo '<div class="relative">';
                                echo '<div class="w-14 h-14 bg-gradient-to-br from-primary-200 to-primary-300 rounded-2xl flex items-center justify-center overflow-hidden shadow-md group-hover:scale-105 transition-transform duration-300">';
                                if (!empty($appointment['expert_image'])) {
                                    echo '<img src="' . htmlspecialchars($appointment['expert_image']) . '" alt="Expert" class="w-full h-full object-cover">';
                                } else {
                                    echo '<span class="text-lg font-bold text-primary-700">' . strtoupper(substr($appointment['expert_name'], 0, 1)) . '</span>';
                                }
                                echo '</div>';
                                echo '<div class="absolute -bottom-1 -right-1 w-5 h-5 bg-success-400 rounded-full border-2 border-white"></div>';
                                echo '</div>';
                                echo '<div class="flex-1 min-w-0">';
                                echo '<h4 class="font-bold text-gray-800 text-lg mb-1 group-hover:text-primary-700 transition-colors">Session with ' . htmlspecialchars($appointment['expert_name']) . '</h4>';
                                echo '<p class="text-gray-500 text-sm mb-1">' . htmlspecialchars($appointment['designation']) . '</p>';
                                echo '<p class="text-gray-600 text-sm mb-2 truncate">' . htmlspecialchars($appointment['reason_of_visit']) . '</p>';
                                echo '<div class="flex items-center text-primary-600 font-medium text-sm">';
                                echo '<i class="fas fa-calendar-alt mr-2"></i>';
                                echo '<span>' . $appointmentDate . ' at ' . $appointmentTime . '</span>';
                                echo '</div>';
                                echo '</div>';
                                echo '<div class="bg-gradient-to-r from-success-400 to-success-500 text-white px-4 py-2 rounded-xl text-sm font-bold shadow-md">';
                                echo '<i class="fas fa-check mr-1"></i>Confirmed';
                                echo '</div>';
                                echo '</div>';
                                echo '</div>';
                            }
                            echo '</div>';
                            echo '<div class="mt-6">';
                            echo '<button onclick="location.href=\'user_appointments.php\'" class="w-full btn-primary text-white py-4 rounded-2xl font-semibold shadow-lg hover:shadow-xl group relative overflow-hidden">';
                            echo '<span class="relative z-10 flex items-center justify-center">';
                            echo '<i class="fas fa-external-link-alt mr-3 group-hover:rotate-12 transition-transform duration-300"></i>';
                            echo 'View All Appointments';
                            echo '</span>';
                            echo '</button>';
                            echo '</div>';
                        } else {
                            echo '<div class="text-center py-12">';
                            echo '<div class="w-24 h-24 bg-gradient-to-br from-primary-100 to-primary-200 rounded-3xl flex items-center justify-center mx-auto mb-6">';
                            echo '<i class="fas fa-calendar-times text-4xl text-primary-400"></i>';
                            echo '</div>';
                            echo '<h3 class="text-xl font-bold text-gray-700 mb-2">No Upcoming Sessions</h3>';
                            echo '<p class="text-gray-500 mb-6">Schedule your first consultation with our experts</p>';
                            echo '<button onclick="location.href=\'experts.php\'" class="btn-primary text-white px-6 py-3 rounded-2xl font-semibold shadow-lg hover:shadow-xl">';
                            echo '<i class="fas fa-plus mr-2"></i>Book Appointment';
                            echo '</button>';
                            echo '</div>';
                        }
                        $appointmentStmt->close();
                    }
                    ?>
                </div>

                <!-- Course Stats -->
                <div class="glass-card rounded-3xl shadow-2xl p-8 border border-white/20 card-hover animate-card opacity-0" style="animation-delay: 0.4s;">
                    <div class="flex items-center justify-between mb-8">
                        <div class="flex items-center">
                            <div class="w-16 h-16 bg-gradient-to-br from-secondary-400 to-secondary-600 rounded-2xl flex items-center justify-center mr-6 shadow-lg icon-float">
                                <i class="fas fa-graduation-cap text-white text-2xl"></i>
                            </div>
                            <div>
                                <h2 class="text-2xl font-bold text-gray-800 font-poppins">
                                    <?php echo ($_SESSION['role'] === 'expert') ? 'Teaching Overview' : 'Learning Journey'; ?>
                                </h2>
                                <p class="text-gray-600 font-medium">
                                    <?php echo ($_SESSION['role'] === 'expert') ? 'Your course impact' : 'Your course progress'; ?>
                                </p>
                            </div>
                        </div>
                        <div class="bg-secondary-50 px-4 py-2 rounded-xl">
                            <span class="text-secondary-600 font-bold text-lg">
                                <?php
                                if ($_SESSION['role'] === 'expert') {
                                    $expert_id = $_SESSION['expert_id'];
                                    $stmt = $db->prepare("SELECT COUNT(*) as total FROM course WHERE eid = ?");
                                    $stmt->bind_param('i', $expert_id);
                                    $stmt->execute();
                                    $total_courses = $stmt->get_result()->fetch_assoc()['total'];
                                    $stmt->close();
                                    echo $total_courses;
                                } else {
                                    $user_id = $_SESSION['user_id'];
                                    $stmt = $db->prepare("SELECT COUNT(*) as total FROM enrollment WHERE uid = ?");
                                    $stmt->bind_param('i', $user_id);
                                    $stmt->execute();
                                    $total_enrolled = $stmt->get_result()->fetch_assoc()['total'];
                                    $stmt->close();
                                    echo $total_enrolled;
                                }
                                ?>
                            </span>
                        </div>
                    </div>
                    
                    <?php
                    if ($_SESSION['role'] === 'expert') {
                        // Expert: Show courses they are teaching
                        $expert_id = $_SESSION['expert_id'];
                        
                        // Total courses being taught
                        $stmt = $db->prepare("SELECT COUNT(*) as total FROM course WHERE eid = ?");
                        $stmt->bind_param('i', $expert_id);
                        $stmt->execute();
                        $total_courses = $stmt->get_result()->fetch_assoc()['total'];
                        $stmt->close();
                        
                        // Total students enrolled in expert's courses
                        $stmt = $db->prepare("
                            SELECT COUNT(DISTINCT e.uid) as total_students
                            FROM enrollment e 
                            JOIN course c ON e.cid = c.cid 
                            WHERE c.eid = ?
                        ");
                        $stmt->bind_param('i', $expert_id);
                        $stmt->execute();
                        $total_students = $stmt->get_result()->fetch_assoc()['total_students'];
                        $stmt->close();
                        
                        // Students who completed courses
                        $stmt = $db->prepare("
                            SELECT COUNT(DISTINCT e.uid) as completed_students
                            FROM enrollment e 
                            JOIN course c ON e.cid = c.cid 
                            WHERE c.eid = ? AND e.status = 'completed'
                        ");
                        $stmt->bind_param('i', $expert_id);
                        $stmt->execute();
                        $completed_students = $stmt->get_result()->fetch_assoc()['completed_students'];
                        $stmt->close();
                        ?>
                        
                        <div class="grid grid-cols-2 gap-6 mb-8">
                            <div class="bg-gradient-to-br from-secondary-50 to-secondary-100 p-6 rounded-2xl text-center border border-secondary-200 hover:shadow-lg transition-all duration-300 group">
                                <div class="w-12 h-12 bg-gradient-to-br from-secondary-400 to-secondary-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-chalkboard-teacher text-white text-lg"></i>
                                </div>
                                <div class="text-3xl font-bold text-secondary-600 mb-2"><?php echo $total_courses; ?></div>
                                <div class="text-sm font-semibold text-secondary-700">Courses Teaching</div>
                            </div>
                            <div class="bg-gradient-to-br from-success-50 to-success-100 p-6 rounded-2xl text-center border border-success-200 hover:shadow-lg transition-all duration-300 group">
                                <div class="w-12 h-12 bg-gradient-to-br from-success-400 to-success-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-users text-white text-lg"></i>
                                </div>
                                <div class="text-3xl font-bold text-success-600 mb-2"><?php echo $total_students; ?></div>
                                <div class="text-sm font-semibold text-success-700">Total Students</div>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-br from-accent-50 to-accent-100 p-6 rounded-2xl text-center mb-8 border border-accent-200 hover:shadow-lg transition-all duration-300 group">
                            <div class="w-12 h-12 bg-gradient-to-br from-accent-400 to-accent-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                                <i class="fas fa-trophy text-white text-lg"></i>
                            </div>
                            <div class="text-3xl font-bold text-accent-600 mb-2"><?php echo $completed_students; ?></div>
                            <div class="text-sm font-semibold text-accent-700">Students Graduated</div>
                        </div>
                        
                        <button onclick="openCoursesModal()" class="w-full btn-primary text-white py-4 rounded-2xl font-semibold shadow-lg hover:shadow-xl group relative overflow-hidden">
                            <span class="relative z-10 flex items-center justify-center">
                                <i class="fas fa-eye mr-3 group-hover:scale-110 transition-transform duration-300"></i>
                                View My Courses
                            </span>
                        </button>
                        
                        <?php
                    } else {
                        // Regular User: Show course enrollment statistics
                        $user_id = $_SESSION['user_id'];
                        
                        // Total enrolled courses
                        $stmt = $db->prepare("SELECT COUNT(*) as total FROM enrollment WHERE uid = ?");
                        $stmt->bind_param('i', $user_id);
                        $stmt->execute();
                        $total_enrolled = $stmt->get_result()->fetch_assoc()['total'];
                        $stmt->close();
                        
                        // Completed courses
                        $stmt = $db->prepare("SELECT COUNT(*) as completed FROM enrollment WHERE uid = ? AND status = 'completed'");
                        $stmt->bind_param('i', $user_id);
                        $stmt->execute();
                        $completed_courses = $stmt->get_result()->fetch_assoc()['completed'];
                        $stmt->close();
                        
                        // Ongoing courses
                        $ongoing_courses = $total_enrolled - $completed_courses;
                        ?>
                        
                        <div class="grid grid-cols-2 gap-6 mb-8">
                            <div class="bg-gradient-to-br from-secondary-50 to-secondary-100 p-6 rounded-2xl text-center border border-secondary-200 hover:shadow-lg transition-all duration-300 group">
                                <div class="w-12 h-12 bg-gradient-to-br from-secondary-400 to-secondary-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-book-open text-white text-lg"></i>
                                </div>
                                <div class="text-3xl font-bold text-secondary-600 mb-2"><?php echo $total_enrolled; ?></div>
                                <div class="text-sm font-semibold text-secondary-700">Total Enrolled</div>
                            </div>
                            <div class="bg-gradient-to-br from-success-50 to-success-100 p-6 rounded-2xl text-center border border-success-200 hover:shadow-lg transition-all duration-300 group">
                                <div class="w-12 h-12 bg-gradient-to-br from-success-400 to-success-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-check-circle text-white text-lg"></i>
                                </div>
                                <div class="text-3xl font-bold text-success-600 mb-2"><?php echo $completed_courses; ?></div>
                                <div class="text-sm font-semibold text-success-700">Completed</div>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-br from-accent-50 to-accent-100 p-6 rounded-2xl text-center mb-8 border border-accent-200 hover:shadow-lg transition-all duration-300 group">
                            <div class="w-12 h-12 bg-gradient-to-br from-accent-400 to-accent-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                                <i class="fas fa-clock text-white text-lg"></i>
                            </div>
                            <div class="text-3xl font-bold text-accent-600 mb-2"><?php echo $ongoing_courses; ?></div>
                            <div class="text-sm font-semibold text-accent-700">In Progress</div>
                        </div>
                        
                        <button onclick="openCoursesModal()" class="w-full btn-primary text-white py-4 rounded-2xl font-semibold shadow-lg hover:shadow-xl group relative overflow-hidden">
                            <span class="relative z-10 flex items-center justify-center">
                                <i class="fas fa-eye mr-3 group-hover:scale-110 transition-transform duration-300"></i>
                                View My Courses
                            </span>
                        </button>
                        
                        <?php
                    }
                    ?>
            </div>
        </div>
    </main>

    <!-- Courses Modal -->
    <div id="coursesModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999] hidden">
        <div class="flex items-center justify-center min-h-screen p-6">
            <div class="glass-card rounded-3xl shadow-2xl w-full max-w-5xl max-h-[85vh] overflow-hidden border border-white/20 modal-content">
                <div class="flex items-center justify-between p-8 border-b border-white/20">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-secondary-400 to-secondary-600 rounded-2xl flex items-center justify-center mr-4">
                            <i class="fas fa-graduation-cap text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold text-gray-800 font-poppins">
                                <?php echo ($_SESSION['role'] === 'expert') ? 'My Teaching Courses' : 'My Learning Journey'; ?>
                            </h3>
                            <p class="text-gray-600 font-medium">
                                <?php echo ($_SESSION['role'] === 'expert') ? 'Courses you are teaching' : 'Courses you are enrolled in'; ?>
                            </p>
                        </div>
                    </div>
                    <button onclick="closeCoursesModal()" class="w-10 h-10 bg-white/20 hover:bg-white/30 rounded-2xl flex items-center justify-center text-gray-600 hover:text-gray-800 transition-all duration-300 group">
                        <i class="fas fa-times text-lg group-hover:rotate-90 transition-transform duration-300"></i>
                    </button>
                </div>
                
                <div class="p-8 overflow-y-auto max-h-[65vh]" style="scrollbar-width: thin; scrollbar-color: #14b8a6 #f0fdfa;">
                    <div id="coursesList" class="space-y-6">
                        <?php
                        if ($_SESSION['role'] === 'expert') {
                            // Expert: Show courses they are teaching
                            $expert_id = $_SESSION['expert_id'];
                            $stmt = $db->prepare("
                                SELECT c.cid, c.title, c.description, c.fee, c.image, c.duration, c.created_at,
                                       COUNT(e.uid) as student_count,
                                       COUNT(CASE WHEN e.status = 'completed' THEN 1 END) as completed_count
                                FROM course c 
                                LEFT JOIN enrollment e ON c.cid = e.cid
                                WHERE c.eid = ? 
                                GROUP BY c.cid
                                ORDER BY c.created_at DESC
                            ");
                            $stmt->bind_param('i', $expert_id);
                            $stmt->execute();
                            $teaching_courses = $stmt->get_result();
                            
                            if ($teaching_courses->num_rows > 0):
                                while ($course = $teaching_courses->fetch_assoc()):
                            ?>
                            <div class="bg-white/60 backdrop-blur-sm border border-white/50 rounded-2xl p-6 hover:shadow-xl transition-all duration-300 cursor-pointer group hover:scale-[1.02]" 
                                 onclick="goToCourse(<?php echo $course['cid']; ?>)">
                                <div class="flex gap-6">
                                    <div class="flex-shrink-0">
                                        <div class="w-24 h-24 rounded-2xl overflow-hidden shadow-lg group-hover:shadow-xl transition-shadow duration-300">
                                            <img src="<?php echo htmlspecialchars($course['image'] ?: 'https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); ?>" 
                                                 alt="<?php echo htmlspecialchars($course['title']); ?>" 
                                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-start justify-between mb-3">
                                            <h4 class="text-xl font-bold text-gray-800 group-hover:text-secondary-600 transition-colors duration-300"><?php echo htmlspecialchars($course['title']); ?></h4>
                                            <span class="px-4 py-2 rounded-xl text-sm font-bold bg-gradient-to-r from-secondary-100 to-secondary-200 text-secondary-700 border border-secondary-300">
                                                <i class="fas fa-chalkboard-teacher mr-2"></i>Teaching
                                            </span>
                                        </div>
                                        <p class="text-gray-600 text-sm mb-4 leading-relaxed"><?php echo htmlspecialchars(substr($course['description'], 0, 150)); ?>...</p>
                                        <div class="grid grid-cols-4 gap-4">
                                            <div class="text-center">
                                                <div class="text-lg font-bold text-secondary-600"><?php echo $course['student_count']; ?></div>
                                                <div class="text-xs text-gray-500 font-medium">Students</div>
                                            </div>
                                            <div class="text-center">
                                                <div class="text-lg font-bold text-success-600"><?php echo $course['completed_count']; ?></div>
                                                <div class="text-xs text-gray-500 font-medium">Completed</div>
                                            </div>
                                            <div class="text-center">
                                                <div class="text-lg font-bold text-accent-600"><?php echo htmlspecialchars($course['duration']); ?></div>
                                                <div class="text-xs text-gray-500 font-medium">Duration</div>
                                            </div>
                                            <div class="text-center">
                                                <div class="text-lg font-bold text-primary-600"><?php echo date('M Y', strtotime($course['created_at'])); ?></div>
                                                <div class="text-xs text-gray-500 font-medium">Created</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php 
                                endwhile;
                            else:
                            ?>
                            <div class="text-center py-16">
                                <div class="w-32 h-32 bg-gradient-to-br from-secondary-100 to-secondary-200 rounded-3xl flex items-center justify-center mx-auto mb-8">
                                    <i class="fas fa-chalkboard-teacher text-6xl text-secondary-400"></i>
                                </div>
                                <h3 class="text-2xl font-bold text-gray-700 mb-3">No Courses Yet</h3>
                                <p class="text-gray-600 mb-8 max-w-md mx-auto">You haven't created any courses yet. Start sharing your knowledge and expertise with students.</p>
                                <a href="courses.php" class="btn-primary text-white px-8 py-4 rounded-2xl font-semibold shadow-lg hover:shadow-xl inline-flex items-center">
                                    <i class="fas fa-plus mr-3"></i>Create First Course
                                </a>
                            </div>
                            <?php 
                            endif;
                            $stmt->close();
                        } else {
                            // Regular User: Show enrolled courses
                            $user_id = $_SESSION['user_id'];
                            $stmt = $db->prepare("
                                SELECT e.enid, e.status, e.joined_at, e.feedback,
                                       c.cid, c.title, c.description, c.fee, c.image, c.duration,
                                       ex.fullname as expert_name
                                FROM enrollment e 
                                JOIN course c ON e.cid = c.cid 
                                LEFT JOIN expert ex ON c.eid = ex.eid
                                WHERE e.uid = ? 
                                ORDER BY e.joined_at DESC
                            ");
                            $stmt->bind_param('i', $user_id);
                            $stmt->execute();
                            $enrolled_courses = $stmt->get_result();
                            
                            if ($enrolled_courses->num_rows > 0):
                                while ($course = $enrolled_courses->fetch_assoc()):
                            ?>
                            <div class="bg-white/60 backdrop-blur-sm border border-white/50 rounded-2xl p-6 hover:shadow-xl transition-all duration-300 cursor-pointer group hover:scale-[1.02]" 
                                 onclick="goToCourse(<?php echo $course['cid']; ?>)">
                                <div class="flex gap-6">
                                    <div class="flex-shrink-0">
                                        <div class="w-24 h-24 rounded-2xl overflow-hidden shadow-lg group-hover:shadow-xl transition-shadow duration-300">
                                            <img src="<?php echo htmlspecialchars($course['image'] ?: 'https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); ?>" 
                                                 alt="<?php echo htmlspecialchars($course['title']); ?>" 
                                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-start justify-between mb-3">
                                            <h4 class="text-xl font-bold text-gray-800 group-hover:text-primary-600 transition-colors duration-300"><?php echo htmlspecialchars($course['title']); ?></h4>
                                            <span class="px-4 py-2 rounded-xl text-sm font-bold <?php echo $course['status'] === 'completed' ? 'bg-gradient-to-r from-success-100 to-success-200 text-success-700 border-success-300' : 'bg-gradient-to-r from-accent-100 to-accent-200 text-accent-700 border-accent-300'; ?> border">
                                                <i class="fas fa-<?php echo $course['status'] === 'completed' ? 'check-circle' : 'clock'; ?> mr-2"></i>
                                                <?php echo ucfirst($course['status']); ?>
                                            </span>
                                        </div>
                                        <p class="text-gray-600 text-sm mb-4 leading-relaxed"><?php echo htmlspecialchars(substr($course['description'], 0, 150)); ?>...</p>
                                        <div class="grid grid-cols-3 gap-4">
                                            <div class="text-center">
                                                <div class="text-lg font-bold text-primary-600"><?php echo htmlspecialchars($course['expert_name']); ?></div>
                                                <div class="text-xs text-gray-500 font-medium">Instructor</div>
                                            </div>
                                            <div class="text-center">
                                                <div class="text-lg font-bold text-accent-600"><?php echo htmlspecialchars($course['duration']); ?></div>
                                                <div class="text-xs text-gray-500 font-medium">Duration</div>
                                            </div>
                                            <div class="text-center">
                                                <div class="text-lg font-bold text-secondary-600"><?php echo date('M Y', strtotime($course['joined_at'])); ?></div>
                                                <div class="text-xs text-gray-500 font-medium">Joined</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php 
                                endwhile;
                            else:
                            ?>
                            <div class="text-center py-16">
                                <div class="w-32 h-32 bg-gradient-to-br from-primary-100 to-primary-200 rounded-3xl flex items-center justify-center mx-auto mb-8">
                                    <i class="fas fa-graduation-cap text-6xl text-primary-400"></i>
                                </div>
                                <h3 class="text-2xl font-bold text-gray-700 mb-3">Start Learning Today</h3>
                                <p class="text-gray-600 mb-8 max-w-md mx-auto">You haven't enrolled in any courses yet. Explore our wide range of mental wellness courses and start your journey.</p>
                                <a href="courses.php" class="btn-primary text-white px-8 py-4 rounded-2xl font-semibold shadow-lg hover:shadow-xl inline-flex items-center">
                                    <i class="fas fa-search mr-3"></i>Browse Courses
                                </a>
                            </div>
                            <?php 
                            endif;
                            $stmt->close();
                        }
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <footer class="bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto px-4 py-16">
            <div class="grid md:grid-cols-4 gap-8">
                <div class="space-y-6">
                    <div class="flex items-center space-x-3">
                        <img src="resources/soullift-logo.svg" alt="Soullift Logo" class="w-10 h-10">
                        <span class="text-2xl font-heading font-bold bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent">
                            Soullift
                        </span>
                    </div>
                    <p class="text-gray-400 leading-relaxed">
                        Providing compassionate mental health support and counseling services to help you live a more fulfilling life.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
                            <i class="fab fa-facebook text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-secondary-600 rounded-full flex items-center justify-center hover:bg-secondary-700 transition-colors">
                            <i class="fab fa-instagram text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
                            <i class="fab fa-twitter text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-accent-600 rounded-full flex items-center justify-center hover:bg-accent-700 transition-colors">
                            <i class="fab fa-linkedin text-white"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="font-heading text-lg font-semibold mb-6 text-white">Quick Links</h3>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="Homepage.php" class="hover:text-primary-400 transition-colors">Home</a></li>
                        <li><a href="services.php" class="hover:text-primary-400 transition-colors">Services</a></li>
                        <li><a href="experts.php" class="hover:text-primary-400 transition-colors">Therapists</a></li>
                        <li><a href="courses.php" class="hover:text-primary-400 transition-colors">Resources</a></li>
                        <li><a href="blog.php" class="hover:text-primary-400 transition-colors">Blog</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-heading text-lg font-semibold mb-6 text-white">Support</h3>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="mailto:info@soullift.com" class="hover:text-primary-400 transition-colors">Email Support</a></li>
                        <li><a href="tel:+15551234567" class="hover:text-primary-400 transition-colors">Emergency Hotline</a></li>
                        <li><span class="text-gray-500">Crisis Support: 24/7</span></li>
                        <li><a href="#" class="hover:text-primary-400 transition-colors">FAQs</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-heading text-lg font-semibold mb-6 text-white">Newsletter</h3>
                    <p class="text-gray-400 mb-4">Subscribe for mental health tips and updates.</p>
                    <div class="space-y-3">
                        <input type="email" placeholder="Your email address" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                        <button class="w-full bg-gradient-to-r from-primary-600 to-secondary-600 text-white py-3 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105">
                            Subscribe
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <p class="text-gray-400 text-center md:text-left">
                        &copy; <?php echo date("Y"); ?> Soullift. All rights reserved. | Mental wellness for everyone
                    </p>
                    <div class="flex space-x-6 text-sm text-gray-400">
                        <a href="#" class="hover:text-primary-400 transition-colors">Privacy Policy</a>
                        <a href="#" class="hover:text-primary-400 transition-colors">Terms of Service</a>
                        <a href="#" class="hover:text-primary-400 transition-colors">Cookie Policy</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        // Initialize AOS
        AOS.init({
            duration: 600,
            easing: 'ease-out-cubic',
            once: true,
            offset: 50
        });

        // Wait for DOM to load before adding event listeners
        document.addEventListener('DOMContentLoaded', function() {
            // Preview image before upload
            const profileImageInput = document.getElementById('profile-image-input');
            if (profileImageInput) {
                profileImageInput.addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const preview = document.getElementById('profile-preview');
                            preview.src = e.target.result;
                            
                            // Add a nice animation to the preview
                            preview.style.transform = 'scale(0.9)';
                            preview.style.transition = 'transform 0.3s ease';
                            setTimeout(() => {
                                preview.style.transform = 'scale(1)';
                            }, 100);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            }

            // Form submission validation with enhanced feedback
            const profileForm = document.getElementById('profile-form');
            if (profileForm) {
                profileForm.addEventListener('submit', function(e) {
                    const fullname = document.querySelector('input[name="fullname"]').value.trim();
                    if (fullname === '') {
                        e.preventDefault();
                        
                        // Show elegant error message
                        const errorDiv = document.createElement('div');
                        errorDiv.className = 'fixed top-4 right-4 bg-red-100 border border-red-200 text-red-800 px-6 py-4 rounded-2xl shadow-lg z-50 animate-bounce-in';
                        errorDiv.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i>Full name is required!';
                        document.body.appendChild(errorDiv);
                        
                        setTimeout(() => {
                            errorDiv.remove();
                        }, 3000);
                        
                        return false;
                    }
                    
                    // Add loading state to submit button
                    const submitBtn = profileForm.querySelector('button[type="submit"]');
                    const originalText = submitBtn.innerHTML;
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Updating...';
                    submitBtn.disabled = true;
                    
                    // Re-enable after form processes (this is just for UX feedback)
                    setTimeout(() => {
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                    }, 2000);
                });
            }

            // Close modal when clicking outside
            const coursesModal = document.getElementById('coursesModal');
            if (coursesModal) {
                coursesModal.addEventListener('click', function(e) {
                    if (e.target === this) {
                        closeCoursesModal();
                    }
                });
            }

            // Close modal with Escape key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeCoursesModal();
                }
            });

            // Animate cards on scroll
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animation = 'fadeInUp 0.6s ease-out forwards';
                        entry.target.style.opacity = '1';
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            // Observe all animate-card elements
            document.querySelectorAll('.animate-card').forEach(card => {
                observer.observe(card);
            });

            // Add smooth hover effects to stats cards
            document.querySelectorAll('.card-hover').forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-8px)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });

            // Newsletter subscription (if implemented)
            const newsletterForm = document.querySelector('footer form');
            if (newsletterForm) {
                newsletterForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    const email = this.querySelector('input[type="email"]').value;
                    
                    // Show success message
                    const successDiv = document.createElement('div');
                    successDiv.className = 'fixed top-4 right-4 bg-success-100 border border-success-200 text-success-800 px-6 py-4 rounded-2xl shadow-lg z-50 animate-bounce-in';
                    successDiv.innerHTML = '<i class="fas fa-check-circle mr-2"></i>Thank you for subscribing!';
                    document.body.appendChild(successDiv);
                    
                    setTimeout(() => {
                        successDiv.remove();
                    }, 3000);
                    
                    this.reset();
                });
            }
        });
        
        // Mobile menu toggle function
        window.toggleMobileMenu = function() {
            const mobileMenu = document.getElementById('mobile-menu');
            if (mobileMenu) {
                mobileMenu.classList.toggle('hidden');
            }
        };
        
        // Initialize AOS
        AOS.init({
            duration: 800,
            easing: 'ease-out',
            once: true,
            offset: 100
        });
    </script>
</body>
</html>