blog.php

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

// Function to generate random read time
function generateReadTime($descriptionLength) {
    $wordCount = str_word_count($descriptionLength);
    $readTime = max(3, min(12, round($wordCount / 200 * 60))); // Assuming 200 words per minute
    return $readTime . " min read";
}

// Function to determine if post should be featured (random)
function isFeatured($blogId) {
    // Make it deterministic based on blog ID so it doesn't change on refresh
    return ($blogId % 3 == 0); // Every 3rd blog is featured
}

// Fetch all blogs from database
function fetchAllBlogs($conn) {
    $sql = "SELECT b.*, u.fullname as user_fullname, u.image as user_image, e.fullname as expert_fullname, e.image as expert_image
            FROM blog b 
            LEFT JOIN user u ON b.uid = u.uid 
            LEFT JOIN expert e ON b.eid = e.eid 
            ORDER BY b.created_at DESC";
    
    $result = $conn->query($sql);
    $blogs = [];
    
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            // Determine author name
            $author = $row['user_fullname'] ? $row['user_fullname'] : $row['expert_fullname'];
            
            // Use tags as category, fallback to default if empty
            $category = $row['type'] ? $row['type'] : 'Mental Health';
            
            // Use database image, fallback to default if empty
            $image = $row['image'] ? $row['image'] : 'https://images.unsplash.com/photo-1544027993-37dbfe43562a?w=400&h=300&fit=crop';
            
            $blogs[] = [
                "id" => $row['bid'],
                "title" => $row['title'],
                "description" => $row['description'],
                "author_image" => $row['user_image'] ? $row['user_image'] : $row['expert_image'],
                "author" => $author,
                "date" => date('F j, Y', strtotime($row['created_at'])),
                "category" => $category,
                "image" => $image,
                "readTime" => generateReadTime($row['description']),
                "featured" => isFeatured($row['bid']), // This is just for the featured indicator
                "like_count" => $row['like_count']
            ];
        }
    }
    
    return $blogs;
}

// Fetch current user's blogs
function fetchCurrentUserBlogs($conn, $userId, $isExpert = false) {
    if ($isExpert) {
        $sql = "SELECT b.*, e.fullname as author_name, e.image as author_image
                FROM blog b 
                JOIN expert e ON b.eid = e.eid 
                WHERE b.eid = ? 
                ORDER BY b.created_at DESC";
    } else {
        $sql = "SELECT b.*, u.fullname as author_name, u.image as author_image
                FROM blog b 
                JOIN user u ON b.uid = u.uid 
                WHERE b.uid = ? 
                ORDER BY b.created_at DESC";
    }
    
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("i", $userId);
    $stmt->execute();
    $result = $stmt->get_result();
    
    $blogs = [];
    while($row = $result->fetch_assoc()) {
        // Use tags as category, fallback to default if empty
        $category = $row['type'] ? $row['type'] : 'Mental Health';
        
        // Use database image, fallback to default if empty
        $image = $row['image'] ? $row['image'] : 'https://images.unsplash.com/photo-1544027993-37dbfe43562a?w=400&h=300&fit=crop';
        
        $blogs[] = [
            "id" => $row['bid'],
            "title" => $row['title'],
            "description" => $row['description'],
            "author" => $row['author_name'],
            "author_image" => $row['author_image'],
            "date" => date('F j, Y', strtotime($row['created_at'])),
            "category" => $category,
            "image" => $image,
            "readTime" => generateReadTime($row['description']),
            "featured" => false, // User's own blogs are not featured in their own section
            "like_count" => $row['like_count']
        ];
    }
    
    return $blogs;
}

// Get all blogs
$blogPosts = fetchAllBlogs($conn);

// Get current user's blogs if logged in
$currentUserBlogs = [];
if (isset($_SESSION['user_id'])) {
    $currentUserBlogs = fetchCurrentUserBlogs($conn, $_SESSION['user_id'], false);
} elseif (isset($_SESSION['expert_id'])) {
    $currentUserBlogs = fetchCurrentUserBlogs($conn, $_SESSION['expert_id'], true);
}

// Get statistics
$totalBlogs = count($blogPosts);
$totalUsers = 0;
$totalLikes = 0;

// Get total users count
$userCountQuery = "SELECT COUNT(*) as total FROM user";
$userResult = $conn->query($userCountQuery);
if ($userResult->num_rows > 0) {
    $totalUsers = $userResult->fetch_assoc()['total'];
}

// Get total experts count and add to users
$expertCountQuery = "SELECT COUNT(*) as total FROM expert";
$expertResult = $conn->query($expertCountQuery);
if ($expertResult->num_rows > 0) {
    $totalUsers += $expertResult->fetch_assoc()['total'];
}

// Get total likes
$likesQuery = "SELECT SUM(like_count) as total_likes FROM blog";
$likesResult = $conn->query($likesQuery);
if ($likesResult->num_rows > 0) {
    $totalLikes = $likesResult->fetch_assoc()['total_likes'] ?: 0;
}

// Get unique categories from database
$categoriesQuery = "SELECT DISTINCT type FROM blog WHERE type IS NOT NULL AND type != ''";
$categoriesResult = $conn->query($categoriesQuery);
$dbCategories = [];
if ($categoriesResult->num_rows > 0) {
    while($row = $categoriesResult->fetch_assoc()) {
        if (!empty($row['type'])) {
            $dbCategories[] = $row['type'];
            // echo $row['type']; // Debug line to check categories
        }
    }
}

// Combine with default categories
$categories = array_merge(["All"], $dbCategories);
$categories = array_unique($categories); // Remove duplicates
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mental Health Blog - SoulLift Community</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="resources/soullift-icon.svg">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0fdfa',
                            100: '#ccfbf1',
                            200: '#99f6e4',
                            300: '#5eead4',
                            400: '#2dd4bf',
                            500: '#14b8a6',
                            600: '#0d9488',
                            700: '#0f766e',
                            800: '#115e59',
                            900: '#134e4a',
                        },
                        secondary: {
                            50: '#faf5ff',
                            100: '#f3e8ff',
                            200: '#e9d5ff',
                            300: '#d8b4fe',
                            400: '#c084fc',
                            500: '#a855f7',
                            600: '#9333ea',
                            700: '#7c3aed',
                            800: '#6b21a8',
                            900: '#581c87',
                        },
                        accent: {
                            50: '#fff7ed',
                            100: '#ffedd5',
                            200: '#fed7aa',
                            300: '#fdba74',
                            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',
                        },
                        accent: {
                            50: '#fff7ed',
                            100: '#ffedd5',
                            200: '#fed7aa',
                            300: '#fdba74',
                            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',
                        }
                    },
                    fontFamily: {
                        'inter': ['Inter', 'sans-serif'],
                        'poppins': ['Poppins', 'sans-serif'],
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'float-delayed': 'float 6s ease-in-out infinite 2s',
                        'float-slow': 'float 8s ease-in-out infinite',
                        'fade-in': 'fadeIn 0.8s ease-out forwards',
                        'slide-up': 'slideUp 0.6s ease-out forwards',
                        'bounce-in': 'bounceIn 0.8s ease-out forwards',
                        'card': 'cardAnimation 0.6s ease-out forwards',
                        'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0', transform: 'translateY(30px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        slideUp: {
                            '0%': { opacity: '0', transform: 'translateY(50px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        bounceIn: {
                            '0%': { opacity: '0', transform: 'scale(0.3)' },
                            '50%': { opacity: '1', transform: 'scale(1.05)' },
                            '70%': { transform: 'scale(0.9)' },
                            '100%': { opacity: '1', transform: 'scale(1)' },
                        },
                        cardAnimation: {
                            '0%': { opacity: '0', transform: 'translateY(30px) scale(0.95)' },
                            '100%': { opacity: '1', transform: 'translateY(0) scale(1)' },
                        },
                        pulseSoft: {
                            '0%, 100%': { opacity: '1' },
                            '50%': { opacity: '0.8' },
                        },
                    }
                }
            }
        }
    </script>
    <style>
        .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-primary {
            background: linear-gradient(135deg, #14b8a6, #0891b2);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #0d9488, #075985);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(20, 184, 166, 0.3);
        }
        
        .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%);
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-primary-50 font-inter hero-pattern">
    <!-- Navigation -->
    <header class="glass-effect sticky top-0 z-50 border-b border-white/20">
        <div class="container mx-auto px-6">
            <nav class="flex justify-between items-center py-4">
                <!-- Logo -->
                <a href="Homepage.php" class="flex items-center space-x-3 group">
                    <div class="relative">
                        <img src="resources/soullift-logo.svg" alt="SoulLift Logo" class="h-10 w-auto group-hover:scale-105 transition-transform duration-300">
                    </div>
                </a>
                
                <!-- Desktop Navigation -->
                <ul class="hidden lg:flex items-center space-x-8">
                    <li><a href="Homepage.php?page=home" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Home</a></li>
                    <li><a href="user_profile.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">My Profile</a></li>
                    <li><a href="blog.php" class="text-primary-600 font-semibold px-4 py-2 rounded-xl bg-primary-50/50 backdrop-blur-sm">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-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Home</a></li>
                        <li><a href="user_profile.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">My Profile</a></li>
                        <li><a href="blog.php" class="block text-primary-600 font-semibold px-4 py-3 rounded-xl bg-primary-50/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="<?php echo $appointmentsPage; ?>" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Appointments</a></li>
                        <?php elseif (isset($_SESSION['role']) && $_SESSION['role'] === 'expert'): ?>
                            <li><a href="courses.php" class="block text-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="<?php echo $appointmentsPage; ?>" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Appointments</a></li>
                        <?php else: ?>
                            <li><a href="courses.php" class="block text-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>

    <!-- Toast Notification -->
    <?php if (isset($_SESSION['blog_success'])): ?>
    <div id="toast-notification" class="fixed top-20 right-4 z-50 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-4 rounded-lg shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out">
        <div class="flex items-center space-x-3">
            <i class="fas fa-check-circle text-xl"></i>
            <span class="font-semibold"><?= htmlspecialchars($_SESSION['blog_success']) ?></span>
            <button onclick="hideToast()" class="ml-4 text-white hover:text-gray-200">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    <script>
        // Show toast notification
        document.addEventListener('DOMContentLoaded', function() {
            const toast = document.getElementById('toast-notification');
            if (toast) {
                // Show toast
                setTimeout(() => {
                    toast.classList.remove('translate-x-full');
                }, 100);
                
                // Auto hide after 5 seconds
                setTimeout(() => {
                    hideToast();
                }, 5000);
            }
        });
        
        function hideToast() {
            const toast = document.getElementById('toast-notification');
            if (toast) {
                toast.classList.add('translate-x-full');
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }
        }
    </script>
    <?php 
    // Clear the session message after showing it
    unset($_SESSION['blog_success']);
    endif; 
    ?>

    <!-- Hero Section -->
    <section class="relative py-24 lg:py-32 overflow-hidden">
        <!-- Background Elements -->
        <div class="absolute inset-0">
            <div class="absolute top-20 left-20 w-72 h-72 bg-gradient-to-br from-primary-400/20 to-secondary-400/20 rounded-full blur-3xl animate-float"></div>
            <div class="absolute bottom-20 right-20 w-96 h-96 bg-gradient-to-br from-secondary-400/20 to-accent-400/20 rounded-full blur-3xl animate-float-delayed"></div>
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-to-br from-accent-400/10 to-primary-400/10 rounded-full blur-3xl animate-float-slow"></div>
        </div>

        <div class="container mx-auto px-6 relative z-10">
            <div class="max-w-4xl mx-auto text-center">
                <!-- Badge -->
                <div class="inline-flex items-center space-x-2 glass-effect px-6 py-3 rounded-full text-sm font-semibold text-primary-700 mb-8 animate-fade-in">
                    <i class="fas fa-blog text-primary-600"></i>
                    <span>Mental Health Community</span>
                </div>

                <!-- Main Headline -->
                <h1 class="text-5xl lg:text-7xl font-bold mb-8 animate-slide-up">
                    <span class="gradient-text">Share Your Journey</span>
                    <br>
                    <span class="text-gray-800">Inspire Others</span>
                </h1>

                <!-- Subheadline -->
                <p class="text-xl lg:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed animate-fade-in">
                    Join our supportive community where stories heal, experiences guide, and every voice matters in the journey toward mental wellness.
                </p>

                <!-- CTA Buttons -->
                <div class="flex flex-col sm:flex-row gap-6 justify-center items-center animate-bounce-in">
                    <a href="create_blog.php" class="btn-primary text-white px-8 py-4 rounded-2xl font-semibold text-lg shadow-xl hover:shadow-2xl transition-all duration-300 group">
                        <i class="fas fa-pen-fancy mr-3 group-hover:animate-pulse"></i>
                        Write Your Story
                    </a>
                    <a href="#featured" class="glass-effect text-primary-700 px-8 py-4 rounded-2xl font-semibold text-lg hover:bg-white/50 transition-all duration-300 group">
                        <i class="fas fa-book-open mr-3 group-hover:scale-110 transition-transform"></i>
                        Explore Stories
                    </a>
                </div>

                <!-- Stats -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16 animate-card">
                    <div class="glass-effect p-6 rounded-2xl text-center group hover:bg-white/40 transition-all duration-300">
                        <div class="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-newspaper text-white text-2xl"></i>
                        </div>
                        <h3 class="text-3xl font-bold text-gray-800 mb-2"><?= $totalBlogs ?>+</h3>
                        <p class="text-gray-600 font-medium">Stories Shared</p>
                    </div>
                    
                    <div class="glass-effect p-6 rounded-2xl text-center group hover:bg-white/40 transition-all duration-300">
                        <div class="w-16 h-16 bg-gradient-to-br from-secondary-500 to-secondary-600 rounded-2xl 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-2xl"></i>
                        </div>
                        <h3 class="text-3xl font-bold text-gray-800 mb-2"><?= $totalUsers ?>+</h3>
                        <p class="text-gray-600 font-medium">Community Members</p>
                    </div>
                    
                    <div class="glass-effect p-6 rounded-2xl text-center group hover:bg-white/40 transition-all duration-300">
                        <div class="w-16 h-16 bg-gradient-to-br from-accent-500 to-accent-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-heart text-white text-2xl"></i>
                        </div>
                        <h3 class="text-3xl font-bold text-gray-800 mb-2"><?= $totalLikes ?>+</h3>
                        <p class="text-gray-600 font-medium">Stories Loved</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Category Filter -->
    <section class="py-16 bg-gradient-to-r from-primary-50/50 to-secondary-50/50 backdrop-blur-sm">
        <div class="container mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">Browse by Category</h2>
                <p class="text-xl text-gray-600">Find stories that resonate with your journey</p>
            </div>
            
            <div class="flex flex-wrap justify-center gap-4">
                <?php foreach($categories as $category): ?>
                <button class="category-filter glass-effect text-primary-700 px-6 py-3 rounded-full font-semibold hover:bg-white/50 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105" data-category="<?= $category ?>">
                    <i class="fas fa-tag mr-2 opacity-70"></i>
                    <?= $category ?>
                </button>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Featured Posts -->
    <section id="featured" class="py-20">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <div class="inline-flex items-center space-x-2 glass-effect px-6 py-3 rounded-full text-sm font-semibold text-primary-700 mb-6">
                    <i class="fas fa-star text-accent-500"></i>
                    <span>Featured Content</span>
                </div>
                <h2 class="text-4xl lg:text-5xl font-bold text-gray-800 mb-6">Featured Stories</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Carefully curated content from our experts and community contributors.
                </p>
            </div>
            
            <!-- Featured Posts Grid -->
            <?php if (!empty($blogPosts)): ?>
            <div class="grid lg:grid-cols-2 gap-8 mb-16">
                <?php 
                $featuredCount = 0;
                foreach($blogPosts as $post): 
                    // if($featuredCount >= 4) break; // Show only 4 featured posts
                    // Skip current user's/expert's posts in featured section
                    if (
                        (isset($_SESSION['user_id']) && isset($post['author']) && $post['author'] === ($_SESSION['fullname'] ?? '')) ||
                        (isset($_SESSION['expert_id']) && isset($post['author']) && $post['author'] === ($_SESSION['expert_fullname'] ?? ''))
                    ) {
                        continue;
                    }
                    $featuredCount++;
                ?>
                <article class="glass-effect rounded-3xl overflow-hidden group cursor-pointer blog-card hover:bg-white/60 transition-all duration-300 shadow-xl hover:shadow-2xl transform hover:scale-105" data-category="<?= $post['category'] ?>" onclick="window.location.href='blog_details.php?id=<?= $post['id'] ?>'">
                    <div class="relative">
                        <img src="<?= $post['image'] ?>" alt="<?= $post['title'] ?>" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300">
                        <?php if ($post['featured']): ?>
                        <div class="absolute top-4 left-4">
                            <span class="bg-gradient-to-r from-accent-500 to-accent-600 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
                                <i class="fas fa-star mr-1"></i>Featured
                            </span>
                        </div>
                        <?php endif; ?>
                        <div class="absolute top-4 right-4">
                            <span class="glass-effect text-primary-700 px-4 py-2 rounded-full text-sm font-semibold">
                                <?= $post['category'] ?>
                            </span>
                        </div>
                    </div>
                    
                    <div class="p-8">
                        <div class="flex items-center space-x-4 mb-4 text-sm text-gray-500">
                            <div class="flex items-center space-x-2">
                                <div class="w-8 h-8 bg-gradient-to-r from-primary-100 to-secondary-100 rounded-full flex items-center justify-center">
                                    <img src="<?= $post['author_image'] ?>" alt="<?= $post['author'] ?>" class="w-7 h-7 rounded-full object-cover">
                                </div>
                                <span class="font-medium"><?= $post['author'] ?></span>
                            </div>
                            <span>•</span>
                            <span><?= $post['date'] ?></span>
                            <span>•</span>
                            <span><?= $post['readTime'] ?></span>
                            <span>•</span>
                            <span class="text-accent-600"><i class="fas fa-heart"></i> <?= $post['like_count'] ?></span>
                        </div>
                        
                        <h3 class="text-2xl font-bold text-gray-800 mb-4 group-hover:text-primary-600 transition-colors">
                            <?= $post['title'] ?>
                        </h3>
                        
                        <p class="text-gray-600 mb-6 line-clamp-3"><?= $post['description'] ?></p>
                        
                        <div class="flex items-center justify-between">
                            <span class="btn-primary text-white px-6 py-2 rounded-full font-semibold inline-flex items-center group-hover:shadow-lg transition-all">
                                Read More
                                <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                            </span>
                            <div class="flex space-x-2">
                                <button class="glass-effect p-2 text-primary-600 hover:bg-white/50 transition-colors rounded-full" onclick="event.stopPropagation()">
                                    <i class="fas fa-share"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </article>
                <?php endforeach; ?>
            </div>
            <?php else: ?>
            <div class="text-center py-16">
                <div class="w-24 h-24 bg-gradient-to-br from-primary-100 to-secondary-100 rounded-3xl flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-newspaper text-4xl text-primary-600"></i>
                </div>
                <h3 class="text-2xl font-semibold text-gray-700 mb-4">No featured articles yet</h3>
                <p class="text-gray-500 mb-8">Featured articles will appear here once they are published.</p>
                <a href="create_blog.php" class="btn-primary text-white px-8 py-4 rounded-2xl font-semibold shadow-xl hover:shadow-2xl transition-all duration-300">
                    <i class="fas fa-pen-fancy mr-2"></i>
                    Write an Article
                </a>
            </div>
            <?php endif; ?>
        </div>
    </section>
    <!-- My Articles Section -->
    <?php if ((isset($_SESSION['user_id']) || isset($_SESSION['expert_id'])) && !empty($currentUserBlogs)): ?>
    <section class="py-20 bg-gradient-to-br from-primary-50/30 to-secondary-50/30">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <div class="inline-flex items-center space-x-2 glass-effect px-6 py-3 rounded-full text-sm font-semibold text-primary-700 mb-6">
                    <i class="fas fa-user-edit text-secondary-600"></i>
                    <span>Your Content</span>
                </div>
                <h2 class="text-4xl lg:text-5xl font-bold text-gray-800 mb-6">My Articles</h2>
                <p class="text-xl text-gray-600">Your published stories and contributions to the community</p>
            </div>
            
            <div class="grid lg:grid-cols-2 gap-8">
                <?php foreach($currentUserBlogs as $post): ?>
                <article class="glass-effect rounded-3xl overflow-hidden group cursor-pointer blog-card hover:bg-white/60 transition-all duration-300 shadow-xl hover:shadow-2xl transform hover:scale-105" data-category="<?= $post['category'] ?>" onclick="window.location.href='blog_details.php?id=<?= $post['id'] ?>'">
                    <div class="relative">
                        <img src="<?= $post['image'] ?>" alt="<?= $post['title'] ?>" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                        <div class="absolute top-4 right-4">
                            <span class="glass-effect text-primary-700 px-4 py-2 rounded-full text-sm font-semibold">
                                <?= $post['category'] ?>
                            </span>
                        </div>
                        <div class="absolute top-4 left-4">
                            <span class="bg-gradient-to-r from-success-500 to-success-600 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
                                <i class="fas fa-user mr-1"></i>Your Post
                            </span>
                        </div>
                    </div>
                    
                    <div class="p-6">
                        <div class="flex items-center space-x-4 mb-3 text-sm text-gray-500">
                            <div class="flex items-center space-x-2">
                                <img src="<?= $post['author_image'] ?>" alt="<?= $post['author'] ?>" class="w-8 h-8 rounded-full object-cover">
                                <span class="font-medium"><?= $post['author'] ?></span>
                            </div>
                            <span>•</span>
                            <span><?= $post['date'] ?></span>
                            <span>•</span>
                            <span><?= $post['readTime'] ?></span>
                            <span>•</span>
                            <span class="text-accent-600"><i class="fas fa-heart"></i> <?= $post['like_count'] ?></span>
                        </div>
                        
                        <h3 class="text-xl font-bold text-gray-800 mb-3 group-hover:text-primary-600 transition-colors">
                            <?= $post['title'] ?>
                        </h3>
                        
                        <p class="text-gray-600 mb-4 line-clamp-3"><?= substr($post['description'], 0, 120) ?>...</p>
                        
                        <div class="flex items-center justify-between">
                            <span class="btn-secondary text-white px-6 py-2 rounded-full font-semibold inline-flex items-center group-hover:shadow-lg transition-all">
                                Read More
                            </span>
                            <div class="flex space-x-2">
                                <button class="glass-effect p-2 text-primary-600 hover:bg-white/50 transition-colors rounded-full text-sm" onclick="event.stopPropagation()">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="glass-effect p-2 text-primary-600 hover:bg-white/50 transition-colors rounded-full text-sm" onclick="event.stopPropagation()">
                                    <i class="fas fa-share"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </article>
                <?php endforeach; ?>
            </div>
            
            <?php if (count($currentUserBlogs) === 0): ?>
            <div class="text-center py-16">
                <div class="w-24 h-24 bg-gradient-to-br from-secondary-100 to-accent-100 rounded-3xl flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-pen-alt text-4xl text-secondary-600"></i>
                </div>
                <h3 class="text-2xl font-semibold text-gray-700 mb-4">No articles yet</h3>
                <p class="text-gray-500 mb-8">Start sharing your thoughts and experiences with the community.</p>
                <a href="create_blog.php" class="btn-secondary text-white px-8 py-4 rounded-2xl font-semibold shadow-xl hover:shadow-2xl transition-all duration-300">
                    <i class="fas fa-pen-fancy mr-2"></i>
                    Write Your First Article
                </a>
            </div>
            <?php endif; ?>
        </div>
    </section>
    <?php else: ?>
    <!-- More Articles Section -->
    <section class="py-20">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-4xl lg:text-5xl font-bold text-gray-800 mb-6">More Articles</h2>
                <p class="text-xl text-gray-600">Explore more articles from our community</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php 
                // Show remaining blogs (skip first 4 that were shown as featured)
                $skipCount = 0;
                foreach($blogPosts as $post): 
                    $skipCount++;
                    if ($skipCount <= 4) continue; // Skip first 4 that were shown above
                ?>
                <article class="glass-effect rounded-3xl overflow-hidden group cursor-pointer blog-card hover:bg-white/60 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105" data-category="<?= $post['category'] ?>" onclick="window.location.href='blog_details.php?id=<?= $post['id'] ?>'">
                    <div class="relative">
                        <img src="<?= $post['image'] ?>" alt="<?= $post['title'] ?>" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                        <div class="absolute top-4 right-4">
                            <span class="glass-effect text-primary-700 px-3 py-1 rounded-full text-sm font-semibold">
                                <?= $post['category'] ?>
                            </span>
                        </div>
                        <?php if ($post['featured']): ?>
                        <div class="absolute top-4 left-4">
                            <span class="bg-gradient-to-r from-accent-500 to-accent-600 text-white px-3 py-1 rounded-full text-sm font-semibold">
                                <i class="fas fa-star mr-1"></i>Featured
                            </span>
                        </div>
                        <?php endif; ?>
                    </div>
                    
                    <div class="p-6">
                        <div class="flex items-center space-x-4 mb-3 text-sm text-gray-500">
                            <span class="font-medium"><?= $post['author'] ?></span>
                            <span>•</span>
                            <span><?= $post['date'] ?></span>
                            <span>•</span>
                            <span><?= $post['readTime'] ?></span>
                        </div>
                        
                        <h3 class="text-xl font-bold text-gray-800 mb-3 group-hover:text-primary-600 transition-colors">
                            <?= $post['title'] ?>
                        </h3>
                        
                        <p class="text-gray-600 mb-4 line-clamp-3"><?= substr($post['description'], 0, 120) ?>...</p>
                        
                        <div class="flex items-center justify-between">
                            <span class="btn-primary text-white px-4 py-2 rounded-full font-semibold text-sm group-hover:shadow-lg transition-all">
                                Read More
                            </span>
                            <div class="flex space-x-2">
                                <button class="glass-effect p-2 text-primary-600 hover:bg-white/50 transition-colors rounded-full text-sm" onclick="event.stopPropagation()">
                                    <i class="fas fa-heart"></i>
                                </button>
                                <button class="glass-effect p-2 text-primary-600 hover:bg-white/50 transition-colors rounded-full text-sm" onclick="event.stopPropagation()">
                                    <i class="fas fa-share"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <!-- 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>
        // Initialize AOS animations
        AOS.init({
            duration: 800,
            easing: 'ease-out',
            once: true,
            offset: 100
        });

        // Mobile menu toggle
        function toggleMobileMenu() {
            const mobileMenu = document.getElementById('mobileMenu');
            const isHidden = mobileMenu.classList.contains('opacity-0');
            
            if (isHidden) {
                mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
                mobileMenu.classList.add('opacity-100');
            } else {
                mobileMenu.classList.add('opacity-0', 'pointer-events-none');
                mobileMenu.classList.remove('opacity-100');
            }
        }

        // Category filter functionality
        document.addEventListener('DOMContentLoaded', function() {
            const filterButtons = document.querySelectorAll('.category-filter');
            const blogCards = document.querySelectorAll('.blog-card');
            
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const selectedCategory = this.getAttribute('data-category');
                    
                    // Update active button
                    filterButtons.forEach(btn => {
                        btn.classList.remove('bg-primary-600', 'text-white');
                        btn.classList.add('text-primary-700');
                    });
                    this.classList.remove('text-primary-700');
                    this.classList.add('bg-primary-600', 'text-white');
                    
                    // Filter cards
                    let visibleCount = 0;
                    blogCards.forEach(card => {
                        const cardCategory = card.getAttribute('data-category');
                        if (selectedCategory === 'All' || cardCategory === selectedCategory) {
                            card.style.display = 'block';
                            visibleCount++;
                        } else {
                            card.style.display = 'none';
                        }
                    });
                    
                    // Show message if no results
                    const noResultsMessages = document.querySelectorAll('.no-results-message');
                    noResultsMessages.forEach(msg => msg.remove());
                    
                    if (visibleCount === 0) {
                        const sections = document.querySelectorAll('.grid');
                        sections.forEach(section => {
                            if (section.querySelectorAll('.blog-card').length > 0) {
                                const noResultsMessage = document.createElement('div');
                                noResultsMessage.className = 'no-results-message text-center py-12 col-span-full';
                                noResultsMessage.innerHTML = `
                                    <div class="w-24 h-24 bg-gradient-to-br from-primary-100 to-secondary-100 rounded-3xl flex items-center justify-center mx-auto mb-6">
                                        <i class="fas fa-search text-4xl text-primary-600"></i>
                                    </div>
                                    <h3 class="text-2xl font-semibold text-gray-700 mb-4">No articles found</h3>
                                    <p class="text-gray-500 mb-8">No articles match the selected category "${selectedCategory}".</p>
                                    <button onclick="filterButtons[0].click()" class="btn-primary text-white px-6 py-3 rounded-2xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300">
                                        Show All Articles
                                    </button>
                                `;
                                section.appendChild(noResultsMessage);
                            }
                        });
                    }
                });
            });
            
            // Set initial active state
            if (filterButtons.length > 0) {
                filterButtons[0].click();
            }
        });
    </script>
</body>
</html>