#!/usr/bin/env python3
import re

mobile_css = """    .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
    .nav-hamburger span { display: block; width: 24px; height: 2px; background: white; border-radius: 2px; transition: all 0.3s; }
    .nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-hamburger.active span:nth-child(2) { opacity: 0; }
    .nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
    .nav-mobile { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--primary); padding: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 999; }
    .nav-mobile.active { display: flex; flex-direction: column; gap: 8px; }
    .nav-mobile .nav-link { padding: 12px 16px; border-radius: 8px; }
    """

mobile_nav_html = """  <div class="nav-mobile" id="navMobile">
    <a href="index.html" class="nav-link">🚼 Strollers</a>
    <a href="diapers.html" class="nav-link">🧷 Diapers</a>
    <a href="formula.html" class="nav-link">🍼 Formula</a>
    <a href="wipes.html" class="nav-link">🧻 Wipes</a>
    <a href="bottles.html" class="nav-link">🍶 Bottles</a>
    <a href="breast-pumps.html" class="nav-link">🤱 Pumps</a>
    <a href="checklist.html" class="nav-link">✅ Checklist</a>
    <a href="blog/index.html" class="nav-link">📝 Blog</a>
  </div>
"""

toggle_function = """    function toggleMobileNav() {
      const nav = document.getElementById('navMobile');
      const hamburger = document.querySelector('.nav-hamburger');
      if (nav && hamburger) {
        nav.classList.toggle('active');
        hamburger.classList.toggle('active');
      }
    }
"""

for filename in ['formula.html', 'bottles.html', 'wipes.html', 'breast-pumps.html']:
    with open(f'/root/clawd/stroller-app/{filename}', 'r') as f:
        content = f.read()
    
    # Add mobile CSS before @media (max-width: 768px)
    content = content.replace('@media (max-width: 768px) {', mobile_css + '\n    @media (max-width: 768px) {')
    
    # Update media query to show hamburger
    content = content.replace(
        '@media (max-width: 768px) {\n      .nav-links { display: none; }',
        '@media (max-width: 768px) {\n      .nav-hamburger { display: flex; }\n      .nav-pickers { display: none; }\n      .nav-links { display: none; }'
    )
    
    # Add hamburger button before </div></nav> (inside nav-container)
    # Find the nav section and add hamburger before the closing </div> of nav-container
    nav_pattern = r'(</select>\s*</div>\s*</div>)(\s*</nav>)'
    hamburger_html = '''</select>
      </div>
      <button class="nav-hamburger" onclick="toggleMobileNav()" aria-label="Toggle menu">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>'''
    content = re.sub(nav_pattern, hamburger_html + r'\2', content)
    
    # Add mobile nav div after </nav>
    content = content.replace('</nav>', '</nav>\n' + mobile_nav_html)
    
    # Add toggle function before the first async function or init()
    if 'function toggleMobileNav()' not in content:
        # Find where to insert (before first script block)
        content = content.replace('<script>', '<script>\n' + toggle_function, 1)
    
    # Add ProductI18n.changeLanguage call to language selector
    content = re.sub(
        r"(TrueBabyCost\.changeLanguage\(e\.target\.value\))",
        r"\1;if(typeof ProductI18n!=='undefined'){await ProductI18n.changeLanguage(e.target.value)}",
        content
    )
    
    # Add ProductI18n.init() after TrueBabyCost.init()
    if 'ProductI18n.init' not in content:
        content = re.sub(
            r'(await TrueBabyCost\.init\(\);)',
            r'\1\n      if (typeof ProductI18n !== "undefined" && window.productPageType) {\n        await ProductI18n.init(window.productPageType);\n      }',
            content
        )
    
    with open(f'/root/clawd/stroller-app/{filename}', 'w') as f:
        f.write(content)
    
    print(f'Fixed {filename}')

print('Done!')