import re

def update_gallery():
    with open('index.html', 'r', encoding='utf-8') as f:
        content = f.read()
    
    # Extract gallery section
    gallery_pattern = re.compile(r'<!-- Gallery Grid Section -->.*?</section>\s*', re.DOTALL)
    gallery_match = gallery_pattern.search(content)
    
    if not gallery_match:
        print("Gallery section not found!")
        return

    # Remove the gallery section from its current place
    content = gallery_pattern.sub('', content)

    # Extract just the image divs from the original gallery HTML
    img_divs_pattern = re.compile(r'<div style="overflow: hidden; border-radius: 24px.*?</script>\s*</div>', re.DOTALL)
    # Wait, the img divs are simple
    img_divs = re.findall(r'<div style="overflow: hidden; border-radius: 24px;.*?</div>', gallery_match.group(0), re.DOTALL)
    
    if not img_divs:
        # Fallback if the regex missed something, let's just grab the images directly
        images = [
            "gallery_1_1785739465440.png",
            "gallery_2_1785739478020.png",
            "gallery_3_1785739488033.png",
            "gallery_4_1785739507745.png",
            "gallery_5_1785739518760.png",
            "gallery_6_1785739530049.png"
        ]
        img_html = ""
        for img in images:
            img_html += f"""
                    <div style="overflow: hidden; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.4s ease;">
                        <img src="assets/images/{img}" alt="Church Gallery Image" style="width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                    </div>
"""
    else:
        img_html = "\n".join(["                    " + div for div in img_divs])

    NEW_GALLERY = f"""
        <!-- 6. Gallery Section -->
        <section id="gallery-grid" style="padding: 6.5rem 0 7rem 0; background-color: #FFFFFF; box-sizing: border-box;">
            <div style="max-width: 1320px; margin: 0 auto; padding: 0 3rem;">
                
                <!-- Section Header -->
                <div style="text-align: center; max-width: 900px; margin: 0 auto 4rem auto;">
                    <div class="js-reveal-text" style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem;">
                        <span style="width: 6px; height: 6px; background-color: #4A2A18; border-radius: 50%; display: inline-block;"></span>
                        <span style="color: #4A2A18; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">IMAGE GALLERY</span>
                    </div>
                    <h2 class="js-reveal-text" style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.3rem, 3.8vw, 3.2rem) !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.01em; margin: 0; text-align: center;">
                        EXPLORE OUR BEAUTIFUL CHURCH
                    </h2>
                </div>

                <div class="gallery-grid-layout" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; margin-bottom: 4rem;">
{img_html}
                </div>
            </div>
        </section>
"""

    # Insert after blogs section
    # The blogs section ends with </section> followed by </main>
    # We will find the closing </section> of #blogs-section and append NEW_GALLERY before </main>
    content = re.sub(
        r'(<section id="blogs-section".*?</section>\s*)',
        r'\1' + NEW_GALLERY,
        content,
        flags=re.DOTALL
    )

    with open('index.html', 'w', encoding='utf-8') as f:
        f.write(content)

def modify_css():
    with open('css/styles.css', 'r', encoding='utf-8') as f:
        content = f.read()

    css_addition = """
@media (max-width: 991px) {
    .gallery-grid-layout {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 575px) {
    .gallery-grid-layout {
        grid-template-columns: 1fr !important;
    }
}
"""
    if ".gallery-grid-layout" not in content:
        with open('css/styles.css', 'a', encoding='utf-8') as f:
            f.write(css_addition)

update_gallery()
modify_css()
print("Done")