const fs = require('fs');
let code = fs.readFileSync('src/app/(main)/(marketing)/MarketingLayout.tsx', 'utf8');

if (!code.includes("import { allUseCases }")) {
    code = code.replace("import en from '@/i18n/en.json';", "import en from '@/i18n/en.json';\nimport { allUseCases } from '@/lib/growth-pages';\nimport { LayoutGrid } from 'lucide-react';");
}

if (!code.includes("const [useCasesOpen")) {
    code = code.replace("const [toolsOpen, setToolsOpen] = useState(false);", "const [toolsOpen, setToolsOpen] = useState(false);\n  const [useCasesOpen, setUseCasesOpen] = useState(false);");
    code = code.replace("const [mobileToolsOpen, setMobileToolsOpen] = useState(false);", "const [mobileToolsOpen, setMobileToolsOpen] = useState(false);\n  const [mobileUseCasesOpen, setMobileUseCasesOpen] = useState(false);");
    code = code.replace("setToolsOpen(false);", "setToolsOpen(false);\n    setUseCasesOpen(false);");
    code = code.replace("setMobileToolsOpen(false);", "setMobileToolsOpen(false);\n    setMobileUseCasesOpen(false);");
}

const useCasesDropdown = `            {/* Use Cases Dropdown */}
            <div
              className="relative group px-3 py-2"
              onMouseEnter={() => setUseCasesOpen(true)}
              onMouseLeave={() => setUseCasesOpen(false)}
            >
              <button className="flex items-center space-x-1 text-sm font-medium text-slate-600 group-hover:text-slate-900 transition-colors">
                <span>Use Cases</span>
                <ChevronDown className={cn("w-4 h-4 transition-transform duration-200", useCasesOpen && "rotate-180")} />
              </button>

              <AnimatePresence>
                {useCasesOpen && (
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 10 }}
                    transition={{ duration: 0.15 }}
                    className="absolute left-1/2 -translate-x-1/2 top-full mt-2 w-[700px] bg-white rounded-2xl shadow-lg border border-slate-100 p-4 overflow-hidden"
                  >
                    <div className="grid grid-cols-2 gap-2">
                      {allUseCases.map((uc) => (
                        <Link
                          key={uc.slug}
                          href={uc.href}
                          className="flex items-center space-x-3 p-2.5 rounded-xl transition-colors hover:bg-slate-50"
                        >
                          <div className="p-2 rounded-lg shrink-0 bg-indigo-50 text-indigo-500">
                            <LayoutGrid className="w-4 h-4" />
                          </div>
                          <div>
                            <div className="text-sm font-semibold text-slate-900">{uc.title}</div>
                          </div>
                        </Link>
                      ))}
                    </div>
                    <div className="mt-3 pt-3 border-t border-slate-100 -mx-4 -mb-4 px-4 py-3 text-center bg-slate-50/50">
                      <Link href="/use-cases" className="text-xs text-indigo-600 font-medium hover:underline">View All Use Cases &rarr;</Link>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>`;

if (!code.includes("<span>Use Cases</span>")) {
    code = code.replace("{/* Tools Dropdown */}", useCasesDropdown + "\n\n            {/* Tools Dropdown */}");
}

const mobileUseCasesAccordion = `                {/* Use Cases Accordion */}
                <button
                  onClick={() => setMobileUseCasesOpen(!mobileUseCasesOpen)}
                  className="flex items-center justify-between w-full px-4 py-3 rounded-xl hover:bg-slate-50 text-slate-700 font-semibold"
                >
                  <span>Use Cases</span>
                  <ChevronDown className={cn("w-5 h-5 transition-transform", mobileUseCasesOpen && "rotate-180")} />
                </button>

                <AnimatePresence>
                  {mobileUseCasesOpen && (
                    <motion.div
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: 'auto' }}
                      exit={{ opacity: 0, height: 0 }}
                      className="overflow-hidden"
                    >
                      <div className="max-h-[50vh] overflow-y-auto pl-4 space-y-1 border-l-2 border-slate-100 ml-4">
                        {allUseCases.map((uc) => (
                          <Link
                            key={uc.slug}
                            href={uc.href}
                            className="block px-4 py-2.5 rounded-lg hover:bg-slate-50 text-slate-600 text-sm"
                            onClick={() => { setMobileMenuOpen(false); setMobileUseCasesOpen(false); }}
                          >
                            {uc.title}
                          </Link>
                        ))}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>`;

if (!code.includes("{/* Use Cases Accordion */}")) {
    code = code.replace("{/* Free Tools Accordion */}", mobileUseCasesAccordion + "\n\n                {/* Free Tools Accordion */}");
}

fs.writeFileSync('src/app/(main)/(marketing)/MarketingLayout.tsx', code);
console.log("Updated MarketingLayout.tsx");