import re

with open('tmp_home_current.html', 'r') as f:
    text = f.read()

# Replace HTML
html_old = """    <div class="kmc-eighth-visual" aria-hidden="true">
      <div class="kmc-eighth-bg"></div>
      <div class="kmc-eighth-portrait"></div>
    </div>"""

html_new = """    <div class="kmc-eighth-visual" aria-hidden="true">
      <img src="/assets/pasted-20260326-200838-de780619.png" alt="Coaching session" style="width: 100%; height: auto; display: block;" />
    </div>"""

if html_old in text:
    text = text.replace(html_old, html_new)
    print("HTML replacement successful")
else:
    # try regex
    new_text = re.sub(r'<div class="kmc-eighth-visual" aria-hidden="true">\s*<div class="kmc-eighth-bg"></div>\s*<div class="kmc-eighth-portrait"></div>\s*</div>', html_new, text)
    if new_text != text:
        text = new_text
        print("HTML replacement via regex successful")
    else:
        print("HTML replacement FAILED")

css_repl = """  .kmc-eighth-section .kmc-eighth-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .kmc-eighth-section .kmc-eighth-visual img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  @media (max-width:1080px){
    .kmc-eighth-section{padding:68px 0 82px;}
    .kmc-eighth-section .kmc-eighth-wrap{width:calc(100% - 56px) !important;grid-template-columns:1fr;gap:48px !important;}
    .kmc-eighth-section .kmc-eighth-copy{max-width:760px;}
    .kmc-eighth-section .kmc-eighth-title{max-width:520px;font-size:clamp(44px,8.4vw,62px) !important;}
    .kmc-eighth-section .kmc-eighth-body{font-size:clamp(22px,3.9vw,34px) !important;max-width:100%;}
    
    .kmc-eighth-section .kmc-eighth-visual{max-width:600px; margin:32px auto 0;}
  }

  @media (max-width:680px){
    .kmc-eighth-section{padding:54px 0 72px;}
    .kmc-eighth-section .kmc-eighth-wrap{width:calc(100% - 28px) !important;gap:36px !important;}
    .kmc-eighth-section .kmc-eighth-body{line-height:1.28 !important;margin-top:18px;}
    .kmc-eighth-section .kmc-eighth-actions{margin-top:32px;gap:16px;flex-wrap:wrap;}
    .kmc-eighth-section .kmc-eighth-btn{min-height:52px !important;padding:8px 8px 8px 18px !important;font-size:16px !important;}
    .kmc-eighth-section .kmc-assessment-arrow{width:36px;height:36px;flex-basis:36px;}
    .kmc-eighth-section .kmc-eighth-link{font-size:16px !important;}
  }
</style>"""

new_text = re.sub(r'  \.kmc-eighth-section \.kmc-eighth-visual\s*\{.*?</style>', css_repl, text, flags=re.DOTALL)
if new_text != text:
    text = new_text
    print("CSS replacement successful")
else:
    print("CSS replacement FAILED")

with open('tmp_home_current.html', 'w') as f:
    f.write(text)