<?php
session_start();
require_once __DIR__ . '/config/db.php';

$page_title = 'Projects - Faren Interior Design';
$user_name = isset($_SESSION['user_name']) ? htmlspecialchars($_SESSION['user_name']) : '';

$connection->query("
    CREATE TABLE IF NOT EXISTS projects (
        id INT AUTO_INCREMENT PRIMARY KEY,
        title VARCHAR(255) NOT NULL,
        category VARCHAR(100) NOT NULL DEFAULT 'Interior',
        location VARCHAR(120) NOT NULL DEFAULT '',
        project_year VARCHAR(10) NOT NULL DEFAULT '',
        image VARCHAR(500) NOT NULL DEFAULT '',
        description TEXT,
        sort_order INT NOT NULL DEFAULT 0,
        is_active TINYINT(1) NOT NULL DEFAULT 1,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        INDEX idx_sort_order (sort_order),
        INDEX idx_is_active (is_active)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
");

$projects = [];
$projectsResult = $connection->query("
    SELECT id, title, category, location, project_year, image, description
    FROM projects
    WHERE is_active = 1
    ORDER BY sort_order ASC, id DESC
");

if ($projectsResult) {
    while ($row = $projectsResult->fetch_assoc()) {
        $projects[] = [
            'id' => (int)($row['id'] ?? 0),
            'title' => (string)($row['title'] ?? 'Project'),
            'category' => (string)($row['category'] ?? 'Interior'),
            'location' => (string)($row['location'] ?? ''),
            'year' => (string)($row['project_year'] ?? ''),
            'image' => (string)($row['image'] ?? ''),
            'desc' => (string)($row['description'] ?? ''),
        ];
    }
}

if (empty($projects)) {
    $projects = [
    [
        'title' => 'Saffron Courtyard Residence',
        'category' => 'Residential',
        'location' => 'Bangalore',
        'year' => '2026',
        'image' => 'assets/img/project/project_1_1.jpg',
        'desc' => 'A warm, layered interior with crafted wood, natural light planning, and quiet luxury detailing.',
    ],
    [
        'title' => 'Vertex Executive Office',
        'category' => 'Commercial',
        'location' => 'Mumbai',
        'year' => '2025',
        'image' => 'assets/img/project/project_1_2.jpg',
        'desc' => 'High-efficiency workspace with acoustic zoning, hospitality-style lounge areas, and premium material palette.',
    ],
    [
        'title' => 'Nadi Wellness Studio',
        'category' => 'Hospitality',
        'location' => 'Pune',
        'year' => '2025',
        'image' => 'assets/img/project/project_1_3.jpg',
        'desc' => 'Biophilic interior direction that blends calm textures, tactile finishes, and ambient illumination.',
    ],
    [
        'title' => 'Amber Dining Pavilion',
        'category' => 'Restaurant',
        'location' => 'Hyderabad',
        'year' => '2024',
        'image' => 'assets/img/project/project_1_4.jpg',
        'desc' => 'A modern dining concept balancing intimate seating clusters with dramatic statement lighting.',
    ],
    [
        'title' => 'Nordic Family Living',
        'category' => 'Residential',
        'location' => 'Chennai',
        'year' => '2026',
        'image' => 'assets/img/project/project_2_1.jpg',
        'desc' => 'Clean-lined interiors with flexible family spaces, integrated storage, and muted Scandinavian tones.',
    ],
    [
        'title' => 'Harbor Retail Gallery',
        'category' => 'Retail',
        'location' => 'Ahmedabad',
        'year' => '2025',
        'image' => 'assets/img/project/project_2_2.jpg',
        'desc' => 'Retail environment designed for visual storytelling through layered displays and circulation rhythm.',
    ],
    [
        'title' => 'Summit Co-Working Hub',
        'category' => 'Commercial',
        'location' => 'Delhi NCR',
        'year' => '2024',
        'image' => 'assets/img/project/project_3_1.jpg',
        'desc' => 'Collaborative work destination with modular furniture planning and focused breakout ecosystems.',
    ],
    [
        'title' => 'Terra Boutique Stay',
        'category' => 'Hospitality',
        'location' => 'Goa',
        'year' => '2026',
        'image' => 'assets/img/project/project_4_1.jpg',
        'desc' => 'Boutique hospitality interior featuring earthy material language, custom joinery, and curated art.',
    ],
    ];
}

$categories = [];
$locations = [];
$years = [];

foreach ($projects as $project) {
    $categories[] = (string) $project['category'];
    $locations[] = (string) $project['location'];
    $years[] = (string) $project['year'];
}

$categories = array_values(array_unique($categories));
$locations = array_values(array_unique($locations));
$years = array_values(array_unique($years));
rsort($years);
?>
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Projects | Faren Interior Design</title>
    <meta name="author" content="themeholy">
    <meta name="description" content="Explore Faren Interior Design project portfolio across residential, commercial, and hospitality spaces.">
    <meta name="keywords" content="interior projects, architecture portfolio, residential interiors, commercial interiors">
    <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">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="assets/img/favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <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=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <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 {
            --proj-bg: #f3ece2;
            --proj-surface: #ffffff;
            --proj-ink: #1f1a14;
            --proj-muted: #6f675d;
            --proj-accent: #b78d5e;
            --proj-accent-dark: #8a6642;
            --proj-border: #eadfce;
        }

        .projects-page {
           
            padding:10px 10px 20px;
            background:
                radial-gradient(circle at 10% 8%, rgba(183, 141, 94, 0.16), transparent 35%),
                radial-gradient(circle at 90% 86%, rgba(138, 102, 66, 0.12), transparent 35%),
                linear-gradient(180deg, #f8f4ed 0%, var(--proj-bg) 100%);
            min-height: 100vh;
        }

        .projects-shell {
            width: auto;
            margin: 0 auto;
        }

        .projects-hero {
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 24px;
            background: linear-gradient(130deg, #1d1814 0%, #2d2219 50%, #4a3829 100%);
            color: #fff;
            padding: clamp(24px, 4vw, 44px);
            box-shadow: 0 22px 46px rgba(19, 13, 8, 0.22);
            margin-bottom: 20px;
        }

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

        .hero-title {
            margin: 0;
            max-width: 16ch;
            font-size: clamp(30px, 5.8vw, 62px);
            line-height: 1.04;
            font-weight: 800;
        }

        .hero-text {
            margin: 14px 0 0;
            max-width: 62ch;
            color: rgba(255, 255, 255, 0.86);
            font-size: clamp(14px, 2vw, 18px);
            line-height: 1.64;
        }

        .hero-metrics {
            margin-top: 18px;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .metric {
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.08);
            padding: 12px;
        }

        .metric strong {
            display: block;
            font-size: clamp(20px, 2.6vw, 30px);
            line-height: 1;
            color: #fff;
            margin-bottom: 4px;
        }

        .metric span {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.82);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 700;
        }

        .projects-toolbar {
            border: 1px solid var(--proj-border);
            border-radius: 16px;
            background: var(--proj-surface);
            padding: 14px;
            box-shadow: 0 12px 26px rgba(31, 23, 15, 0.08);
            margin-bottom: 18px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            justify-content: space-between;
        }

        .toolbar-left {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .toolbar-filters {
            display: grid;
            grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, 1fr));
            gap: 8px;
            width: 100%;
        }

        .filter-field {
            width: 100%;
            border: 1px solid #e6d8c6;
            border-radius: 10px;
            background: #fff;
            color: #3d3228;
            font-size: 13px;
            font-weight: 500;
            padding: 10px 12px;
            font-family: inherit;
            min-height: 42px;
        }

        .filter-field:focus {
            outline: none;
            border-color: var(--proj-accent);
            box-shadow: 0 0 0 3px rgba(183, 141, 94, 0.15);
        }

        .toolbar-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }

        .results-count {
            border: 1px solid #eadcc9;
            border-radius: 999px;
            background: #f9f2e8;
            color: #5d4a37;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .chip {
            border: 1px solid #eadcc9;
            border-radius: 999px;
            background: #f9f2e8;
            color: #5d4a37;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

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

        .project-card {
            grid-column: span 4;
            border: 1px solid var(--proj-border);
            border-radius: 16px;
            background: var(--proj-surface);
            overflow: hidden;
            box-shadow: 0 14px 28px rgba(31, 23, 15, 0.09);
            display: flex;
            flex-direction: column;
            transition: transform .22s ease, box-shadow .22s ease;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 34px rgba(31, 23, 15, 0.15);
        }

        .project-card.is-hidden {
            display: none;
        }

        .project-media {
            position: relative;
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: #eadfce;
        }

        .project-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease;
        }

        .project-card:hover .project-media img {
            transform: scale(1.05);
        }

        .project-body {
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-grow: 1;
        }

        .project-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .project-meta span {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            background: #f9f2e8;
            border: 1px solid #eadcc9;
            color: #5f4b37;
            padding: 5px 10px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .project-title {
            margin: 0;
            color: var(--proj-ink);
            font-size: clamp(19px, 2.2vw, 25px);
            line-height: 1.16;
            font-weight: 700;
        }

        .project-desc {
            margin: 0;
            color: var(--proj-muted);
            font-size: 14px;
            line-height: 1.6;
            flex-grow: 1;
        }

        .project-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 4px;
        }

        .proj-btn {
            border: 0;
            border-radius: 10px;
            text-decoration: none;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 10px 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .proj-btn.primary {
            background: linear-gradient(135deg, var(--proj-accent), var(--proj-accent-dark));
            color: #fff;
            box-shadow: 0 8px 16px rgba(183, 141, 94, 0.34);
        }

        .proj-btn.light {
            background: #ece2d4;
            color: #3d3228;
        }

        .projects-cta {
            margin-top: 20px;
            border: 1px solid var(--proj-border);
            border-radius: 16px;
            background: var(--proj-surface);
            box-shadow: 0 12px 24px rgba(31, 23, 15, 0.08);
            padding: clamp(16px, 3vw, 24px);
            display: flex;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            align-items: center;
        }

        .projects-cta h3 {
            margin: 0;
            color: var(--proj-ink);
            font-size: clamp(24px, 4vw, 34px);
            font-weight: 800;
            line-height: 1.1;
        }

        .projects-cta p {
            margin: 8px 0 0;
            color: var(--proj-muted);
            font-size: 14px;
            line-height: 1.6;
            max-width: 64ch;
        }

        .no-results {
            display: none;
            border: 1px dashed #d9c5ad;
            border-radius: 14px;
            background: #fff;
            padding: 28px 18px;
            text-align: center;
            color: var(--proj-muted);
            margin-top: 12px;
        }

        .no-results.show {
            display: block;
        }

        @media (max-width: 1199.98px) {
            .project-card {
                grid-column: span 6;
            }
        }

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

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

            .hero-metrics {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .toolbar-filters {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

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

            .hero-metrics {
                grid-template-columns: 1fr;
            }

            .projects-hero,
            .projects-toolbar,
            .project-card,
            .projects-cta {
                border-radius: 12px;
            }

            .toolbar-filters {
                grid-template-columns: 1fr;
            }
        }

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

            .proj-btn {
                width: 100%;
            }

            .results-count {
                width: 100%;
                text-align: center;
            }
        }
    </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="projects-page">
        <div class="projects-shell">
            <section class="projects-toolbar" aria-label="Project categories">
                <div class="toolbar-left">
                    <span class="chip">All</span>
                    <span class="chip">Residential</span>
                    <span class="chip">Commercial</span>
                    <span class="chip">Hospitality</span>
                    <span class="chip">Retail</span>
                </div>
                <div class="toolbar-filters">
                    <input type="search" class="filter-field" id="projectSearchInput" placeholder="Search by project name or description">
                    <select class="filter-field" id="projectCategoryFilter">
                        <option value="">All Categories</option>
                        <?php foreach ($categories as $category): ?>
                            <option value="<?php echo htmlspecialchars($category); ?>"><?php echo htmlspecialchars($category); ?></option>
                        <?php endforeach; ?>
                    </select>
                    <select class="filter-field" id="projectLocationFilter">
                        <option value="">All Locations</option>
                        <?php foreach ($locations as $location): ?>
                            <option value="<?php echo htmlspecialchars($location); ?>"><?php echo htmlspecialchars($location); ?></option>
                        <?php endforeach; ?>
                    </select>
                    <select class="filter-field" id="projectYearFilter">
                        <option value="">All Years</option>
                        <?php foreach ($years as $year): ?>
                            <option value="<?php echo htmlspecialchars($year); ?>"><?php echo htmlspecialchars($year); ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="toolbar-actions">
                    <button type="button" class="proj-btn light" id="resetProjectFilters">Reset Filters</button>
                    <div class="results-count" id="projectResultsCount"><?php echo count($projects); ?> Projects</div>
                </div>
            </section>

            <section class="projects-grid" id="projectsGrid" aria-label="Project listing">
                <?php foreach ($projects as $index => $project): ?>
                    <?php $projectId = (int)($project['id'] ?? ($index + 1)); ?>
                    <article
                        class="project-card"
                        data-title="<?php echo htmlspecialchars(strtolower((string) $project['title'])); ?>"
                        data-category="<?php echo htmlspecialchars(strtolower((string) $project['category'])); ?>"
                        data-location="<?php echo htmlspecialchars(strtolower((string) $project['location'])); ?>"
                        data-year="<?php echo htmlspecialchars((string) $project['year']); ?>"
                        data-desc="<?php echo htmlspecialchars(strtolower((string) $project['desc'])); ?>">
                        <div class="project-media">
                            <img src="<?php echo htmlspecialchars($project['image']); ?>" alt="<?php echo htmlspecialchars($project['title']); ?>" loading="lazy">
                        </div>
                        <div class="project-body">
                            <div class="project-meta">
                                <span><?php echo htmlspecialchars($project['category']); ?></span>
                                <span><?php echo htmlspecialchars($project['location']); ?></span>
                                <span><?php echo htmlspecialchars($project['year']); ?></span>
                            </div>
                            <h2 class="project-title"><?php echo htmlspecialchars($project['title']); ?></h2>
                            <p class="project-desc"><?php echo htmlspecialchars($project['desc']); ?></p>
                            <div class="project-actions">
                                <a class="proj-btn primary" href="project-details.php?id=<?php echo $projectId; ?>"><i class="fa-solid fa-arrow-right"></i> View Project</a>
                                <a class="proj-btn light" href="contact.php">Start Similar</a>
                            </div>
                        </div>
                    </article>
                <?php endforeach; ?>
            </section>
            <div class="no-results" id="projectNoResults">
                <h3 style="margin:0 0 8px; color:#2f251c; font-size:26px;">No Projects Found</h3>
                <p style="margin:0;">Try another search keyword or clear one or more filters.</p>
            </div>

            <section class="projects-cta">
                <div>
                    <h3>Ready To Build Your Space?</h3>
                    <p>Share your brief and our interior team will prepare a tailored design direction, timeline plan, and budget-fit proposal.</p>
                </div>
                <a class="proj-btn primary" href="contact.php"><i class="fa-solid fa-calendar-check"></i> Book Consultation</a>
            </section>
        </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>
    <script>
        (function () {
            var searchInput = document.getElementById('projectSearchInput');
            var categoryFilter = document.getElementById('projectCategoryFilter');
            var locationFilter = document.getElementById('projectLocationFilter');
            var yearFilter = document.getElementById('projectYearFilter');
            var resetBtn = document.getElementById('resetProjectFilters');
            var resultsCount = document.getElementById('projectResultsCount');
            var noResults = document.getElementById('projectNoResults');
            var cards = Array.prototype.slice.call(document.querySelectorAll('.project-card'));

            function normalize(value) {
                return String(value || '').toLowerCase().trim();
            }

            function applyFilters() {
                var searchValue = normalize(searchInput && searchInput.value);
                var categoryValue = normalize(categoryFilter && categoryFilter.value);
                var locationValue = normalize(locationFilter && locationFilter.value);
                var yearValue = normalize(yearFilter && yearFilter.value);
                var visibleCount = 0;

                cards.forEach(function (card) {
                    var title = normalize(card.getAttribute('data-title'));
                    var desc = normalize(card.getAttribute('data-desc'));
                    var category = normalize(card.getAttribute('data-category'));
                    var location = normalize(card.getAttribute('data-location'));
                    var year = normalize(card.getAttribute('data-year'));

                    var matchesSearch = !searchValue || title.indexOf(searchValue) !== -1 || desc.indexOf(searchValue) !== -1;
                    var matchesCategory = !categoryValue || category === categoryValue;
                    var matchesLocation = !locationValue || location === locationValue;
                    var matchesYear = !yearValue || year === yearValue;
                    var isVisible = matchesSearch && matchesCategory && matchesLocation && matchesYear;

                    card.classList.toggle('is-hidden', !isVisible);
                    if (isVisible) visibleCount += 1;
                });

                if (resultsCount) {
                    resultsCount.textContent = visibleCount + (visibleCount === 1 ? ' Project' : ' Projects');
                }

                if (noResults) {
                    noResults.classList.toggle('show', visibleCount === 0);
                }
            }

            [searchInput, categoryFilter, locationFilter, yearFilter].forEach(function (el) {
                if (el) {
                    el.addEventListener('input', applyFilters);
                    el.addEventListener('change', applyFilters);
                }
            });

            if (resetBtn) {
                resetBtn.addEventListener('click', function () {
                    if (searchInput) searchInput.value = '';
                    if (categoryFilter) categoryFilter.value = '';
                    if (locationFilter) locationFilter.value = '';
                    if (yearFilter) yearFilter.value = '';
                    applyFilters();
                });
            }

            applyFilters();
        })();
    </script>

    <!-- Chat Widget -->
    <?php include 'includes/chat-widget.html'; ?>
    
    <!-- Responsive Chat Script -->
    <script src="assets/js/responsive-chat-ai.js"></script>
</body>
</html>
