import { useState } from "react"
import Link from "next/link"
import Image from "next/image"

const clientServices = [
  {
    title: "Virtual Finance Office",
    items: [
      { name: "Virtual CFO Services", href: "/client-servicing/cfo" },
      { name: "Virtual FC Services", href: "/client-servicing/cfo" },
      { name: "Book Closures and Audit Support", href: "/client-servicing/cfo" },
      { name: "Accounting Payroll & Compliance", href: "/client-servicing/cfo" },
    ],
  },
  {
    title: "Advisory Services",
    items: [
      { name: "Transaction Advisory", href: "/client-servicing/ta" },
      { name: "Risk Advisory", href: "/client-servicing/ta" },
      { name: "Business Advisory", href: "/client-servicing/ta" },
    ],
  },
  {
    title: "GCC as a Service",
    items: [],
  },
  {
    title: "Digital Transformation",
    items: [
      // { name: "ITeC App", href: "/client-servicing/ba" },
      // { name: "Digital Process Automation", href: "/client-servicing/ba" },
    ],
  },
  {
    title: "Empowering Finance Consultants",
     items: [
      // { name: "CA/CPA firm services", href: "/client-servicing/ba" }
    ],
  },
  {
    title: "Bespoke Services",
    items: [
      // { name: "Data analysis and reporting", href: "/client-servicing/ba" },
      // { name: "Admin and Backend Support Services", href: "/client-servicing/ba" },
      // { name: "PFM", href: "/client-servicing/ba" },
    ],
  },
]

const knowledgeOptions = [
  { name: "Corpedia", href: "/corpedia" },
  { name: "Taxwire", href: "/taxwire" },
  { name: "Budget Panorama", href: "/budgetpanorama" },
  { name: "Blogs", href: "/blog" },
]

export default function MobileHamburger() {
  const [open, setOpen] = useState(false)
  const [openDropdown, setOpenDropdown] = useState("")
  const [openClientService, setOpenClientService] = useState(null)

  const handleDropdown = (name) => {
    setOpenDropdown(openDropdown === name ? "" : name)
  }

  const handleClientService = (idx) => {
    setOpenClientService(openClientService === idx ? null : idx)
  }

  return (
    <nav className="mobile-hamburger-nav">
      <div className="mobile-header-bar">
        <Link href="/" className="mobile-logo-link" aria-label="Home">
          <Image src="/images/logo.png" alt="Advith Consulting Logo" width={130} height={30} priority />
        </Link>
        <button
          className={`hamburger-btn${open ? " open" : ""}`}
          aria-label="Open menu"
          onClick={() => setOpen((v) => !v)}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <div className={`mobile-menu${open ? " show" : ""}`}>
        <ul>
          <li>
            <Link href="/" onClick={() => setOpen(false)}>Home</Link>
          </li>
          <li>
            <button
              className="mobile-dropdown-btn"
              onClick={() => handleDropdown("knowledge")}
              aria-expanded={openDropdown === "knowledge"}
            >
              Knowledge
              <span className={`arrow${openDropdown === "knowledge" ? " open" : ""}`}></span>
            </button>
            <ul className={`mobile-dropdown${openDropdown === "knowledge" ? " show" : ""}`}>
              {knowledgeOptions.map((opt) => (
                <li key={opt.name}>
                  <Link href={opt.href} onClick={() => setOpen(false)}>{opt.name}</Link>
                </li>
              ))}
            </ul>
          </li>
          <li>
            <Link href="/people" onClick={() => setOpen(false)}>People</Link>
          </li>
          <li>
            <button
              className="mobile-dropdown-btn"
              onClick={() => handleDropdown("clientservicing")}
              aria-expanded={openDropdown === "clientservicing"}
            >
              Client Servicing
              <span className={`arrow${openDropdown === "clientservicing" ? " open" : ""}`}></span>
            </button>
            <ul className={`mobile-dropdown${openDropdown === "clientservicing" ? " show" : ""}`}>
              {clientServices.map((service, idx) => (
                <li key={service.title}>
                  <button
                    className="mobile-dropdown-btn inner"
                    onClick={() => handleClientService(idx)}
                    aria-expanded={openClientService === idx}
                  >
                    {service.title}
                    {service.items.length > 0 && (
                      <span className={`arrow${openClientService === idx ? " open" : ""}`}></span>
                    )}
                  </button>
                  {service.items.length > 0 && (
                    <ul className={`mobile-dropdown inner${openClientService === idx ? " show" : ""}`}>
                      {service.items.map((item) => (
                        <li key={item.name}>
                          <Link href={item.href} onClick={() => setOpen(false)}>{item.name}</Link>
                        </li>
                      ))}
                    </ul>
                  )}
                </li>
              ))}
            </ul>
          </li>
          <li>
            <Link href="/industry" onClick={() => setOpen(false)}>Industry</Link>
          </li>
          <li>
            <Link href="/career" onClick={() => setOpen(false)}>Careers</Link>
          </li>
          <li>
            <Link href="/contact" onClick={() => setOpen(false)}>Contact Us</Link>
          </li>
        </ul>
      </div>
    </nav>
  )
}