import re

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

    # The original grid content to replace
    # It might be easier to replace the entire <section style="padding: 4rem 1.5rem; background-color: #FFFFFF; text-align: center; font-family: 'DM Sans', sans-serif;"> ... </section>

    # Let's extract the section using a regex
    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

    mass_intention_html = """<!-- Mass Intention in USA Section -->
        <section style="padding: 4rem 1.5rem; background-color: #FFFFFF; text-align: center; font-family: 'DM Sans', sans-serif;">
            <div style="max-width: 1100px; margin: 0 auto;">
                <h2 style="font-family: 'Phudu', sans-serif; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 400; color: #1c2430; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; line-height: 1.1;">
                    FOR MASS INTENSION IN USA
                </h2>
                <p style="font-family: 'Instrument Sans', sans-serif; font-size: 0.85rem; font-weight: 700; color: #4A2A18; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3rem;">
                    TOR FRANCISCANS OF ST.LOUIS PROVINCE
                </p>

                <div style="background-color: #FAF7F0; padding: 3.5rem; border-radius: 4px; text-align: left;">
                    <!-- Top Row -->
                    <div style="margin-bottom: 2.5rem;">
                        <div style="font-family: 'DM Sans', sans-serif; font-size: 1.1rem; color: #b3a394; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem;">ACCOUNT HOLDER NAME</div>
                        <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1rem; font-weight: 700; color: #1c2430; text-transform: uppercase;">TOR FRANCISCANS OF ST.LOUIS PROVINCE</div>
                    </div>

                    <!-- Grid -->
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; align-items: start;">
                        <div>
                            <div style="font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #b3a394; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem;">BANK NAME</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; font-weight: 600; color: #1c2430; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                <span>CHASE BANK</span>
                                <svg onclick="copyToClipboard('CHASE BANK')" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#b3a394" 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: 1rem; color: #b3a394; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem;">ACCOUNT NUMBER</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; font-weight: 600; color: #1c2430; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                <span>726682563</span>
                                <svg onclick="copyToClipboard('726682563')" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#b3a394" 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: 1rem; color: #b3a394; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem;">ROUTING NUMBER</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.9rem; font-weight: 600; color: #1c2430; display: flex; flex-direction: column; gap: 0.5rem;">
                                <div style="display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                    <span>For direct<br>deposit:111000614</span>
                                    <svg onclick="copyToClipboard('111000614')" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#b3a394" 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>For wire<br>transfer:021000021</span>
                                    <svg onclick="copyToClipboard('021000021')" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#b3a394" 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: 1rem; color: #b3a394; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem;">ACCOUNT TYPE</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; font-weight: 600; color: #1c2430; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                <span>CHECKING</span>
                                <svg onclick="copyToClipboard('CHECKING')" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#b3a394" 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: 1rem; color: #b3a394; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem;">BRANCH</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.9rem; font-weight: 600; color: #1c2430; text-transform: uppercase; line-height: 1.4;">
                                2100 N DAVIS DRIVE,<br>ARLINGTON, TX - 76012
                            </div>
                        </div>
                    </div>

                    <!-- Note Box -->
                    <div style="background-color: #FFFFFF; padding: 1.25rem 1.5rem; border-radius: 8px; display: flex; align-items: flex-start; gap: 1rem;">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#b3a394" 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: #1c2430; font-size: 0.95rem;">Important Note</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; color: #4a5568; font-size: 0.9rem; margin-top: 0.1rem;">This Account is used for the purposes of Donating Mass intension in the United States of America</div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                function copyToClipboard(text) {
                    navigator.clipboard.writeText(text).then(function() {
                        // Optional: you can show a small toast here if desired
                        console.log('Copied: ' + text);
                        alert("Copied to clipboard: " + text);
                    }).catch(function(err) {
                        console.error('Could not copy text: ', err);
                    });
                }
            </script>
        </section>
        
        """
    
    new_content = content[:match.start()] + mass_intention_html + content[match.end(2):]
    
    with open(file_path, 'w', encoding='utf-8') as f:
        f.write(new_content)
    print(f"Fixed {file_path}")

fix_html('d:\\iss\\Franciscan Society\\index.html')
try:
    fix_html('d:\\iss\\Franciscan Society\\about.html')
except:
    pass
