<?php include 'includes/header.php'; ?>
<?php include 'includes/db.php'; ?>

<section class="blog-section">
    <h2 class="section-title">📝 All Blogs</h2>
    <div class="blog-container">
        <?php
        $blogs = $conn->query("SELECT * FROM blog ORDER BY created_at DESC");
        if($blogs->num_rows > 0):
            while($blog = $blogs->fetch_assoc()):
                // Get first image for preview
                $img = $conn->query("SELECT image_path FROM blog_images WHERE blog_id=".$blog['id']." ORDER BY id ASC LIMIT 1")->fetch_assoc();
                $previewImage = $img ? $img['image_path'] : 'assets/images/default.jpg';

                // Short content
                $short = strip_tags($blog['content']);
                $short = mb_strlen($short) > 150 ? mb_substr($short,0,150).'...' : $short;
        ?>
        <a href="blogdetails.php?id=<?= $blog['id']; ?>" class="blog-card" style="background-image: url('<?= htmlspecialchars($previewImage); ?>')">
            <div class="overlay"></div>
            <div class="blog-content">
                <h3><?= htmlspecialchars($blog['title']); ?></h3>
                <p><?= htmlspecialchars($short); ?></p>
            </div>
        </a>
        <?php
            endwhile;
        else:
            echo "<p class='no-blog'>No blogs available.</p>";
        endif;
        ?>
    </div>
</section>

<style>
/* ===== Blog Section Base ===== */
.blog-section {
    padding: 60px 0;
    background: #eef5ff;
    text-align: center;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #25A9C2;
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #ff6600;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* ===== Blog Grid ===== */
.blog-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 90%;
    margin: 0 auto;
}

/* ===== Blog Card ===== */
.blog-card {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 6px 25px rgba(0,0,0,0.12);
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.3s;
}

.blog-card.visible {
    transform: translateY(0);
    opacity: 1;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* Overlay for text readability */
.blog-card .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    transition: background 0.3s;
}

.blog-card:hover .overlay {
    background: rgba(0,0,0,0.5);
}

/* Blog Content */
.blog-content {
    position: absolute;
    bottom: 0;
    padding: 20px;
    color: #fff;
    text-align: left;
    width: 100%;
}

.blog-content h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #25A9C2;
}

.blog-content p {
    font-size: 0.95rem;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .blog-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blog-container {
        grid-template-columns: 1fr;
    }
}

/* ===== Fade-up animation ===== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>

<script>
// Fade-in animation on scroll
const blogCards = document.querySelectorAll('.blog-card');

function showBlogCards() {
    const triggerBottom = window.innerHeight / 5 * 4;
    blogCards.forEach(card => {
        const cardTop = card.getBoundingClientRect().top;
        if(cardTop < triggerBottom) {
            card.classList.add('visible');
        }
    });
}

window.addEventListener('scroll', showBlogCards);
window.addEventListener('load', showBlogCards);
</script>

<?php include 'includes/footer.php'; ?>
