<?php
session_start();
require_once 'admin-panal/includes/db.php';

$blogsQuery = $pdo->query("SELECT * FROM blogs WHERE is_published = 1 ORDER BY created_at DESC");
$blogs = $blogsQuery->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
       <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-Z2X2T395KZ');
</script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Our Blog — Elegance of India</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
    <link rel="stylesheet" href="style.css" />
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            color: #444;
            line-height: 1.8;
        }
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        .blog-card {
            border: 1px solid #eaeaea;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            background: #fff;
            display: flex;
            flex-direction: column;
        }
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }
        .blog-img-wrap {
            width: 100%;
            height: 220px;
            overflow: hidden;
            background: #fafafa;
        }
        .blog-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        .blog-card:hover .blog-img-wrap img {
            transform: scale(1.05);
        }
        .blog-body {
            padding: 25px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .blog-date {
            font-size: 0.85rem;
            color: #c9a96e;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }
        .blog-title {
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            font-size: 1.4rem;
            color: #111;
            margin-bottom: 12px;
            line-height: 1.3;
        }
        .blog-title a {
            color: inherit;
            text-decoration: none;
            transition: color 0.3s;
        }
        .blog-title a:hover {
            color: #c9a96e;
        }
        .blog-desc {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.8;
            margin-bottom: 20px;
            flex-grow: 1;
        }
        .blog-read-more {
            display: inline-block;
            font-size: 0.9rem;
            color: #111;
            font-weight: 600;
            text-transform: uppercase;
            text-decoration: none;
            letter-spacing: 1px;
            border-bottom: 1px solid #111;
            padding-bottom: 2px;
            transition: color 0.3s, border-color 0.3s;
            align-self: flex-start;
        }
        .blog-read-more:hover {
            color: #c9a96e;
            border-color: #c9a96e;
        }
        
        .empty-blog {
            text-align: center;
            padding: 80px 20px;
            background: #fafafa;
            border-radius: 8px;
            color: #666;
        }
        .empty-blog i {
            font-size: 3rem;
            color: #ddd;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<?php include 'inc/header.php'; ?>

<div class="page-header" style="background: #fdfbf8; padding: 60px 0; text-align: center; border-bottom: 1px solid #eee;">
    <div class="container">
        <h1 style="font-family: 'Playfair Display', serif; font-size: 3rem; margin-bottom: 10px;">Our Blogs</h1>
        <p style="color: #888; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem;">Stories, Styles & Elegance</p>
    </div>
</div>

<div class="blogs-section" style="padding: 60px 0 100px; background: #fff;">
    <div class="container">
        <?php if (empty($blogs)): ?>
            <div class="empty-blog">
                <i class="fas fa-book-open"></i>
                <h3>No articles published yet</h3>
                <p>Check back later for inspiration and stories.</p>
            </div>
        <?php else: ?>
            <div class="blog-grid">
                <?php foreach ($blogs as $blog): ?>
                    <article class="blog-card">
                        <a href="blog-details.php?slug=<?= htmlspecialchars($blog['slug']) ?>" class="blog-img-wrap">
                            <?php if (!empty($blog['image_url'])): ?>
                                <img src="<?= htmlspecialchars($blog['image_url']) ?>" alt="<?= htmlspecialchars($blog['title']) ?>" loading="lazy" />
                            <?php else: ?>
                                <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#ccc;">
                                    <i class="fas fa-image" style="font-size:3rem;"></i>
                                </div>
                            <?php endif; ?>
                        </a>
                        <div class="blog-body">
                            <div class="blog-date"><?= date('F j, Y', strtotime($blog['created_at'])) ?></div>
                            <h2 class="blog-title">
                                <a href="blog-details.php?slug=<?= htmlspecialchars($blog['slug']) ?>">
                                    <?= htmlspecialchars($blog['title']) ?>
                                </a>
                            </h2>
                            <p class="blog-desc"><?= htmlspecialchars($blog['short_description'] ?? mb_substr(strip_tags($blog['content']), 0, 150) . '...') ?></p>
                            <a href="blog-details.php?slug=<?= htmlspecialchars($blog['slug']) ?>" class="blog-read-more">Read Article</a>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<?php include 'inc/footer.php'; ?>
</body>
</html>
