"use client";

import { useState } from "react";
import {
  Dialog,
  DialogPanel,
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
} from "@headlessui/react";
import {
  Bars3Icon,
  XMarkIcon,
} from "@heroicons/react/24/outline";
import {
  ChevronDownIcon,
} from "@heroicons/react/20/solid";
import Link from "next/link";
import Image from "next/image";
import { Button } from "@mui/material";
import useCalendlyModal from "@/app/store/useCalendlyModal";

const products = [
  {
    name: "Full Stack Marketplace Management",
    description:
      "End-to-end management of your marketplace presence.",
    href: "/full-stack-marketplace-management",
    icon: '/assets/icons/businesses.png',
  },
  {
    name: "Marketing & Advertising",
    description: "Performance-driven advertising built to scale profitably.",
    href: "/marketing-and-advertisement",
    icon: '/assets/icons/promotion.png',
  },
  {
    name: "Listing & Operations",
    description:
      "Optimized listings and seamless operations engineered for growth.",
    href: "/listing-and-operations",
    icon: '/assets/icons/settings.png',
  },
  {
    name: "Sales & Analytics",
    description: "Actionable insights that turn data into revenue decisions.",
    href: "/sales-and-analytics",
    icon: '/assets/icons/analytics.png',
  },
  {
    name: "Creative Strategy & Branding",
    description:
      "Conversion-led creative that elevates your brand and drives sales.",
    href: "/creative-strategy-and-branding",
    icon: '/assets/icons/creative-brain.png',
  },
  {
    name: "3P Selling",
    description:
      "End-to-end retail management to expand and scale through 3P channels.",
    href: "/3p-selling",
    icon: '/assets/icons/dollar-price.png',
  },
  
];
const products2 = [
  {
    name: "Blogs",
    description: "Get a better understanding of your traffic",
    href: "/blogs",
    icon: '/assets/icons/blogs.png',
  },
  {
    name: "Case Studies",
    description: "Speak directly to your customers",
    href: "/case-study",
    icon: '/assets/icons/analysis.png',
  },
];


export default function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [isPopover1Open, setIsPopover1Open] = useState(false);
  const [isPopover2Open, setIsPopover2Open] = useState(false);
  /*   const [isMobileDisclosure1Open, setIsMobileDisclosure1Open] = useState(false)
  const [isMobileDisclosure2Open, setIsMobileDisclosure2Open] = useState(false) */
  const {openCalendlyModal} = useCalendlyModal()

  const handleAllLinksClick = () => {
    // Close all dropdowns
    setMobileMenuOpen(false);
  };

  return (
    <header className="px-2 lg:px-0 fixed top-3 md:top-5 left-0 right-0 z-999 ">
      <div className="bg-[#eaeaead1] container backdrop-blur-[5px] shadow-[0_0_5px_0_rgba(0,0,0,0.1)] mx-auto lg:mx-auto rounded-full">
        <nav
          aria-label="Global"
          className="mx-auto flex items-center justify-between p-3 lg:p-0 lg:px-8"
        >
          <div className="flex lg:flex-1">
            <Link href="/" className="-m-1.5 p-1.5">
              <span className="sr-only">Eleantz</span>
              <Image
                className="w-[100px] md:w-[150px] h-auto"
                src="/assets/img/eleantz-logo.webp"
                alt="logo"
                width={150}
                height={82}
              />
            </Link>
          </div>
          <div className="flex lg:hidden">
            <button
              type="button"
              onClick={() => setMobileMenuOpen(true)}
              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-900"
            >
              <span className="sr-only">Open main menu</span>
              <Bars3Icon aria-hidden="true" className="size-6" />
            </button>
          </div>
          <div className="hidden lg:flex lg:gap-x-12">
            <div
              className="relative"
              onMouseEnter={() => setIsPopover1Open(true)}
              onMouseLeave={() => setIsPopover1Open(false)}
            >
              <button
                type="button"
                className="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 hover:text-gray-900 py-5 uppercase"
              >
                Services
                <ChevronDownIcon
                  aria-hidden="true"
                  className="size-5 flex-none text-gray-500"
                />
              </button>

              {isPopover1Open && (
                <div className="absolute top-13 left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 overflow-hidden rounded-3xl bg-gray-100 outline-1 -outline-offset-1 outline-gray-900/10 transition-all duration-200 ease-out">
                  <div className="p-4">
                    {products.map((item) => (
                      <div
                        onClick={() => setIsPopover1Open(false)}
                        key={item.name}
                        className="group relative flex items-center gap-x-6 rounded-lg px-4 py-2 text-sm/6 hover:bg-gray-200"
                      >
                        <div className="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-200 group-hover:bg-gray-300">
                          <Image src={item.icon} alt="" width={30} height={30} />
                        </div>
                        <div className="flex-auto">
                          <Link
                            href={item.href}
                            className="block font-semibold text-gray-900"
                          >
                            {item.name}
                            <span className="absolute inset-0" />
                          </Link>
                          {/* <p className="mt-1 text-gray-900">{item.description}</p> */}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            <Link
              href="/about-us"
              className="text-sm/6 font-semibold text-gray-900 py-5 uppercase"
            >
              About Us
            </Link>
            <div
              className="relative"
              onMouseEnter={() => setIsPopover2Open(true)}
              onMouseLeave={() => setIsPopover2Open(false)}
            >
              <button
                type="button"
                className="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 hover:text-gray-900 py-5 uppercase"
              >
                Resources
                <ChevronDownIcon
                  aria-hidden="true"
                  className="size-5 flex-none text-gray-500"
                />
              </button>

              {isPopover2Open && (
                <div className="absolute top-13 left-1/2 z-10 mt-3 w-screen max-w-xs -translate-x-1/2 overflow-hidden rounded-3xl bg-gray-100 outline-1 -outline-offset-1 outline-gray-900/10 transition-all duration-200 ease-out">
                  <div className="p-4">
                    {products2.map((item) => (
                      <div
                        key={item.name}
                        className="group relative flex items-center gap-x-6 rounded-lg p-3 text-sm/6 hover:bg-gray-200"
                      >
                        <div className="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-200 group-hover:bg-gray-300">
                        <Image src={item.icon} alt="" width={30} height={30} />
                        </div>
                        <div className="flex-auto">
                          <Link
                            href={item.href}
                            className="block font-semibold text-gray-900"
                          >
                            {item.name}
                            <span className="absolute inset-0" />
                          </Link>
                        {/*  <p className="mt-1 text-gray-900">{item.description}</p> */}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
            {/*  <Link href="/contact-us" className="text-sm/6 font-semibold text-gray-900 py-5 uppercase">
              Contact Us
            </Link> 
            <Link
              href="/amazon/login"
              className="text-sm/6 font-semibold text-gray-900 py-5 uppercase"
            >
              Amazon Api
            </Link>*/}
          </div>
          <div className="hidden lg:flex lg:flex-1 lg:justify-end">
              <Button
                onClick={() => openCalendlyModal()}
                type="button"
                variant="contained"
                className="text-white px-8 py-1.5 rounded-full"
                sx={{ backgroundColor: "#c4262e", borderRadius: 50 }}
              >
                Book a session
              </Button>
          </div>
        </nav>
        <Dialog
          open={mobileMenuOpen}
          onClose={setMobileMenuOpen}
          className="lg:hidden"
        >
          <div className="fixed inset-0 z-50" />
          <DialogPanel className="fixed inset-y-0 right-0 z-1000 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 rounded-2xl">
            <div className="flex items-center justify-between">
              <Link
                href="/"
                onClick={handleAllLinksClick}
                className="-m-1.5 p-1.5"
              >
                <span className="sr-only">Eleantz</span>
                <Image
                  alt="logo"
                  src="/assets/img/eleantz-logo.webp"
                  width={80}
                  height={82}
                  className="h-10 w-auto"
                />
              </Link>
              <button
                type="button"
                onClick={() => setMobileMenuOpen(false)}
                className="-m-2.5 rounded-md p-2.5 text-gray-900"
              >
                <span className="sr-only">Close menu</span>
                <XMarkIcon aria-hidden="true" className="size-6" />
              </button>
            </div>
            <div className="mt-6 flow-root">
              <div className="-my-6 divide-y divide-gray-800">
                <div className="space-y-2 py-6">
                  <Disclosure as="div" className="-mx-3">
                    <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 hover:bg-gray-200">
                      Services
                      <ChevronDownIcon
                        aria-hidden="true"
                        className="size-5 flex-none group-data-open:rotate-180"
                      />
                    </DisclosureButton>
                    <DisclosurePanel className="mt-2 space-y-2">
                      {[...products].map((item) => (
                        <Link
                          key={item.name}
                          href={item.href}
                          onClick={handleAllLinksClick}
                          className="block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-200"
                        >
                          {item.name}
                        </Link>
                      ))}
                    </DisclosurePanel>
                  </Disclosure>
                  <Link
                    href="/about-us"
                    className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-200"
                    onClick={handleAllLinksClick}
                  >
                    About Us
                  </Link>
                  <Disclosure as="div" className="-mx-3">
                    <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 hover:bg-gray-200">
                      Resources
                      <ChevronDownIcon
                        aria-hidden="true"
                        className="size-5 flex-none group-data-open:rotate-180"
                      />
                    </DisclosureButton>
                    <DisclosurePanel className="mt-2 space-y-2">
                      {[...products2].map((item) => (
                        <Link
                          key={item.name}
                          href={item.href}
                          onClick={handleAllLinksClick}
                          className="block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-200"
                        >
                          {item.name}
                        </Link>
                      ))}
                    </DisclosurePanel>
                  </Disclosure>
                  {/*  <Link
                    href="/contact-us"
                    className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-200"
                    onClick={handleAllLinksClick}
                  >
                    Contact Us
                  </Link> */}
                </div>
                {/* <div className="py-6">
                  <Link
                    href="#"
                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-white hover:bg-white/5"
                  >
                    Enquiry Now
                  </Link>
                </div> */}
              </div>
            </div>
          </DialogPanel>
        </Dialog>
      </div>
    </header>
  );
}