const fs = require('fs');

let headerCode = fs.readFileSync('components/layout/Header.tsx', 'utf8');

// Insert MobileMenu state
headerCode = headerCode.replace(
  "const [headerVariant, setHeaderVariant] = React.useState<'capsule' | 'standard'>('capsule');",
  "const [headerVariant, setHeaderVariant] = React.useState<'capsule' | 'standard'>('capsule');\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);\n"
);

// Close menu on pathname change
headerCode = headerCode.replace(
  "// Re-check when pathname changes",
  "// Re-check when pathname changes\n    setIsMobileMenuOpen(false);"
);

// Add Hamburger Button in the Header
const hamburgerButton = `
              {/* Hamburger Menu (Mobile Only) */}
              <button 
                className="md:hidden ml-2 p-2 text-white hover:text-primary transition-colors focus:outline-none"
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                aria-label="Toggle Menu"
              >
                <div className="w-6 h-5 flex flex-col justify-between relative">
                  <span className={\`w-full h-0.5 bg-current transform transition duration-300 ease-in-out \${isMobileMenuOpen ? 'rotate-45 translate-y-2.5' : ''}\`} />
                  <span className={\`w-full h-0.5 bg-current transition duration-300 ease-in-out \${isMobileMenuOpen ? 'opacity-0' : 'opacity-100'}\`} />
                  <span className={\`w-full h-0.5 bg-current transform transition duration-300 ease-in-out \${isMobileMenuOpen ? '-rotate-45 -translate-y-2' : ''}\`} />
                </div>
              </button>
            </div>
          </div>
        </div>
      </header>
`;
headerCode = headerCode.replace(
  "            </div>\n          </div>\n        </div>\n      </header>",
  hamburgerButton
);

// Add Mobile Menu Overlay
const mobileMenuOverlay = `
      {/* Mobile Menu Overlay */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3 }}
            className="fixed inset-0 z-[40] bg-[#050B14]/95 backdrop-blur-xl md:hidden pt-24 pb-24 px-6 overflow-y-auto"
          >
            <nav className="flex flex-col gap-6 mt-8">
              {navLinks && navLinks.length > 0 && navLinks.map((link) => {
                const mappedUrl = link.url.startsWith('/') && !link.url.match(/^\\/(en|de)/) 
                  ? \`/\${currentLocale}\${link.url}\` 
                  : link.url;
                const isActive = pathname === mappedUrl || (mappedUrl !== \`/\${currentLocale}\` && pathname?.startsWith(\`\${mappedUrl}/\`));
                
                return (
                  <div key={link.url} className="flex flex-col">
                    <TransitionLink 
                      href={mappedUrl}
                      onClick={() => setIsMobileMenuOpen(false)}
                      className={\`text-2xl font-bold uppercase tracking-widest transition-colors \${isActive ? 'text-primary' : 'text-white'}\`}
                    >
                      {link.label}
                    </TransitionLink>
                    
                    {link.children && (
                      <div className="flex flex-col gap-3 mt-3 pl-4 border-l-2 border-white/10">
                        {link.children.map((child, idx) => {
                          if (child.isGroupLabel) {
                            return <div key={idx} className="text-sm font-bold text-neutral-500 uppercase tracking-widest mt-2">{child.label}</div>;
                          }
                          const childUrl = child.url.startsWith('/') && !child.url.match(/^\\/(en|de)/) 
                            ? \`/\${currentLocale}\${child.url}\` 
                            : child.url;
                          const isChildActive = pathname === childUrl;
                          
                          return (
                            <TransitionLink
                              key={child.url}
                              href={childUrl}
                              onClick={() => setIsMobileMenuOpen(false)}
                              className={\`text-lg font-medium transition-colors \${isChildActive ? 'text-primary' : 'text-white/70'}\`}
                            >
                              {child.label}
                            </TransitionLink>
                          );
                        })}
                      </div>
                    )}
                  </div>
                );
              })}
            </nav>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}
`;
headerCode = headerCode.replace(
  "      </header>\n    </>\n  );\n}",
  `      </header>\n${mobileMenuOverlay}`
);

fs.writeFileSync('components/layout/Header.tsx', headerCode);