<section class="work-gallery-section">
    <h2 class="section-title">ผลงานการติดตั้งจริง (Q1 - Q13)</h2>
    <div class="gallery-grid" id="gallery-grid">
        <script>
            // ใช้ลูปสร้างภาพทั้ง 13 ภาพโดยอัตโนมัติ เพื่อความเรียบร้อย
            for (let i = 1; i <= 13; i++) {
                document.write(`
                    <a href="javascript:void(0)" class="gallery-item" onclick="openLightbox(this)">
                        <img src="/images/q/q-${i}.jpg" alt="Work Q${i}">
                    </a>
                `);
            }
        </script>
    </div>
</section>

<div id="lightbox" class="lightbox-overlay" onclick="closeLightbox()">
    <span class="close-btn">✕</span>
    <img id="lightbox-img" src="/" alt="Full view">
</div>

<style>
    .work-gallery-section { padding: 80px 5%; background: #ffffff; font-family: 'Prompt', sans-serif; }
    .section-title { text-align: center; margin-bottom: 50px; font-size: 32px; color: #333; }
    .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; max-width: 1200px; margin: 0 auto; }
    .gallery-item { display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 1/1; cursor: pointer; background-color: #f4f7f9; }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block; }
    .gallery-item:hover img { transform: scale(1.1); }

    /* Lightbox Styles */
    .lightbox-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 9999; align-items: center; justify-content: center; }
    .lightbox-overlay img { max-width: 90%; max-height: 90vh; border-radius: 10px; cursor: default; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
    .close-btn { position: absolute; top: 30px; right: 30px; color: white; font-size: 40px; cursor: pointer; font-weight: bold; }
</style>

<script>
    function openLightbox(element) {
        const imgSrc = element.querySelector('img').src;
        const lightbox = document.getElementById('lightbox');
        const lightboxImg = document.getElementById('lightbox-img');
        lightboxImg.src = imgSrc;
        lightbox.style.display = 'flex';
    }

    function closeLightbox() {
        document.getElementById('lightbox').style.display = 'none';
    }
</script>