"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/router"
import Image from "next/image"

const Header = () => {
  const [menu, setMenu] = useState(true)
  const [clientServicingOpen, setClientServicingOpen] = useState(false)
  const router = useRouter()

  const toggleNavbar = () => {
    setMenu(!menu)
  }

  useEffect(() => {
    const handleRouteChange = () => {
      setMenu(true)
      setClientServicingOpen(false)
    }

    router.events.on("routeChangeStart", handleRouteChange)
    return () => {
      router.events.off("routeChangeStart", handleRouteChange)
    }
  }, [router])

  useEffect(() => {
    const elementId = document.getElementById("navbar")
    const handleScroll = () => {
      if (window.scrollY > 170) {
        elementId.classList.add("is-sticky")
      } else {
        elementId.classList.remove("is-sticky")
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  // Check if a route is active
  const isActive = (path) => {
    if (path === "/") {
      return router.pathname === path
    }
    return router.pathname.startsWith(path)
  }

  const classOne = menu ? "collapse navbar-collapse" : "collapse navbar-collapse show"
  const classTwo = menu ? "navbar-toggler navbar-toggler-right collapsed" : "navbar-toggler navbar-toggler-right"

  const clientServices = [
    {
      title: "Virtual Finance Office",
      href: "/client-servicing/cfo",
      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",
      href: "/client-servicing/ta",
      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",
      href: "/client-servicing/ra",
      items: [],
    },
    {
      title: "Digital Transformation",
      href: "/client-servicing/ba",
      items: [
        { name: "ITeC App", href: "/client-servicing/ba" },
        { name: "Digital Process Automation", href: "/client-servicing/ba" },
      ],
    },
    {
      title: "Empowering Finance Consultants",
      href: "/client-servicing/ba",
      items: [{ name: "CA/CPA firm services", href: "/client-servicing/ba" }],
    },
    {
      title: "Bespoke Services",
      href: "/client-servicing/ba",
      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" },
      ],
    },
  ]

  return (
    <>
     
      <div className="mega-menu-container">
        <div id="navbar" className="navbar-area">
          <div className="zixon-nav">
            <div className="container-fluid">
              <nav className="navbar navbar-expand-md navbar-light">
                <Link href="/" className="navbar-brand">
                  <Image width={144} height={33} src="/images/logo.png" alt="logo" />
                </Link>
                <button
                  onClick={toggleNavbar}
                  className={classTwo}
                  type="button"
                  aria-controls="navbarSupportedContent"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <span className="icon-bar top-bar"></span>
                  <span className="icon-bar middle-bar"></span>
                  <span className="icon-bar bottom-bar"></span>
                </button>
                <div className={classOne} id="navbarSupportedContent">
                  <ul className="navbar-nav">
                    <li className="nav-item">
                      <Link href="/" className={`nav-link ${isActive("/") ? "active" : ""}`}>
                        Home
                      </Link>
                    </li>

                    {/* Knowledge Dropdown */}
                    <li className="nav-item knowledge-dropdown">
                      <Link href="/knowledge" className="dropdown-toggle nav-link">
                        Knowledge
                      </Link>
                      <ul className="dropdown-menu">
                        <li className="nav-item">
                          <Link href="/corpedia" className={`nav-link ${isActive("/corpedia") ? "active" : ""}`}>
                            Corpedia
                          </Link>
                          <ul>
                            <li className="nav-item">
                              <Link href="/taxwire" className={`nav-link ${isActive("/taxwire") ? "active" : ""}`}>
                                Taxwire
                              </Link>
                            </li>
                            <li className="nav-item">
                              <Link href="/budgetpanorama" className={`nav-link ${isActive("/budgetpanorama") ? "active" : ""}`}>
                                Budget Panorama
                              </Link>
                            </li>
                          </ul>
                        </li>
                        <li className="nav-item">
                          <Link href="/blog" className={`nav-link ${isActive("/blog") ? "active" : ""}`}>
                            Blogs
                          </Link>
                        </li>
                      </ul>
                    </li>

                    <li className="nav-item">
                      <Link href="/people" className={`nav-link ${isActive("/people") ? "active" : ""}`}>
                        People
                      </Link>
                    </li>

                    <li className="nav-item">
                      <button
                        onClick={() => setClientServicingOpen(!clientServicingOpen)}
                        className="nav-link dropdown-nav"
                        style={{ background: "none", border: "none", cursor: "pointer" }}
                      >
                        Client Servicing
                        <span className="dropdown-arrow"></span>
                      </button>
                    </li>

                    <li className="nav-item">
                      <Link href="/industry" className={`nav-link ${isActive("/industry") ? "active" : ""}`}>
                        Industry
                      </Link>
                    </li>

                    <li className="nav-item">
                      <Link href="/career" className={`nav-link ${isActive("/career") ? "active" : ""}`}>
                        Careers
                      </Link>
                    </li>

                    <li className="nav-item">
                      <Link href="/contact" className={`nav-link ${isActive("/contact") ? "active" : ""}`}>
                        Contact Us
                      </Link>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>

        {/* Overlay for closing menus */}
        <div
          className={`mega-overlay ${clientServicingOpen ? "show" : ""}`}
          onClick={() => {
            setClientServicingOpen(false)
          }}
        ></div>

        {/* Client Servicing Mega Menu */}
        <div className={`mega-menu ${clientServicingOpen ? "show" : ""}`}>
          <div className="mega-menu-content">
            <div className="mega-grid client-servicing-grid">
              {clientServices.map((service, index) => (
                <div key={index} className="mega-column">
                  <div className="service-header">
                    <Link href={service.href} className="mega-column-title" style={{ fontWeight: 'bold', fontFamily: 'inherit' }}>
                      <strong>{service.title}</strong>
                    </Link>
                  </div>
                  {service.items.length > 0 && (
                    <ul className="mega-column-list">
                      {service.items.map((item, itemIndex) => (
                        <li key={itemIndex}>
                          <Link href={item.href} className={`${isActive(item.href) ? "active" : ""}`}>
                            {item.name}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default Header