<?php
session_start();
require_once 'config/db.php';
$settings = getAllSettings($pdo);
$activePage = 'home';
$pageTitle = ($settings['site_name']??'Kursi Jok').' - '.($settings['site_tagline']??'');

// Fetch data
$sliders = $pdo->query("SELECT * FROM sliders WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll();
$news = $pdo->query("SELECT * FROM news WHERE is_active=1 ORDER BY created_at DESC LIMIT 6")->fetchAll();
$photos = $pdo->query("SELECT p.*, a.title AS album_title FROM gallery_photos p JOIN gallery_albums a ON a.id=p.album_id WHERE a.is_active=1 ORDER BY p.sort_order ASC LIMIT 6")->fetchAll();
$customers = $pdo->query("SELECT * FROM customers WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll();
$projects = $pdo->query("SELECT * FROM our_projects WHERE is_active=1 ORDER BY sort_order ASC LIMIT 4")->fetchAll();

include 'partials/header.php';
?>

<!-- ======================== HERO SLIDER ======================== -->
<section class="hero-slider">
    <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
        <?php if (!empty($sliders)): ?>
        <div class="carousel-indicators">
            <?php foreach ($sliders as $i => $slide): ?>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="<?= $i ?>" <?= $i===0?'class="active"':'' ?>></button>
            <?php endforeach; ?>
        </div>
        <div class="carousel-inner">
            <?php foreach ($sliders as $i => $slide): ?>
            <div class="carousel-item <?= $i===0?'active':'' ?>">
                <img src="<?= htmlspecialchars($slide['image']) ?>" alt="<?= htmlspecialchars($slide['title']) ?>"
                     onerror="this.src='https://placehold.co/1600x580/1a1a2e/fff?text=Slide+<?= $i+1 ?>'">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="section-label text-white mb-2" style="opacity:.8;">Premium Upholstery Solutions</div>
                        <h1 class="slide-title"><?= htmlspecialchars($slide['title']) ?></h1>
                        <p class="slide-subtitle"><?= htmlspecialchars($slide['subtitle']??'') ?></p>
                        <?php if ($slide['button_text']): ?>
                            <a href="<?= htmlspecialchars($slide['button_link']??'#') ?>" class="btn-slide"><?= htmlspecialchars($slide['button_text']) ?></a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
        <?php else: ?>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://placehold.co/1600x580/1a1a2e/fff?text=Premium+Upholstery+Solutions" alt="Hero">
                <div class="carousel-caption">
                    <div class="container">
                        <h1 class="slide-title">Premium Automotive & Interior Upholstery</h1>
                        <p class="slide-subtitle">Solusi terbaik untuk material kulit jok berkualitas tinggi di Indonesia</p>
                        <a href="product.php" class="btn-slide" data-en="Explore Products" data-id="Lihat Produk">Lihat Produk</a>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- ======================== STATS ======================== -->
<section class="py-5 bg-dark stats-section">
    <div class="container">
        <div class="row g-0">
            <div class="col-6 col-md-3 stat-item border-end border-secondary">
                <div class="stat-number"><span data-target="20">0</span>+</div>
                <div class="stat-label text-secondary" data-en="Years Experience" data-id="Tahun Pengalaman">Tahun Pengalaman</div>
            </div>
            <div class="col-6 col-md-3 stat-item border-end border-secondary">
                <div class="stat-number"><span data-target="5000">0</span>+</div>
                <div class="stat-label text-secondary" data-en="Projects Completed" data-id="Proyek Selesai">Proyek Selesai</div>
            </div>
            <div class="col-6 col-md-3 stat-item border-end border-secondary">
                <div class="stat-number"><span data-target="500">0</span>+</div>
                <div class="stat-label text-secondary" data-en="Happy Clients" data-id="Klien Puas">Klien Puas</div>
            </div>
            <div class="col-6 col-md-3 stat-item">
                <div class="stat-number"><span data-target="50">0</span>+</div>
                <div class="stat-label text-secondary" data-en="Product Variants" data-id="Varian Produk">Varian Produk</div>
            </div>
        </div>
    </div>
</section>

<!-- ======================== ABOUT BRIEF ======================== -->
<section class="py-5 py-lg-6">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6 fade-up">
                <div class="section-label" data-en="About Us" data-id="Tentang Kami">About Us</div>
                <h2 class="section-title" data-en="Leading Upholstery Material Provider" data-id="Penyedia Material Upholstery Terkemuka">Penyedia Material Upholstery Terkemuka</h2>
                <div class="section-divider"></div>
                <p class="mt-3 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                <p class="text-muted">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <div class="row g-3 mt-2">
                    <div class="col-sm-6">
                        <div class="about-feature">
                            <div class="feature-icon"><i class="bi bi-shield-check"></i></div>
                            <h6 class="fw-bold" data-en="Premium Quality" data-id="Kualitas Premium">Kualitas Premium</h6>
                            <p class="small text-muted mb-0">Material pilihan dengan standar internasional</p>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="about-feature">
                            <div class="feature-icon"><i class="bi bi-award"></i></div>
                            <h6 class="fw-bold" data-en="ISO Certified" data-id="Tersertifikasi ISO">Tersertifikasi ISO</h6>
                            <p class="small text-muted mb-0">ISO 9001:2015 terdaftar dan tersertifikasi</p>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="about-feature">
                            <div class="feature-icon"><i class="bi bi-truck"></i></div>
                            <h6 class="fw-bold" data-en="Fast Delivery" data-id="Pengiriman Cepat">Pengiriman Cepat</h6>
                            <p class="small text-muted mb-0">Pengiriman ke seluruh wilayah Indonesia</p>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="about-feature">
                            <div class="feature-icon"><i class="bi bi-headset"></i></div>
                            <h6 class="fw-bold" data-en="24/7 Support" data-id="Dukungan 24/7">Dukungan 24/7</h6>
                            <p class="small text-muted mb-0">Tim profesional siap membantu Anda</p>
                        </div>
                    </div>
                </div>
                <a href="about.php" class="btn btn-dark mt-4 px-4" data-en="Read More" data-id="Selengkapnya">Selengkapnya</a>
            </div>
            <div class="col-lg-6 fade-up">
                <div class="row g-3">
                    <div class="col-7">
                        <img src="https://placehold.co/400x500/f0f0f0/999?text=About+Us" class="img-fluid rounded-3" alt="About Us">
                    </div>
                    <div class="col-5 d-flex flex-column gap-3 pt-4">
                        <img src="https://placehold.co/250x240/e8e8e8/999?text=Quality" class="img-fluid rounded-3" alt="Quality">
                        <img src="https://placehold.co/250x240/f5f5f5/999?text=Crafting" class="img-fluid rounded-3" alt="Crafting">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ======================== PRODUCT CATEGORIES ======================== -->
<section class="py-5 bg-section">
    <div class="container">
        <div class="section-header text-center fade-up">
            <div class="section-label" data-en="Our Products" data-id="Produk Kami">Our Products</div>
            <h2 class="section-title" data-en="Complete Upholstery Solutions" data-id="Solusi Upholstery Lengkap">Solusi Upholstery Lengkap</h2>
            <p class="section-subtitle" data-en="We provide premium upholstery materials for automotive, interior, and marine applications" data-id="Kami menyediakan material upholstery premium untuk otomotif, interior, dan marine">Kami menyediakan material upholstery premium untuk otomotif, interior, dan marine</p>
            <div class="section-divider mx-auto"></div>
        </div>
        <div class="row g-4">
            <div class="col-md-4 fade-up">
                <a href="product.php?cat=automotive" class="text-decoration-none">
                    <div class="card-modern">
                        <div class="card-img-wrap">
                            <img src="https://placehold.co/600x350/e0e0e0/666?text=Automotive" class="card-img" alt="Automotive">
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div style="width:36px;height:36px;background:#fff3dc;border-radius:8px;display:flex;align-items:center;justify-content:center;"><i class="bi bi-car-front" style="color:var(--accent)"></i></div>
                                <h5 class="fw-bold mb-0" data-en="Automotive" data-id="Otomotif">Automotive</h5>
                            </div>
                            <p class="text-muted small mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
                            <span class="text-accent fw-semibold small" data-en="View Products →" data-id="Lihat Produk →">Lihat Produk →</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 fade-up">
                <a href="product.php?cat=interior" class="text-decoration-none">
                    <div class="card-modern">
                        <div class="card-img-wrap">
                            <img src="https://placehold.co/600x350/e8e8e8/666?text=Interior" class="card-img" alt="Interior">
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div style="width:36px;height:36px;background:#fff3dc;border-radius:8px;display:flex;align-items:center;justify-content:center;"><i class="bi bi-house" style="color:var(--accent)"></i></div>
                                <h5 class="fw-bold mb-0" data-en="Interior" data-id="Interior">Interior</h5>
                            </div>
                            <p class="text-muted small mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
                            <span class="text-accent fw-semibold small" data-en="View Products →" data-id="Lihat Produk →">Lihat Produk →</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 fade-up">
                <a href="product.php?cat=marine" class="text-decoration-none">
                    <div class="card-modern">
                        <div class="card-img-wrap">
                            <img src="https://placehold.co/600x350/d8e8f0/555?text=Marine" class="card-img" alt="Marine">
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div style="width:36px;height:36px;background:#fff3dc;border-radius:8px;display:flex;align-items:center;justify-content:center;"><i class="bi bi-water" style="color:var(--accent)"></i></div>
                                <h5 class="fw-bold mb-0" data-en="Marine" data-id="Marine">Marine</h5>
                            </div>
                            <p class="text-muted small mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
                            <span class="text-accent fw-semibold small" data-en="View Products →" data-id="Lihat Produk →">Lihat Produk →</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ======================== OUR PROJECTS ======================== -->
<?php if (!empty($projects)): ?>
<section class="py-5 py-lg-6">
    <div class="container">
        <div class="section-header d-flex justify-content-between align-items-end fade-up">
            <div>
                <div class="section-label" data-en="Portfolio" data-id="Portofolio">Portfolio</div>
                <h2 class="section-title" data-en="Our Projects" data-id="Proyek Kami">Proyek Kami</h2>
                <div class="section-divider"></div>
            </div>
            <a href="our-project.php" class="btn btn-outline-dark d-none d-md-inline-flex align-items-center gap-2" data-en="View All" data-id="Lihat Semua">Lihat Semua <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="row g-4">
            <?php foreach ($projects as $proj): ?>
            <div class="col-md-6 col-lg-3 fade-up">
                <div class="project-card" style="cursor:pointer"
                     onclick='openProjectModal(<?= htmlspecialchars(json_encode([
                         "name"          => $proj["name"],
                         "category"      => $proj["category"],
                         "year"          => $proj["year"],
                         "location"      => $proj["location"] ?? "-",
                         "project_value" => $proj["project_value"] ?? "-",
                         "description"   => $proj["description"] ?? "",
                         "image"         => $proj["image"] ?? "",
                     ]), ENT_QUOTES) ?>)'>
                    <div class="proj-img-wrap">
                        <img src="<?= htmlspecialchars($proj['image']) ?>" class="proj-img" alt="<?= htmlspecialchars($proj['name']) ?>"
                             onerror="this.src='https://placehold.co/400x240/e0e0e0/666?text=Project'">
                        <div class="proj-img-overlay"><i class="bi bi-eye-fill fs-4"></i></div>
                    </div>
                    <div class="project-body">
                        <div class="proj-cat"><?= htmlspecialchars($proj['category']) ?> · <?= $proj['year'] ?></div>
                        <div class="proj-title"><?= htmlspecialchars($proj['name']) ?></div>
                        <div class="proj-meta"><i class="bi bi-geo-alt me-1"></i><?= htmlspecialchars($proj['location']??'-') ?></div>
                        <div class="proj-value mt-2"><i class="bi bi-currency-exchange me-1"></i><?= htmlspecialchars($proj['project_value']??'-') ?></div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <div class="text-center mt-4 d-md-none">
            <a href="our-project.php" class="btn btn-outline-dark" data-en="View All Projects" data-id="Lihat Semua Proyek">Lihat Semua Proyek</a>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ======================== NEWS ======================== -->
<?php if (!empty($news)): ?>
<section class="py-5 bg-section">
    <div class="container">
        <div class="section-header d-flex justify-content-between align-items-end fade-up">
            <div>
                <div class="section-label" data-en="Latest Updates" data-id="Terbaru">Terbaru</div>
                <h2 class="section-title" data-en="News & Activities" data-id="Berita & Kegiatan">Berita & Kegiatan</h2>
                <div class="section-divider"></div>
            </div>
            <a href="news.php" class="btn btn-outline-dark d-none d-md-inline-flex align-items-center gap-2" data-en="All News" data-id="Semua Berita">Semua Berita <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="row g-4">
            <?php foreach ($news as $n): ?>
            <div class="col-md-6 col-lg-4 fade-up">
                <a href="news-detail.php?slug=<?= urlencode($n['slug']) ?>" class="text-decoration-none">
                    <div class="news-card">
                        <div class="news-img-wrap">
                            <img src="<?= htmlspecialchars($n['image']) ?>" class="news-img" alt="<?= htmlspecialchars($n['title']) ?>"
                                 onerror="this.src='https://placehold.co/600x200/e8e8e8/888?text=News'">
                        </div>
                        <div class="p-4">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <span class="news-category"><?= $n['category'] === 'event' ? 'Event' : 'Berita' ?></span>
                                <span class="news-date"><?= date('d M Y', strtotime($n['created_at'])) ?></span>
                            </div>
                            <h6 class="news-title"><?= htmlspecialchars($n['title']) ?></h6>
                            <p class="news-excerpt"><?= htmlspecialchars(substr($n['excerpt']??'',0,100)).'...' ?></p>
                            <span class="text-accent small fw-semibold" data-en="Read More →" data-id="Baca Selengkapnya →">Baca Selengkapnya →</span>
                        </div>
                    </div>
                </a>
            </div>
            <?php endforeach; ?>
        </div>
        <div class="text-center mt-4 d-md-none">
            <a href="news.php" class="btn btn-outline-dark" data-en="All News" data-id="Semua Berita">Semua Berita</a>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ======================== GALLERY PREVIEW ======================== -->
<?php if (!empty($photos)): ?>
<section class="py-5 py-lg-6">
    <div class="container">
        <div class="section-header d-flex justify-content-between align-items-end fade-up">
            <div>
                <div class="section-label" data-en="Gallery" data-id="Galeri">Gallery</div>
                <h2 class="section-title" data-en="Photo Gallery" data-id="Galeri Foto">Galeri Foto</h2>
                <div class="section-divider"></div>
            </div>
            <a href="gallery.php" class="btn btn-outline-dark d-none d-md-inline-flex align-items-center gap-2" data-en="View All" data-id="Lihat Semua">Lihat Semua <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="gallery-grid">
            <?php foreach ($photos as $photo): ?>
            <div class="gallery-item fade-up" onclick="openLightbox('<?= htmlspecialchars($photo['image_path']) ?>','<?= htmlspecialchars(addslashes($photo['title'] ?: $photo['album_title'])) ?>')">
                <img src="<?= htmlspecialchars($photo['image_path']) ?>" alt="<?= htmlspecialchars($photo['title'] ?: $photo['album_title']) ?>"
                     onerror="this.src='https://placehold.co/400x300/e0e0e0/888?text=Photo'">
                <div class="overlay">
                    <div class="overlay-content">
                        <i class="bi bi-zoom-in text-white fs-3 mb-1 d-block"></i>
                        <div class="overlay-title"><?= htmlspecialchars($photo['title'] ?: $photo['album_title']) ?></div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ======================== OUR CUSTOMERS ======================== -->
<?php if (!empty($customers)): ?>
<section class="py-5 bg-section">
    <div class="container">
        <div class="section-header text-center fade-up">
            <div class="section-label" data-en="Trusted By" data-id="Dipercaya Oleh">Dipercaya Oleh</div>
            <h2 class="section-title" data-en="Our Clients" data-id="Klien Kami">Klien Kami</h2>
            <div class="section-divider mx-auto"></div>
        </div>
        <div class="customers-track mt-4">
            <div class="customers-inner">
                <?php foreach ($customers as $c): ?>
                    <img src="<?= htmlspecialchars($c['logo']) ?>" alt="<?= htmlspecialchars($c['name']) ?>" class="customer-logo"
                         onerror="this.src='https://placehold.co/120x48/f0f0f0/aaa?text=<?= urlencode($c['name']) ?>'">
                <?php endforeach; ?>
                <?php foreach ($customers as $c): ?>
                    <img src="<?= htmlspecialchars($c['logo']) ?>" alt="<?= htmlspecialchars($c['name']) ?>" class="customer-logo"
                         onerror="this.src='https://placehold.co/120x48/f0f0f0/aaa?text=<?= urlencode($c['name']) ?>'">
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ======================== CTA ======================== -->
<section class="py-5" style="background:#1a1a2e;">
    <div class="container text-center text-white">
        <h2 class="fw-bold mb-3" data-en="Ready to Transform Your Space?" data-id="Siap Mentransformasi Ruangan Anda?">Siap Mentransformasi Ruangan Anda?</h2>
        <p class="text-secondary mb-4 mx-auto" style="max-width:500px;" data-en="Contact our team for consultation and get the best offer for premium upholstery materials." data-id="Hubungi tim kami untuk konsultasi dan dapatkan penawaran terbaik material upholstery premium.">Hubungi tim kami untuk konsultasi dan dapatkan penawaran terbaik material upholstery premium.</p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            <a href="contact.php" class="btn px-4 py-2" style="background:var(--accent);color:#fff;border-radius:7px;font-weight:600;" data-en="Contact Us" data-id="Hubungi Kami">Hubungi Kami</a>
            <a href="catalog.php" class="btn btn-outline-light px-4 py-2" style="border-radius:7px;font-weight:600;" data-en="Download Catalog" data-id="Unduh Katalog">Unduh Katalog</a>
        </div>
    </div>
</section>

<!-- Lightbox Modal -->
<div class="modal fade" id="lightboxModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 bg-transparent">
            <div class="modal-body p-0 position-relative">
                <button type="button" class="btn-close position-absolute top-0 end-0 m-2 bg-white" data-bs-dismiss="modal" style="z-index:10;border-radius:50%;"></button>
                <img id="lightboxImg" src="" alt="" class="img-fluid rounded-3 w-100">
                <div class="bg-dark text-white p-3 rounded-bottom-3"><p id="lightboxTitle" class="mb-0 fw-semibold"></p></div>
            </div>
        </div>
    </div>
</div>

<!-- Project Detail Modal -->
<div class="modal fade" id="projectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 overflow-hidden rounded-4">
            <div class="position-absolute top-0 end-0 p-3" style="z-index:10">
                <button type="button" class="btn btn-light btn-sm rounded-circle shadow d-flex align-items-center justify-content-center" data-bs-dismiss="modal" style="width:36px;height:36px;opacity:.9;">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div id="pmImgWrap" style="background:#111;max-height:300px;overflow:hidden;">
                <img id="pmImg" src="" alt="" class="w-100" style="height:300px;object-fit:cover;opacity:.92;"
                     onerror="this.src='https://placehold.co/800x300/e0e0e0/888?text=Project'">
            </div>
            <div class="modal-body p-4">
                <div class="d-flex flex-wrap gap-2 align-items-center mb-2">
                    <span class="proj-cat" id="pmCat"></span>
                    <span class="badge bg-light text-muted border" id="pmYear"></span>
                </div>
                <h4 class="fw-bold mb-3" id="pmName"></h4>
                <p class="text-muted" id="pmDesc" style="line-height:1.7"></p>
                <div class="row g-3 mt-1">
                    <div class="col-sm-6">
                        <div class="d-flex align-items-center gap-2 p-3 rounded-3" style="background:#f8f9fa">
                            <i class="bi bi-geo-alt-fill fs-5" style="color:var(--accent)"></i>
                            <div>
                                <div class="small text-muted">Lokasi</div>
                                <div class="fw-semibold" id="pmLocation"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="d-flex align-items-center gap-2 p-3 rounded-3" style="background:#f8f9fa">
                            <i class="bi bi-currency-exchange fs-5" style="color:var(--accent)"></i>
                            <div>
                                <div class="small text-muted">Nilai Proyek</div>
                                <div class="fw-semibold" id="pmValue"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.proj-img-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:.3s; }
.project-card:hover .proj-img-overlay { background:rgba(0,0,0,.45); opacity:1; }
</style>

<script>
function openProjectModal(data) {
    document.getElementById('pmImg').src              = data.image || '';
    document.getElementById('pmName').textContent     = data.name;
    document.getElementById('pmCat').textContent      = data.category;
    document.getElementById('pmYear').textContent     = data.year;
    document.getElementById('pmLocation').textContent = data.location;
    document.getElementById('pmValue').textContent    = data.project_value;
    document.getElementById('pmDesc').textContent     = data.description;
    new bootstrap.Modal(document.getElementById('projectModal')).show();
}
</script>

<?php include 'partials/footer.php'; ?>
