<?php
$title = 'Blog - ' . APP_NAME;
ob_start();
?>

<div class="container mx-auto px-4 py-8">
    <!-- Hero Section -->
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">Our Blog</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            Insights, updates, and resources to help you succeed in your learning journey.
        </p>
    </div>

    <!-- Featured Post -->
    <div class="mb-16">
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="md:flex">
                <div class="md:w-1/2">
                    <img src="<?php echo SITE_URL; ?>/assets/images/blog/featured.jpg" alt="Featured Post" class="w-full h-64 object-cover">
                </div>
                <div class="md:w-1/2 p-8">
                    <div class="flex items-center text-sm text-gray-500 mb-4">
                        <span class="bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full">Featured</span>
                        <span class="mx-2">•</span>
                        <span>March 15, 2024</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">
                        The Future of Online Learning: Trends to Watch in 2024
                    </h2>
                    <p class="text-gray-600 mb-6">
                        Explore the latest trends in online education and how they're shaping the future of learning...
                    </p>
                    <a href="/blog/future-of-online-learning" class="text-emerald-600 hover:text-emerald-700 font-medium">
                        Read More →
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Categories -->
    <div class="mb-12">
        <div class="flex flex-wrap gap-4 justify-center">
            <button class="px-4 py-2 bg-emerald-600 text-white rounded-full hover:bg-emerald-700 transition-colors">
                All Posts
            </button>
            <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">
                Technology
            </button>
            <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">
                Career Development
            </button>
            <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">
                Education
            </button>
            <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">
                Industry News
            </button>
        </div>
    </div>

    <!-- Blog Posts Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
        <!-- Post 1 -->
        <article class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="<?php echo SITE_URL; ?>/assets/images/blog/post1.jpg" alt="Blog Post" class="w-full h-48 object-cover">
            <div class="p-6">
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <span>March 10, 2024</span>
                    <span class="mx-2">•</span>
                    <span>5 min read</span>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">
                    Essential Skills for the Digital Age
                </h3>
                <p class="text-gray-600 mb-4">
                    Discover the key skills you need to thrive in today's digital workplace...
                </p>
                <a href="/blog/essential-digital-skills" class="text-emerald-600 hover:text-emerald-700 font-medium">
                    Read More →
                </a>
            </div>
        </article>

        <!-- Post 2 -->
        <article class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="<?php echo SITE_URL; ?>/assets/images/blog/post2.jpg" alt="Blog Post" class="w-full h-48 object-cover">
            <div class="p-6">
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <span>March 8, 2024</span>
                    <span class="mx-2">•</span>
                    <span>4 min read</span>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">
                    Building a Successful Career in Tech
                </h3>
                <p class="text-gray-600 mb-4">
                    Learn the steps to build a rewarding career in the technology industry...
                </p>
                <a href="/blog/career-in-tech" class="text-emerald-600 hover:text-emerald-700 font-medium">
                    Read More →
                </a>
            </div>
        </article>

        <!-- Post 3 -->
        <article class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="<?php echo SITE_URL; ?>/assets/images/blog/post3.jpg" alt="Blog Post" class="w-full h-48 object-cover">
            <div class="p-6">
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <span>March 5, 2024</span>
                    <span class="mx-2">•</span>
                    <span>6 min read</span>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">
                    The Power of Continuous Learning
                </h3>
                <p class="text-gray-600 mb-4">
                    Why continuous learning is essential for personal and professional growth...
                </p>
                <a href="/blog/continuous-learning" class="text-emerald-600 hover:text-emerald-700 font-medium">
                    Read More →
                </a>
            </div>
        </article>
    </div>

    <!-- Newsletter Section -->
    <div class="bg-emerald-50 rounded-lg p-8 text-center">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">Subscribe to Our Newsletter</h2>
        <p class="text-gray-600 mb-6">
            Get the latest articles and insights delivered straight to your inbox.
        </p>
        <form class="max-w-md mx-auto">
            <div class="flex gap-4">
                <input type="email" placeholder="Enter your email" 
                       class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-emerald-500">
                <button type="submit" 
                        class="bg-emerald-600 text-white px-6 py-2 rounded-lg hover:bg-emerald-700 transition-colors">
                    Subscribe
                </button>
            </div>
        </form>
    </div>
</div>

<?php
$content = ob_get_clean();
require_once APP_PATH . '/views/layouts/main.php';
?>