<?php
require_once __DIR__ . '/config/db.php';

$connection->query("CREATE TABLE IF NOT EXISTS blogs (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    category VARCHAR(120) NOT NULL,
    author VARCHAR(120) NOT NULL,
    day VARCHAR(10) NOT NULL,
    month VARCHAR(30) NOT NULL,
    image_path VARCHAR(500) NOT NULL,
    content TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");

$search = trim((string)($_GET['search'] ?? ''));
$categoryFilter = trim((string)($_GET['category'] ?? ''));

$where = [];
$params = [];
$types = '';

if ($search !== '') {
    $where[] = '(title LIKE ? OR category LIKE ? OR author LIKE ? OR content LIKE ?)';
    $term = '%' . $search . '%';
    $params[] = $term;
    $params[] = $term;
    $params[] = $term;
    $params[] = $term;
    $types .= 'ssss';
}

if ($categoryFilter !== '') {
    $where[] = 'category = ?';
    $params[] = $categoryFilter;
    $types .= 's';
}

$sql = 'SELECT id, title, category, author, day, month, image_path, content, created_at FROM blogs';
if (!empty($where)) {
    $sql .= ' WHERE ' . implode(' AND ', $where);
}
$sql .= ' ORDER BY created_at DESC';

$blogs = [];
$stmt = $connection->prepare($sql);
if ($stmt) {
    if (!empty($params)) {
        $stmt->bind_param($types, ...$params);
    }
    if ($stmt->execute()) {
        $result = $stmt->get_result();
        if ($result) {
            while ($row = $result->fetch_assoc()) {
                $blogs[] = $row;
            }
        }
    }
    $stmt->close();
}

$categories = [];
$categoryResult = $connection->query("SELECT DISTINCT category FROM blogs WHERE category IS NOT NULL AND category <> '' ORDER BY category ASC");
if ($categoryResult) {
    while ($cat = $categoryResult->fetch_assoc()) {
        $categories[] = (string)$cat['category'];
    }
}

$featuredBlogs = array_slice($blogs, 0, 3);

function blogDateLabel(array $blog): string
{
    $day = trim((string)($blog['day'] ?? ''));
    $month = trim((string)($blog['month'] ?? ''));
    if ($day !== '' || $month !== '') {
        return trim($day . ' ' . $month);
    }

    $createdAt = (string)($blog['created_at'] ?? '');
    if ($createdAt !== '') {
        $ts = strtotime($createdAt);
        if ($ts !== false) {
            return date('d M Y', $ts);
        }
    }

    return 'Recent';
}

function blogExcerpt(array $blog): string
{
    $content = trim((string)($blog['content'] ?? ''));
    if ($content === '') {
        return 'Explore practical interior ideas, planning insights, and design direction from our team.';
    }

    $plain = strip_tags($content);
    if (function_exists('mb_strlen') && function_exists('mb_substr')) {
        if (mb_strlen($plain) > 145) {
            return mb_substr($plain, 0, 145) . '...';
        }
        return $plain;
    }

    if (strlen($plain) > 145) {
        return substr($plain, 0, 145) . '...';
    }

    return $plain;
}
?>
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Blog | Faren Interior Design</title>
    <meta name="author" content="themeholy">
    <meta name="description" content="Read the latest interior design stories, practical planning tips, and project insights from Faren Interior Design.">
    <meta name="keywords" content="interior design blog, home interior tips, design inspiration">
    <meta name="robots" content="INDEX,FOLLOW">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="assets/img/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
    <link rel="manifest" href="assets/img/favicons/manifest.json">

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/js/auth-ui-global.js"></script>

    <style>
        :root {
            --blog-bg: #f3ece2;
            --blog-surface: #ffffff;
            --blog-border: #eadfce;
            --blog-text: #211b16;
            --blog-muted: #72695f;
            --blog-accent: #b78d5e;
            --blog-accent-dark: #8f6945;
        }

        .blog-page {
            min-height: 100vh;
            padding-top: 10px;
            padding-bottom: 88px;
            background:
                radial-gradient(circle at 12% 10%, rgba(183, 141, 94, 0.16), transparent 36%),
                radial-gradient(circle at 85% 85%, rgba(143, 105, 69, 0.1), transparent 40%),
                linear-gradient(180deg, #f8f4ed 0%, var(--blog-bg) 100%);
        }

        .blog-shell {
            width: auto;
            
        }

        .blog-head {
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 22px;
            background: linear-gradient(130deg, #1e1712 0%, #34271d 48%, #4d392a 100%);
            color: #fff;
            padding: clamp(22px, 3.5vw, 40px);
            box-shadow: 0 18px 42px rgba(25, 17, 10, 0.22);
            margin-bottom: 18px;
        }

        .blog-head p {
            margin: 0;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.78);
        }

        .blog-head h1 {
            margin: 10px 0 0;
            font-size: clamp(30px, 5.4vw, 56px);
            line-height: 1.05;
            font-weight: 800;
            max-width: 15ch;
        }

        .blog-head span {
            display: block;
            margin-top: 12px;
            color: rgba(255, 255, 255, 0.88);
            font-size: clamp(14px, 2vw, 18px);
            line-height: 1.6;
            max-width: 62ch;
        }

        .blog-tools {
            background: var(--blog-surface);
            border: 1px solid var(--blog-border);
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 8px 22px rgba(29, 20, 12, 0.07);
            display: grid;
            grid-template-columns: minmax(0, 1fr) 230px auto;
            gap: 10px;
            align-items: center;
        }

        .blog-input,
        .blog-select {
            width: 100%;
            border: 1px solid var(--blog-border);
            border-radius: 10px;
            padding: 11px 12px;
            background: #fff;
            color: #332a21;
            font-size: 14px;
            font-weight: 600;
            outline: none;
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        .blog-input:focus,
        .blog-select:focus {
            border-color: #d1b18f;
            box-shadow: 0 0 0 3px rgba(183, 141, 94, 0.16);
        }

        .blog-btn {
            border: 1px solid transparent;
            border-radius: 10px;
            padding: 11px 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            transition: all .22s ease;
            cursor: pointer;
        }

        .blog-btn.primary {
            background: var(--blog-accent);
            color: #1f1710;
        }

        .blog-btn.primary:hover {
            background: #c79e73;
            color: #1f1710;
        }

        .blog-btn.light {
            background: #fff;
            color: #5f5244;
            border-color: var(--blog-border);
        }

        .blog-btn.light:hover {
            border-color: #d7c2a8;
            color: #3c3128;
        }

        .blog-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 16px;
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 14px;
        }

        .blog-card {
            grid-column: span 6;
            background: var(--blog-surface);
            border: 1px solid var(--blog-border);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 9px 24px rgba(29, 20, 12, 0.07);
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }

        .blog-media {
            position: relative;
            overflow: hidden;
            height: 235px;
            background: #ece2d2;
        }

        .blog-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .45s ease;
        }

        .blog-card:hover .blog-media img {
            transform: scale(1.06);
        }

        .blog-chip {
            position: absolute;
            left: 12px;
            top: 12px;
            background: rgba(33, 25, 18, 0.82);
            color: #fff;
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .blog-card-body {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
        }

        .blog-meta {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            font-size: 12px;
            color: #7a7066;
            text-transform: uppercase;
            letter-spacing: .07em;
            font-weight: 700;
        }

        .blog-title {
            margin: 0;
            font-size: clamp(20px, 2.1vw, 28px);
            line-height: 1.25;
            color: var(--blog-text);
            font-weight: 800;
        }

        .blog-desc {
            margin: 0;
            color: var(--blog-muted);
            font-size: 15px;
            line-height: 1.72;
        }

        .blog-card-footer {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .blog-aside {
            background: var(--blog-surface);
            border: 1px solid var(--blog-border);
            border-radius: 14px;
            padding: 16px;
            box-shadow: 0 9px 24px rgba(29, 20, 12, 0.07);
            height: fit-content;
            position: sticky;
            top: 110px;
        }

        .aside-title {
            margin: 0 0 10px;
            color: #2a2219;
            font-size: 22px;
            font-weight: 800;
        }

        .aside-list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 10px;
        }

        .aside-item {
            display: grid;
            grid-template-columns: 84px minmax(0, 1fr);
            gap: 10px;
            text-decoration: none;
            border: 1px solid var(--blog-border);
            border-radius: 10px;
            overflow: hidden;
            background: #fff;
        }

        .aside-item img {
            width: 100%;
            height: 100%;
            min-height: 74px;
            object-fit: cover;
        }

        .aside-item-body {
            padding: 8px 10px 8px 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 3px;
        }

        .aside-item-body strong {
            color: #2f261e;
            font-size: 14px;
            line-height: 1.35;
            font-weight: 700;
        }

        .aside-item-body span {
            color: #7c7166;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .06em;
            font-weight: 700;
        }

        .no-blogs {
            border: 1px dashed #d8c5ad;
            border-radius: 12px;
            padding: 28px;
            text-align: center;
            background: #fff;
            color: #6f665c;
            grid-column: 1 / -1;
        }

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

            .blog-aside {
                position: static;
                top: auto;
            }
        }

        @media (max-width: 991.98px) {
            .blog-page {
                padding-top: 84px;
                padding-bottom: 72px;
            }

            .blog-shell {
                width: min(1240px, calc(100% - 16px));
            }

            .blog-tools {
                grid-template-columns: 1fr 1fr;
            }

            .blog-tools .blog-btn {
                width: 100%;
            }
        }

        @media (max-width: 767.98px) {
            .blog-card {
                grid-column: span 12;
            }

            .blog-head,
            .blog-tools,
            .blog-card,
            .blog-aside,
            .aside-item {
                border-radius: 12px;
            }

            .blog-media {
                height: 220px;
            }

            .blog-tools {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 575.98px) {
            .blog-page {
                padding-top: 68px;
            }

            .blog-media {
                height: 205px;
            }

            .blog-btn {
                width: 100%;
            }
        }
    </style>
    <!-- Responsive Design System -->
    <link rel="stylesheet" href="assets/css/responsive-utilities.css">
    <link rel="stylesheet" href="assets/css/responsive-chat.css">
</head>
<body id="show-grid">
    <?php include 'header-php.php'; ?>

    <main class="blog-page">
        <div class="blog-shell">
            <section class="blog-head">
                <p>Insights And Stories</p>
                <h1>Interior Blog Journal</h1>
                <span>Discover practical design thinking, material decisions, and planning guides from our interior studio for modern homes and workspaces.</span>
            </section>

            <form class="blog-tools" method="GET" action="blog.php" aria-label="Blog filters">
                <input type="search" class="blog-input" name="search" placeholder="Search by title, author, category..." value="<?php echo htmlspecialchars($search); ?>">
                <select class="blog-select" name="category">
                    <option value="">All Categories</option>
                    <?php foreach ($categories as $category): ?>
                        <option value="<?php echo htmlspecialchars($category); ?>" <?php echo $categoryFilter === $category ? 'selected' : ''; ?>><?php echo htmlspecialchars($category); ?></option>
                    <?php endforeach; ?>
                </select>
                <div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button type="submit" class="blog-btn primary"><i class="fa-solid fa-magnifying-glass"></i> Filter</button>
                    <a href="blog.php" class="blog-btn light">Reset</a>
                </div>
            </form>

            <div class="blog-layout">
                <section class="blog-grid" aria-label="Blog listing">
                    <?php if (!empty($blogs)): ?>
                        <?php foreach ($blogs as $blog): ?>
                            <?php
                                $blogId = (int)($blog['id'] ?? 0);
                                $title = (string)($blog['title'] ?? 'Blog Post');
                                $category = (string)($blog['category'] ?? 'General');
                                $author = (string)($blog['author'] ?? 'Team Faren');
                                $image = (string)($blog['image_path'] ?? 'assets/img/blog/blog-grid-1-1.jpg');
                                $dateLabel = blogDateLabel($blog);
                                $desc = blogExcerpt($blog);
                            ?>
                            <article class="blog-card">
                                <a class="blog-media" href="blog-details.html?id=<?php echo $blogId; ?>">
                                    <img src="<?php echo htmlspecialchars($image); ?>" alt="<?php echo htmlspecialchars($title); ?>" loading="lazy">
                                    <span class="blog-chip"><?php echo htmlspecialchars($category); ?></span>
                                </a>
                                <div class="blog-card-body">
                                    <div class="blog-meta">
                                        <span><i class="fa-regular fa-user"></i> <?php echo htmlspecialchars($author); ?></span>
                                        <span><i class="fa-regular fa-calendar"></i> <?php echo htmlspecialchars($dateLabel); ?></span>
                                    </div>
                                    <h2 class="blog-title"><?php echo htmlspecialchars($title); ?></h2>
                                    <p class="blog-desc"><?php echo htmlspecialchars($desc); ?></p>
                                    <div class="blog-card-footer">
                                        <a class="blog-btn light" href="blog-details.html?id=<?php echo $blogId; ?>">Read Article</a>
                                        <span style="font-size:12px;color:#7c7166;font-weight:700;letter-spacing:.06em;text-transform:uppercase;">
                                            #<?php echo str_pad((string)$blogId, 2, '0', STR_PAD_LEFT); ?>
                                        </span>
                                    </div>
                                </div>
                            </article>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="no-blogs">
                            <h3 style="margin:0 0 8px; color:#2e241b; font-size:28px;">No Blog Posts Found</h3>
                            <p style="margin:0;">Try changing the search or category filter.</p>
                        </div>
                    <?php endif; ?>
                </section>

                <aside class="blog-aside" aria-label="Featured blogs">
                    <h3 class="aside-title">Featured</h3>
                    <ul class="aside-list">
                        <?php if (!empty($featuredBlogs)): ?>
                            <?php foreach ($featuredBlogs as $featured): ?>
                                <?php
                                    $featuredId = (int)($featured['id'] ?? 0);
                                    $featuredTitle = (string)($featured['title'] ?? 'Blog Post');
                                    $featuredImage = (string)($featured['image_path'] ?? 'assets/img/blog/blog-grid-1-1.jpg');
                                    $featuredDate = blogDateLabel($featured);
                                ?>
                                <li>
                                    <a class="aside-item" href="blog-details.html?id=<?php echo $featuredId; ?>">
                                        <img src="<?php echo htmlspecialchars($featuredImage); ?>" alt="<?php echo htmlspecialchars($featuredTitle); ?>" loading="lazy">
                                        <div class="aside-item-body">
                                            <strong><?php echo htmlspecialchars($featuredTitle); ?></strong>
                                            <span><?php echo htmlspecialchars($featuredDate); ?></span>
                                        </div>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <li style="color:#7c7166;">No featured blogs yet.</li>
                        <?php endif; ?>
                    </ul>

                    <div style="margin-top:14px; border:1px solid var(--blog-border); border-radius:10px; padding:12px; background:#fcf9f5;">
                        <p style="margin:0 0 8px; color:#3a3027; font-size:14px; font-weight:700;">Need help with your space?</p>
                        <a href="contact.php" class="blog-btn primary" style="width:100%;">Book Consultation</a>
                    </div>
                </aside>
            </div>
        </div>
    </main>

    <?php include 'footer-section.html'; ?>

    <div class="scroll-top">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewbox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
                style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 307.919;">
            </path>
        </svg>
    </div>

    <script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/circle-progress.js"></script>
    <script src="assets/js/jquery-ui.min.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/nice-select.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/threesixty.min.js"></script>
    <script src="assets/js/panolens.min.js"></script>
    <script src="assets/js/gsap.min.js"></script>
    <script src="assets/js/ScrollTrigger.min.js"></script>
    <script src="assets/js/SplitText.js"></script>
    <script src="assets/js/SplitType.js"></script>
    <script src="assets/js/lenis.min.js"></script>
    <script src="assets/js/CustomEase.min.js"></script>
    <script src="assets/js/main.js"></script>
    
    <!-- Chat Widget -->
    <?php include 'includes/chat-widget.html'; ?>
    
    <!-- Responsive Chat Script -->
    <script src="assets/js/responsive-chat-ai.js"></script>
</body>
</html>
