<?php
$page_title = "Artikel & Edukasi Material";
$page_desc = "Kumpulan artikel edukasi seputar batu split, agregat beton, terrazzo premium, dan tips pengaplikasian batu alam untuk dinding dan lantai bangunan.";
require_once 'includes/header.php';

if (!isset($settings['menu_blog_visible']) || $settings['menu_blog_visible'] == 0) {
    header("Location: index.php");
    exit;
}

// Fetch all articles
try {
    $stmt = $pdo->query("SELECT * FROM articles ORDER BY id DESC");
    $articles = $stmt->fetchAll();
} catch (Exception $e) {
    $articles = [];
}
?>

<!-- Page Header Banner -->
<section style="background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url('assets/images/hero_bg.jpg') no-repeat center center/cover; padding: 120px 0 60px; text-align: center; color: var(--text-light);">
    <div class="container">
        <h1 style="font-size: 42px; font-weight: 800; margin-bottom: 10px;">Artikel & Blog</h1>
        <p style="color: var(--primary); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 14px;">Edukasi & Tips Seputar Agregat & Batu Alam</p>
    </div>
</section>

<!-- Blog Section -->
<section class="bg-alt">
    <div class="container">
        <?php if (count($articles) > 0): ?>
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px;">
                <?php foreach ($articles as $art): ?>
                    <article style="background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition); border: 1px solid var(--border-color); display: flex; flex-direction: column;">
                        <!-- Cover Image -->
                        <div style="position: relative; height: 200px; overflow: hidden;">
                            <?php 
                            $img_src = '';
                            if (!empty($art['image']) && file_exists('uploads/' . $art['image'])) {
                                $img_src = 'uploads/' . $art['image'];
                            } elseif (!empty($art['image']) && file_exists('assets/images/' . $art['image'])) {
                                $img_src = 'assets/images/' . $art['image'];
                            } else {
                                $img_src = get_article_fallback_image($art['slug']);
                            }
                            ?>
                            <img src="<?php echo $img_src; ?>" alt="<?php echo htmlspecialchars($art['title']); ?>" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                            <span style="position: absolute; bottom: 15px; left: 15px; background-color: var(--secondary); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px;">
                                Info Konstruksi
                            </span>
                        </div>
                        
                        <!-- Content -->
                        <div style="padding: 25px; flex-grow: 1; display: flex; flex-direction: column;">
                            <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 12px; display: flex; gap: 15px;">
                                <span><i class="far fa-user" style="color: var(--primary); margin-right: 4px;"></i> <?php echo htmlspecialchars($art['author']); ?></span>
                                <span><i class="far fa-calendar-alt" style="color: var(--primary); margin-right: 4px;"></i> <?php echo date('d M Y', strtotime($art['created_at'])); ?></span>
                            </div>
                            
                            <h3 style="font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 15px; color: var(--accent);">
                                <a href="blog-detail.php?slug=<?php echo htmlspecialchars($art['slug']); ?>" style="color: inherit; transition: var(--transition);">
                                    <?php echo htmlspecialchars($art['title']); ?>
                                </a>
                            </h3>
                            
                            <p style="color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 20px; flex-grow: 1;">
                                <?php 
                                $excerpt = strip_tags($art['content']);
                                echo (strlen($excerpt) > 130) ? substr($excerpt, 0, 130) . '...' : $excerpt; 
                                ?>
                            </p>
                            
                            <a href="blog-detail.php?slug=<?php echo htmlspecialchars($art['slug']); ?>" style="color: var(--primary); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: var(--transition);">
                                Baca Selengkapnya <i class="fas fa-chevron-right" style="font-size: 10px;"></i>
                            </a>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div style="text-align: center; padding: 60px 0;">
                <i class="far fa-newspaper" style="font-size: 60px; color: var(--border-color); margin-bottom: 20px;"></i>
                <h3 style="color: var(--text-muted); font-size: 18px;">Belum ada artikel yang diterbitkan saat ini.</h3>
            </div>
        <?php endif; ?>
    </div>
</section>

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