#!/usr/bin/env python3
"""
Create standard navigation structure for all pages.
"""

import re

# Standard navigation HTML (will be customized per page for active state)
def get_nav_html(active_page):
    pages = {
        'index': ('🚼 Strollers', 'index.html'),
        'diapers': ('🧷 Diapers', 'diapers.html'),
        'formula': ('🍼 Formula', 'formula.html'),
        'wipes': ('🧻 Wipes', 'wipes.html'),
        'bottles': ('🍶 Bottles', 'bottles.html'),
        'breast-pumps': ('🤱 Pumps', 'breast-pumps.html'),
        'baby-monitors': ('📹 Monitors', 'baby-monitors.html'),
        'checklist': ('✅ Checklist', 'checklist.html'),
        'blog': ('📝 Blog', 'blog/index.html')
    }
    
    links = []
    for page_id, (label, url) in pages.items():
        active_class = ' active' if page_id == active_page else ''
        links.append(f'<a href="{url}" class="nav-link{active_class}">{label}</a>')
    
    return f'''<nav class="site-nav">
    <div class="nav-container">
      <a href="index.html" class="nav-brand">🍼 True Baby Cost</a>
      <div class="nav-links">
        {chr(10).join(f'        {link}' for link in links)}
      </div>
      <div class="nav-pickers">
        <select id="countrySelect" class="nav-picker"></select>
        <select id="langSelect" class="nav-picker">
          <option value="auto">🌐 Auto</option>
          <option value="en">🇬🇧 EN</option>
          <option value="es">🇪🇸 ES</option>
          <option value="fr">🇫🇷 FR</option>
        </select>
      </div>
    </div>
  </nav>'''

# Standard navigation CSS
nav_css = '''    /* Navigation */
    .site-nav {
      background: var(--primary);
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 60px;
    }
    
    .nav-brand {
      color: #fff;
      text-decoration: none;
      font-size: 1.25rem;
      font-weight: 700;
      font-family: 'Space Grotesk', sans-serif;
      white-space: nowrap;
    }
    
    .nav-links {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      align-items: center;
    }
    
    .nav-link {
      padding: 8px 12px;
      color: #fff;
      text-decoration: none;
      font-size: 0.9rem;
      border-radius: 8px;
      transition: background 0.2s;
      white-space: nowrap;
    }
    
    .nav-link:hover {
      background: rgba(255, 255, 255, 0.15);
    }
    
    .nav-link.active {
      background: rgba(255, 255, 255, 0.2);
      font-weight: 600;
    }
    
    .nav-pickers {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    
    .nav-picker {
      padding: 6px 10px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 0.85rem;
      cursor: pointer;
    }
    
    .nav-picker option {
      background: #fff;
      color: #333;
    }
    
    /* Mobile Navigation */
    @media (max-width: 768px) {
      .nav-container {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 8px;
      }
      
      .nav-brand {
        font-size: 1.1rem;
        flex: 0 0 auto;
      }
      
      .nav-links {
        order: 3;
        width: 100%;
        flex-direction: row;
        gap: 6px;
        margin-top: 8px;
      }
      
      .nav-link {
        padding: 6px 10px;
        font-size: 0.8rem;
      }
      
      .nav-pickers {
        margin-left: auto;
        gap: 6px;
      }
      
      .nav-picker {
        padding: 4px 8px;
        font-size: 0.75rem;
      }
    }
    
    @media (max-width: 480px) {
      .nav-links {
        font-size: 0.75rem;
      }
      
      .nav-link {
        padding: 5px 8px;
        font-size: 0.75rem;
      }
    }'''

# Update each page
pages_to_update = {
    'formula.html': 'formula',
    'bottles.html': 'bottles',
    'wipes.html': 'wipes',
    'breast-pumps.html': 'breast-pumps',
    'baby-monitors.html': 'baby-monitors'
}

for filename, page_id in pages_to_update.items():
    filepath = f'/root/clawd/stroller-app/{filename}'
    
    with open(filepath, 'r') as f:
        html = f.read()
    
    # Replace navigation HTML
    new_nav = get_nav_html(page_id)
    html = re.sub(
        r'<nav class="site-nav">.*?</nav>',
        new_nav,
        html,
        flags=re.DOTALL
    )
    
    # Replace navigation CSS
    # Find the .site-nav CSS block and replace it
    html = re.sub(
        r'\.site-nav\{[^}]*\}\.nav-container\{[^}]*\}\.nav-brand\{[^}]*\}\.nav-links\{[^}]*\}\.nav-link\{[^}]*\}\.nav-link:hover\{[^}]*\}\.nav-link\.active\{[^}]*\}\.nav-pickers\{[^}]*\}\.nav-picker\{[^}]*\}\.nav-picker option\{[^}]*\}',
        nav_css.replace('\n', '').replace('    ', ''),
        html
    )
    
    # Update mobile media query nav rules
    html = re.sub(
        r'@media\(max-width:768px\)\{[^}]*\.nav-[^}]*\}*',
        '',
        html
    )
    
    # Add our mobile CSS before the closing </style>
    html = html.replace('</style>', nav_css + '\n  </style>')
    
    with open(filepath, 'w') as f:
        f.write(html)
    
    print(f'✓ Updated {filename} with standard navigation')

print('\n✅ All pages updated with consistent navigation!')
print('   - Standard HTML structure')
print('   - Shared CSS for desktop and mobile')
print('   - Mobile: nav wraps, links stay visible, pickers on right')