<?php 
/**
 * blog.php - ব্লগ পোস্ট প্রদর্শনের পেজ
 * হোভার ইফেক্ট, টাইটেল লিঙ্ক এবং হিরো ব্যানার যুক্ত করা হয়েছে।
 */

include('db_config.php');
include('header.php'); 
?>
<script src="assets/js/reveal.js"></script>
<link rel="stylesheet" href="assets/css/style.css">
<!-- হোভার ইফেক্ট এবং হিরো ব্যানার সিএসএস -->
<style>
    .reg-hero-banner {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                    url('https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?auto=format&fit=crop&w=1350&q=80');
        background-size: cover;
        background-position: center;
    }
    .blog-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }
    .blog-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    }
    .blog-title {
        margin: 8px 0;
        font-size: 18px;
        line-height: 1.3;
        /* height: 48px; */
        overflow: hidden;
    }
    .blog-title-link {
        text-decoration: none;
        color: var(--text-color);
        transition: color 0.2s;
    }
    .blog-title-link:hover {
        color: var(--secondary-color);
    }
</style>
<!-- হিরো ব্যানার সেকশন -->
<section style="padding: 0px 0px 60px 0px; background: var(--light-bg); position: relative;">
    <div class="reg-hero-banner">
        <div class="hero-content">
            <h1>আমাদের ব্লগ</h1>
        <p>ইন্টারনেট ও প্রযুক্তি বিষয়ক সর্বশেষ আপডেট</p>
        </div>
    </div>
    <!-- Bottom Curve Divider -->
    <div class="divider-bottom">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5,73.84-4.36,147.54,16.88,218.2,35.26,69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113,2,1200,34.72V0Z" fill="var(--light-bg)"></path>
        </svg>
    </div>
</section>


<section style="padding: 40px 0px 50px 0px; background: var(--light-bg); position: relative;">
<div class="container reveal up">
    <!-- কার্ড গ্রিড কন্টেইনার -->
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; align-items: start;">
        <?php
        $sql = "SELECT * FROM blogs WHERE status = 'Published' ORDER BY id DESC";
        $result = mysqli_query($conn, $sql);

        if ($result && mysqli_num_rows($result) > 0) {
            while($row = mysqli_fetch_assoc($result)) {
                $image = !empty($row['featured_image']) ? $row['featured_image'] : '';
                $post_url = "view_post.php?id=" . $row['id'];
                ?>
                <!-- একক ব্লগ কার্ড -->
                <div class="blog-card" style="background: #fff; border: 1px solid #e1e1e1; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    
                    <a href="<?php echo $post_url; ?>">
                        <?php if($image): ?>
                            <img src="<?php echo $image; ?>" alt="Blog Thumbnail" style="width: 100%; height: 170px; object-fit: cover; display: block;">
                        <?php else: ?>
                            <div style="width: 100%; height: 170px; background: #57a03a; color: white; display: flex; align-items: center; justify-content: center; padding: 15px; text-align: center; font-weight: bold;">
                                <?php echo $row['title']; ?>
                            </div>
                        <?php endif; ?>
                    </a>

                    <div style="padding: 15px;">
                        <h3 class="blog-title">
                            <a href="<?php echo $post_url; ?>" class="blog-title-link">
                                <?php echo $row['title']; ?>
                            </a>
                        </h3>
                        <p style="color: #666; font-size: 13px; line-height: 1.5; margin-bottom: 5px; height: 40px; text-align: justify; overflow: hidden;">
                            <?php echo strip_tags($row['content']); ?>
                        </p>
                        <a href="<?php echo $post_url; ?>" style="display: inline-block; color: #57a03a; font-weight: bold; text-decoration: none; transition: 0.3s; font-size: 14px;">
                            আরও পড়ুন &rarr;
                        </a>
                    </div>
                </div>
                <?php
            }
        } else {
            echo "<div style='grid-column: 1/-1; text-align: center; padding: 60px; color: #999;'>বর্তমানে কোনো পোস্ট নেই।</div>";
        }
        ?>
    </div>
</div>
</section>
<?php include('footer.php'); ?>