import os
import re

def build_blogs_html():
    # Read news.html as base layout
    with open('news.html', 'r', encoding='utf-8') as f:
        content = f.read()

    # 1. Update Title & Meta
    content = content.replace('<title>News & Events | Franciscan Society TOR - Ranchi Province</title>',
                              '<title>Blogs & Reflections | Franciscan Society TOR - Ranchi Province</title>')
    content = content.replace('content="News & Updates"', 'content="Blogs & Reflections"')
    content = content.replace('content="Stay informed with the latest from our Franciscan community"',
                              'content="Read inspiring reflections, spiritual insights, and stories from our Franciscan community"')
    content = content.replace('https://franciscansociety.org/news.html', 'https://franciscansociety.org/blogs.html')
    content = content.replace('content="Franciscan news, community updates, spiritual insights, announcements"',
                              'content="Franciscan blogs, reflections, spiritual insights, prayer, community life"')
    content = content.replace('content="Latest news and updates from the Franciscan Society including community announcements, spiritual insights, and ministry highlights."',
                              'content="Read spiritual reflections, theological insights, and community blogs from the Franciscan Friars TOR Ranchi."')

    # 2. Hero Section
    old_hero = """    <section style="padding: 12rem 2rem 8rem 2rem; background-image: url('assets/images/new_uploads/ChatGPT_Image_Aug_18_2026_05_51_30_PM.png'); background-size: cover; background-position: center; position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; background-color: rgba(12, 11, 10, 0.7);"></div>
    <div style="max-width: 800px; margin: 0 auto; position: relative; z-index: 2; text-align: center;">
        <div style="display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 0.5rem 1rem; border-radius: 50px; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,0.2);">
            <span style="width: 8px; height: 8px; background-color: #c8102e; border-radius: 50%; display: inline-block;"></span>
            <span style="color: #ffffff; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Instrument Sans', sans-serif;">STAY UPDATED</span>
        </div>
        <h1 style="font-family: 'Phudu', sans-serif; font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 700; color: #ffffff; text-transform: uppercase; margin: 0;">NEWS & EVENTS</h1>
    </div>
</section>"""

    new_hero = """    <section style="padding: 12rem 2rem 8rem 2rem; background-image: url('assets/images/new_uploads/ChatGPT_Image_Aug_18_2026_05_51_30_PM.png'); background-size: cover; background-position: center; position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; background-color: rgba(12, 11, 10, 0.7);"></div>
    <div style="max-width: 800px; margin: 0 auto; position: relative; z-index: 2; text-align: center;">
        <div style="display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 0.5rem 1rem; border-radius: 50px; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,0.2);">
            <span style="width: 8px; height: 8px; background-color: #e6c888; border-radius: 50%; display: inline-block;"></span>
            <span style="color: #ffffff; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Instrument Sans', sans-serif;">OUR REFLECTIONS</span>
        </div>
        <h1 style="font-family: 'Phudu', sans-serif; font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 700; color: #ffffff; text-transform: uppercase; margin: 0;">BLOGS</h1>
    </div>
</section>"""

    content = content.replace(old_hero, new_hero)

    # 3. Replace the 6 Grid items with the 6 actual Blogs
    blogs_grid = """    <!-- Blogs Grid -->
    <section style="padding: clamp(2rem, 4vw, 3.5rem) 2rem; background-color: #FFFFFF; max-width: 1320px; margin: 0 auto;">
        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.5rem;">

            <!-- Blog Item 1 -->
            <article style="display: flex; flex-direction: column;">
                <div style="border-radius: 20px; overflow: hidden; height: 280px; margin-bottom: 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                    <img loading="lazy" decoding="async" src="assets/images/news-blog/WhatsApp Image 2025-09-10 at 4.28.51 AM.jpeg" alt="Exploring The Franciscan Way" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <span style="font-family: 'Instrument Sans', sans-serif; font-size: 0.8rem; color: #4A2A18; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8rem;">SPIRITUALITY</span>
                <h3 style="font-family: 'Phudu', sans-serif; font-size: 1.15rem; font-weight: 600; color: #1c1917; text-transform: uppercase; line-height: 1.35; margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1rem;">
                    EXPLORING THE FRANCISCAN WAY
                </h3>
                <p style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; color: #57534e; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                    An inspiring reflection on exploring the Franciscan way, embracing simplicity, and living the Gospel.
                </p>
                <a href="blogs-detail-1.html" style="font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.88rem; color: #1c1917; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;">
                    <span>READ MORE</span> <span><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span>
                </a>
            </article>

            <!-- Blog Item 2 -->
            <article style="display: flex; flex-direction: column;">
                <div style="border-radius: 20px; overflow: hidden; height: 280px; margin-bottom: 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                    <img loading="lazy" decoding="async" src="assets/images/news-blog/WhatsApp Image 2025-09-10 at 4.28.52 AM.jpeg" alt="Finding Peace In Daily Life" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <span style="font-family: 'Instrument Sans', sans-serif; font-size: 0.8rem; color: #4A2A18; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8rem;">INNER PEACE</span>
                <h3 style="font-family: 'Phudu', sans-serif; font-size: 1.15rem; font-weight: 600; color: #1c1917; text-transform: uppercase; line-height: 1.35; margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1rem;">
                    FINDING PEACE IN DAILY LIFE
                </h3>
                <p style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; color: #57534e; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                    Practical spiritual reflections and guidance for discovering tranquility and grounding your soul amidst everyday challenges.
                </p>
                <a href="blogs-detail-2.html" style="font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.88rem; color: #1c1917; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;">
                    <span>READ MORE</span> <span><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span>
                </a>
            </article>

            <!-- Blog Item 3 -->
            <article style="display: flex; flex-direction: column;">
                <div style="border-radius: 20px; overflow: hidden; height: 280px; margin-bottom: 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                    <img loading="lazy" decoding="async" src="assets/images/news-blog/WhatsApp Image 2025-09-17 at 11.30.24 AM.jpeg" alt="The Spirit Of Community Service" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <span style="font-family: 'Instrument Sans', sans-serif; font-size: 0.8rem; color: #4A2A18; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8rem;">COMMUNITY SERVICE</span>
                <h3 style="font-family: 'Phudu', sans-serif; font-size: 1.15rem; font-weight: 600; color: #1c1917; text-transform: uppercase; line-height: 1.35; margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1rem;">
                    THE SPIRIT OF COMMUNITY SERVICE
                </h3>
                <p style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; color: #57534e; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                    Witnessing God's love through compassionate acts of service and standing with marginalized communities across Ranchi.
                </p>
                <a href="blogs-detail-3.html" style="font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.88rem; color: #1c1917; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;">
                    <span>READ MORE</span> <span><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span>
                </a>
            </article>

            <!-- Blog Item 4 -->
            <article style="display: flex; flex-direction: column;">
                <div style="border-radius: 20px; overflow: hidden; height: 280px; margin-bottom: 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                    <img loading="lazy" decoding="async" src="assets/images/gallery_2_1785739478020.png" alt="Reflections On Morning Prayer" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <span style="font-family: 'Instrument Sans', sans-serif; font-size: 0.8rem; color: #4A2A18; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8rem;">PRAYER & DEVOTION</span>
                <h3 style="font-family: 'Phudu', sans-serif; font-size: 1.15rem; font-weight: 600; color: #1c1917; text-transform: uppercase; line-height: 1.35; margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1rem;">
                    REFLECTIONS ON MORNING PRAYER
                </h3>
                <p style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; color: #57534e; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                    Nurturing morning contemplation, psalmody, and quiet presence before the Blessed Sacrament to start each day anew.
                </p>
                <a href="blogs-detail-4.html" style="font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.88rem; color: #1c1917; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;">
                    <span>READ MORE</span> <span><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span>
                </a>
            </article>

            <!-- Blog Item 5 -->
            <article style="display: flex; flex-direction: column;">
                <div style="border-radius: 20px; overflow: hidden; height: 280px; margin-bottom: 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                    <img loading="lazy" decoding="async" src="assets/images/new_uploads/ChatGPT_Image_Aug_18_2026_05_24_08_PM.png" alt="Bringing Hope To The Margins" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <span style="font-family: 'Instrument Sans', sans-serif; font-size: 0.8rem; color: #4A2A18; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8rem;">OUTREACH & CHARITY</span>
                <h3 style="font-family: 'Phudu', sans-serif; font-size: 1.15rem; font-weight: 600; color: #1c1917; text-transform: uppercase; line-height: 1.35; margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1rem;">
                    BRINGING HOPE TO THE MARGINS
                </h3>
                <p style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; color: #57534e; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                    How our brothers live the Gospel values on the peripheries, bringing light, dignity, and educational outreach to all.
                </p>
                <a href="blogs-detail-5.html" style="font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.88rem; color: #1c1917; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;">
                    <span>READ MORE</span> <span><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span>
                </a>
            </article>

            <!-- Blog Item 6 -->
            <article style="display: flex; flex-direction: column;">
                <div style="border-radius: 20px; overflow: hidden; height: 280px; margin-bottom: 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                    <img loading="lazy" decoding="async" src="assets/images/gallery_4_1785739507745.png" alt="A Journey Of Faith And Fellowship" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <span style="font-family: 'Instrument Sans', sans-serif; font-size: 0.8rem; color: #4A2A18; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8rem;">FRATERNITY</span>
                <h3 style="font-family: 'Phudu', sans-serif; font-size: 1.15rem; font-weight: 600; color: #1c1917; text-transform: uppercase; line-height: 1.35; margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1rem;">
                    A JOURNEY OF FAITH AND FELLOWSHIP
                </h3>
                <p style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; color: #57534e; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                    Walking together in fraternity, celebrating the gift of community and mutual encouragement on the path of discipleship.
                </p>
                <a href="blogs-detail-6.html" style="font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.88rem; color: #1c1917; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;">
                    <span>READ MORE</span> <span><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span>
                </a>
            </article>

        </div>
    </section>"""

    # Replace the news grid block with blogs grid block
    grid_pattern = r'<!-- News Grid -->[\s\S]*?</section>'
    content = re.sub(grid_pattern, blogs_grid, content, count=1)

    # Ensure header & footer in blogs.html point to news.html for News
    content = content.replace('<a href="blogs.html">News</a>', '<a href="news.html">News</a>')

    with open('blogs.html', 'w', encoding='utf-8') as f:
        f.write(content)
    print("Rebuilt blogs.html with proper Blog articles and links.")

def fix_all_html_news_links():
    # Make sure all HTML files have News linking to news.html
    html_files = [f for f in os.listdir('.') if f.endswith('.html')]
    for fname in html_files:
        with open(fname, 'r', encoding='utf-8') as f:
            c = f.read()

        changed = False

        # In header desktop nav: <a href="...">News</a>
        if '<a href="blogs.html">News</a>' in c:
            c = c.replace('<a href="blogs.html">News</a>', '<a href="news.html">News</a>')
            changed = True

        # In footer links: News &amp; Events
        if '<li><a href="blogs.html" style="color: #a8a29e; text-decoration: none;' in c and 'News' in c:
            c = c.replace('<li><a href="blogs.html" style="color: #a8a29e; text-decoration: none; transition: color 0.3s ease;" onmouseover="this.style.color=\'#e6c888\'" onmouseout="this.style.color=\'#a8a29e\'">News &amp; Events</a></li>',
                          '<li><a href="news.html" style="color: #a8a29e; text-decoration: none; transition: color 0.3s ease;" onmouseover="this.style.color=\'#e6c888\'" onmouseout="this.style.color=\'#a8a29e\'">News &amp; Events</a></li>')
            c = c.replace('<li><a href="blogs.html" style="color: #a8a29e; text-decoration: none;">News &amp; Events</a></li>',
                          '<li><a href="news.html" style="color: #a8a29e; text-decoration: none;">News &amp; Events</a></li>')
            changed = True

        if changed:
            with open(fname, 'w', encoding='utf-8') as f:
                f.write(c)
            print(f"Fixed news link in {fname}")

def fix_blog_detail_pages():
    for i in range(1, 7):
        fname = f"blogs-detail-{i}.html"
        if not os.path.exists(fname):
            continue
        with open(fname, 'r', encoding='utf-8') as f:
            c = f.read()

        # Header nav should link News to news.html
        c = c.replace('<a href="blogs.html">News</a>', '<a href="news.html">News</a>')
        c = c.replace('<a href="blogs.html">Blog</a>', '<a href="news.html">News</a>')
        
        # Breadcrumb should link to blogs.html for Blogs
        c = re.sub(r'<a href="[^"]*" style="color: #4A2A18; text-decoration: none;">(Blog|Blogs|News)</a>',
                   r'<a href="blogs.html" style="color: #4A2A18; text-decoration: none;">Blogs</a>', c)

        with open(fname, 'w', encoding='utf-8') as f:
            f.write(c)
        print(f"Updated {fname}")

if __name__ == '__main__':
    build_blogs_html()
    fix_all_html_news_links()
    fix_blog_detail_pages()