import re

def rewrite_mass_intention(file_path):
    try:
        with open(file_path, 'r', encoding='utf-8') as f:
            content = f.read()

        # Find the Mass Intention block up to <footer
        pattern = re.compile(r'(<!-- Mass Intention in USA Section -->.*?)(<!-- 6\. Footer)', re.DOTALL)
        match = pattern.search(content)
        if not match:
            print(f"Section not found in {file_path}")
            return

        new_html = """<!-- Mass Intention in USA Section -->
        <section style="padding: 1.5rem 1.5rem 2rem 1.5rem; background-color: #FFFFFF; box-sizing: border-box;">
            <!-- Rounded Card Container -->
            <div style="position: relative; width: 100%; max-width: 1400px; margin: 0 auto; border-radius: 24px; overflow: hidden !important; box-shadow: 0 20px 50px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; box-sizing: border-box;">
                
                <!-- Fixed Photo Background with Parallax -->
                <div style="position: absolute; inset: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1438032005730-c779502df39b?w=1600&q=80&auto=format&fit=crop'); background-attachment: fixed; background-position: center; background-size: cover; z-index: 1;"></div>
                
                <!-- Dark Overlay -->
                <div style="position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 2;"></div>

                <!-- Content Grid -->
                <div class="gsap-fade-up" style="position: relative; z-index: 10; width: 100%; padding: 5rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; box-sizing: border-box;">
                    
                    <!-- Left Column: Title & Text -->
                    <div>
                        <!-- Eyebrow -->
                        <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem; background: rgba(255,255,255,0.1); padding: 0.4rem 1rem; border-radius: 50px; backdrop-filter: blur(5px);">
                            <span style="width: 6px; height: 6px; background-color: #dc2626; border-radius: 50%; display: inline-block;"></span>
                            <span style="color: #ffffff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Instrument Sans', sans-serif;">SUPPORT OUR MISSION</span>
                        </div>

                        <h2 class="gsap-reveal-h2" style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.4rem, 4vw, 3.6rem) !important; font-weight: 600 !important; color: #ffffff !important; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.5rem;">
                            FOR MASS INTENSION IN USA
                        </h2>
                        
                        <p class="gsap-reveal-p" style="font-family: 'Instrument Sans', sans-serif !important; font-size: 1.1rem !important; font-weight: 500 !important; color: rgba(255,255,255,0.9) !important; line-height: 1.8 !important; max-width: 500px; margin-bottom: 2.5rem;">
                            TOR FRANCISCANS OF ST.LOUIS PROVINCE
                        </p>

                        <!-- Note Box -->
                        <div style="background-color: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px); padding: 1.25rem 1.5rem; border-radius: 8px; display: flex; align-items: flex-start; gap: 1rem; max-width: 500px;">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e6c888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 2px;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
                            <div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; color: #ffffff; font-size: 0.95rem;">Important Note</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-top: 0.25rem;">This Account is used for the purposes of Donating Mass intension in the United States of America.</div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column: White Card (Bank Details) -->
                    <div style="background-color: #ffffff; padding: 3rem; border-radius: 12px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); width: 100%;">
                        
                        <div style="text-align: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid #1c1917;">
                            <h3 style="font-family: 'Instrument Sans', sans-serif; font-size: 1.1rem; font-weight: 700; color: #1c1917; margin: 0;">Bank Account Details</h3>
                        </div>

                        <div style="margin-bottom: 2rem;">
                            <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">ACCOUNT HOLDER NAME</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: #1c1917; text-transform: uppercase;">TOR FRANCISCANS OF ST.LOUIS PROVINCE</div>
                        </div>

                        <!-- Grid inside White Card -->
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">
                            <div>
                                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">BANK NAME</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1rem; font-weight: 600; color: #1c1917; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                    <span>CHASE BANK</span>
                                    <svg onclick="copyToClipboard('CHASE BANK')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink: 0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                </div>
                            </div>
                            <div>
                                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">ACCOUNT NUMBER</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1rem; font-weight: 600; color: #1c1917; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                    <span>726682563</span>
                                    <svg onclick="copyToClipboard('726682563')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink: 0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                </div>
                            </div>
                            <div>
                                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">ROUTING NUMBER</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; font-weight: 600; color: #1c1917; display: flex; flex-direction: column; gap: 0.6rem;">
                                    <div style="display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                        <span>Direct: 111000614</span>
                                        <svg onclick="copyToClipboard('111000614')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink:0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                    </div>
                                    <div style="display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                        <span>Wire: 021000021</span>
                                        <svg onclick="copyToClipboard('021000021')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink:0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">ACCOUNT TYPE</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1rem; font-weight: 600; color: #1c1917; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                    <span>CHECKING</span>
                                    <svg onclick="copyToClipboard('CHECKING')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink: 0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">BRANCH</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; font-weight: 600; color: #1c1917; text-transform: uppercase; line-height: 1.4;">
                                2100 N DAVIS DRIVE,<br>ARLINGTON, TX - 76012
                            </div>
                        </div>

                    </div>
                </div>
                <script>
                    if (typeof copyToClipboard === 'undefined') {
                        function copyToClipboard(text) {
                            navigator.clipboard.writeText(text).then(function() {
                                alert("Copied to clipboard: " + text);
                            }).catch(function(err) {
                                console.error('Could not copy text: ', err);
                            });
                        }
                    }
                </script>
            </div>
        </section>\n        """
        
        new_content = content[:match.start()] + new_html + content[match.end(2):]
        
        with open(file_path, 'w', encoding='utf-8') as f:
            f.write(new_content)
        print(f"Rewrote {file_path}")
    except Exception as e:
        print(f"Error on {file_path}: {e}")

rewrite_mass_intention('d:\\iss\\Franciscan Society\\index.html')
rewrite_mass_intention('d:\\iss\\Franciscan Society\\about.html')