jaecoo-kelapagading/components/landing-page/navbar.tsx

"use client";
import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ChevronDown, Lock, Menu, X } from "lucide-react";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import { AnimatePresence, motion } from "framer-motion";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import { Input } from "../ui/input";
import { Textarea } from "../ui/textarea";

export default function Navbar() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const [showProdukMenu, setShowProdukMenu] = useState(false);
  const [showPriceMenu, setShowPriceMenu] = useState(false);
  const [showServiceMenu, setShowServiceMenu] = useState(false);
  const [showAboutMenu, setShowAboutMenu] = useState(false);
  const [showConsumerMenu, setShowConsumerMenu] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const [showProdukMenuMobile, setShowProdukMenuMobile] = useState(false); // fix here
  const [openMobile, setOpenMobile] = useState(false);
  const [showPriceMenuMobile, setShowPriceMenuMobile] = useState(false);
  const [showServiceMenuMobile, setShowServiceMenuMobile] = useState(false);
  const [showAboutMenuMobile, setShowAboutMenuMobile] = useState(false);
  const [showConsumerMenuMobile, setShowConsumerMenuMobile] = useState(false);

  const isActive = (path: string) =>
    pathname === path || pathname.startsWith(path + "/");

  useEffect(() => {
    const handleClickOutside = () => {
      setShowProdukMenu(false);
    };

    window.addEventListener("click", handleClickOutside);
    return () => window.removeEventListener("click", handleClickOutside);
  }, []);

  const produkList = [
    {
      name: "JAECOO J7 SHS-P",
      img: "/j7awd.png",
      link: "/product/j7-shs-p",
    },
    {
      name: "JAECOO J5 EV",
      img: "/j7shs.png",
      link: "/product/j5-ev",
    },
    {
      name: "JAECOO J8 SHS-P ARDIS",
      img: "/j8awd.png",
      link: "/product/j8-shs-ardis",
    },
  ];
  const priceList = [
    {
      name: "INFORMASI HARGA",
      link: "/price/price-information",
    },
    {
      name: "PROMO",
      link: "/price/promo",
    },
  ];

  const serviceList = [
    {
      name: "PROGRAM SERVICE",
      link: "/service/program-service",
    },
    {
      name: "AFTER SALES",
      link: "/service/after-sales",
    },
  ];

  const aboutList = [
    {
      name: "PROFILE",
      link: "/about/profile",
    },
    {
      name: "SOCIAL MEDIA",
      link: "/about/sosmed",
    },
    {
      name: "GALERY",
      link: "/about/galery",
    },
  ];

  const consumerList = [
    {
      name: "AFTER SALES",
      link: "/customer-service/after-sales",
    },
    {
      name: "SALES",
      link: "/customer-service/sales",
    },
  ];

  return (
    <nav className="relative w-full flex items-center justify-between py-4 px-6 sm:px-10 bg-white z-50">
      <div className="flex items-center gap-4">
        <Link href="/" className="flex items-center space-x-2">
          <Image
            src="/masjaecoonav.png"
            alt="MAS JAECOO Logo"
            width={300}
            height={30}
            className=" object-fill"
          />
        </Link>
      </div>

      <button
        className="sm:hidden absolute right-6 text-[#1F3D4A]"
        onClick={() => setIsMobileMenuOpen((prev) => !prev)}
      >
        {isMobileMenuOpen ? (
          <X className="w-6 h-6" />
        ) : (
          <Menu className="w-6 h-6" />
        )}
      </button>

      <ul className="hidden sm:flex mx-auto items-center gap-4 sm:gap-6 text-sm font-medium">
        <li>
          <Link href="/">
            <Button
              variant="ghost"
              className={`hover:cursor-pointer rounded-full font-bold px-5 ${
                isActive("/") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
              }`}
            >
              HOMEPAGE
            </Button>
          </Link>
        </li>

        <li className="">
          <Button
            variant="ghost"
            onClick={(e) => {
              e.stopPropagation();
              setShowProdukMenu((prev) => !prev);
            }}
            className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
              isActive("/product") || isActive("/produk")
                ? "bg-[#C2D8E2] text-[#1F3D4A]"
                : ""
            }`}
          >
            PRODUCTS <ChevronDown className="w-4 h-4" />
          </Button>

          <AnimatePresence>
            {showProdukMenu && (
              <motion.div
                key="produk-dropdown"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 20 }}
                transition={{ duration: 0.3 }}
                className="absolute left-0 right-0 top-[calc(100%+1rem)] z-50 bg-white shadow-xl px-6 sm:px-10 py-6 rounded-xl w-full"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="max-w-screen-xl mx-auto w-full flex flex-col sm:flex-row items-center sm:items-start justify-between gap-y-10 sm:gap-y-0 sm:gap-x-6 text-center sm:text-left">
                  {produkList.map((car, i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, y: 30 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 30 }}
                      transition={{ delay: 0.2 + i * 0.2, duration: 0.5 }}
                      className="flex flex-col items-center text-center w-full sm:w-auto"
                    >
                      <Image
                        src={car.img}
                        alt={car.name}
                        width={250}
                        height={150}
                        className="object-contain"
                      />
                      <p className="font-bold mt-4 text-center">{car.name}</p>
                      <div className="flex flex-col sm:flex-row gap-2 mt-2 items-center">
                        <Dialog open={open} onOpenChange={setOpen}>
                          <DialogTrigger asChild>
                            <Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-full hover:cursor-pointer">
                              TEST DRIVE
                            </Button>
                          </DialogTrigger>
                          <DialogContent className="sm:max-w-[1400px] h-[600px]">
                            <div className="flex items-center gap-4">
                              <Image
                                src="/masjaecoonav.png"
                                alt="MAS JAECOO Logo"
                                width={300}
                                height={30}
                                className=" object-fill"
                              />
                            </div>
                            <DialogHeader>
                              <DialogTitle className="text-4xl text-center mb-4 font-bold">
                                FORM TEST DRIVE
                              </DialogTitle>
                            </DialogHeader>

                            {/* Form */}
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
                              <Input placeholder="Nama" />
                              <Input placeholder="Email" />
                              <Input placeholder="Mobile Number" />
                              <Input placeholder="Location" />
                            </div>

                            <div className="mt-3 px-10">
                              <Textarea placeholder="Full Message" rows={4} />
                            </div>

                            <div className="mt-6 text-left ml-10">
                              <Button
                                onClick={() => setOpen(false)}
                                className="bg-[#1F6779] text-white rounded-full"
                              >
                                SEND INQUIRY
                              </Button>
                            </div>
                          </DialogContent>
                        </Dialog>
                        <Link href={car.link} className="w-[200px]">
                          <Button
                            variant="outline"
                            className="rounded-full px-4 w-full hover:cursor-pointer hover:bg-amber-50"
                          >
                            EXPLORE
                          </Button>
                        </Link>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </li>
        <li className="relative">
          <Button
            variant="ghost"
            onClick={(e) => {
              e.stopPropagation();
              setShowPriceMenu((prev) => !prev);
            }}
            className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
              isActive("/price") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
            }`}
          >
            HARGA <ChevronDown className="w-4 h-4" />
          </Button>

          <AnimatePresence>
            {showPriceMenu && (
              <motion.div
                key="harga-dropdown"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 20 }}
                transition={{ duration: 0.3 }}
                className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="flex flex-col gap-2 px-4">
                  {priceList.map((item, i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 10 }}
                      transition={{ delay: 0.1 * i }}
                    >
                      <Link
                        href={item.link}
                        className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
                      >
                        {item.name}
                      </Link>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </li>
        <li className="relative">
          <Button
            variant="ghost"
            onClick={(e) => {
              e.stopPropagation();
              setShowServiceMenu((prev) => !prev);
            }}
            className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
              isActive("/service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
            }`}
          >
            SERVICES <ChevronDown className="w-4 h-4" />
          </Button>

          <AnimatePresence>
            {showServiceMenu && (
              <motion.div
                key="harga-dropdown"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 20 }}
                transition={{ duration: 0.3 }}
                className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="flex flex-col gap-2 px-4">
                  {serviceList.map((item, i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 10 }}
                      transition={{ delay: 0.1 * i }}
                    >
                      <Link
                        href={item.link}
                        className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
                      >
                        {item.name}
                      </Link>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </li>

        <li className="relative">
          <Button
            variant="ghost"
            onClick={(e) => {
              e.stopPropagation();
              setShowAboutMenu((prev) => !prev);
            }}
            className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
              isActive("/about") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
            }`}
          >
            TENTANG DEALER <ChevronDown className="w-4 h-4" />
          </Button>

          <AnimatePresence>
            {showAboutMenu && (
              <motion.div
                key="harga-dropdown"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 20 }}
                transition={{ duration: 0.3 }}
                className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="flex flex-col gap-2 px-4">
                  {aboutList.map((item, i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 10 }}
                      transition={{ delay: 0.1 * i }}
                    >
                      <Link
                        href={item.link}
                        className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
                      >
                        {item.name}
                      </Link>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </li>
        <li className="relative">
          <Button
            variant="ghost"
            onClick={(e) => {
              e.stopPropagation();
              setShowConsumerMenu((prev) => !prev);
            }}
            className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
              isActive("/customer-service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
            }`}
          >
            LAYANAN KONSUMEN <ChevronDown className="w-4 h-4" />
          </Button>

          <AnimatePresence>
            {showConsumerMenu && (
              <motion.div
                key="harga-dropdown"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 20 }}
                transition={{ duration: 0.3 }}
                className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="flex flex-col gap-2 px-4">
                  {consumerList.map((item, i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 10 }}
                      transition={{ delay: 0.1 * i }}
                    >
                      <Link
                        href={item.link}
                        className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
                      >
                        {item.name}
                      </Link>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </li>
      </ul>

      <div className="hidden sm:block">
        <Link href="/auth">
          <Button className="bg-[#1F6779]">
            <Lock className="w-3 h-3 mr-1" />
            Login
          </Button>
        </Link>
      </div>

      {isMobileMenuOpen && (
        <div className="absolute top-full left-0 right-0 bg-white px-6 py-4 shadow-md flex flex-col gap-4 text-sm font-bold sm:hidden z-40">
          <Link href="/" onClick={() => setIsMobileMenuOpen(false)}>
            <Button
              variant="ghost"
              className={`w-full justify-start ${
                isActive("/") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
              }`}
            >
              HOMEPAGE
            </Button>
          </Link>
          <div className="block lg:hidden w-full">
            <Button
              variant="ghost"
              onClick={() => setShowProdukMenuMobile((prev) => !prev)} // ← FIX
              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
                isActive("/product") || isActive("/produk")
                  ? "bg-[#C2D8E2] text-[#1F3D4A]"
                  : ""
              }`}
            >
              PRODUCTS <ChevronDown className="w-4 h-4" />
            </Button>

            {showProdukMenuMobile && (
              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
                <div className="flex flex-col gap-6">
                  {produkList.map((car, i) => (
                    <div
                      key={i}
                      className="flex flex-col items-center text-center"
                    >
                      <Image
                        src={car.img}
                        alt={car.name}
                        width={250}
                        height={150}
                        className="object-contain"
                      />
                      <p className="font-bold mt-4">{car.name}</p>

                      <div className="flex flex-col gap-2 mt-2 w-full items-center">
                        <Dialog open={openMobile} onOpenChange={setOpenMobile}>
                          <DialogTrigger asChild>
                            <Button className="bg-[#1F6779] text-white h-[40px] w-full rounded-full hover:cursor-pointer">
                              TEST DRIVE
                            </Button>
                          </DialogTrigger>
                          <DialogContent className="sm:max-w-[1400px] h-[600px]">
                            <div className="flex items-center gap-4">
                              <Image
                                src="/masjaecoonav.png"
                                alt="MAS JAECOO Logo"
                                width={300}
                                height={30}
                                className=" object-fill"
                              />
                            </div>
                            <DialogHeader>
                              <DialogTitle className="text-2xl text-center mb-4 font-bold">
                                FORM TEST DRIVE
                              </DialogTitle>
                            </DialogHeader>

                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 ">
                              <Input placeholder="Nama" />
                              <Input placeholder="Email" />
                              <Input placeholder="Mobile Number" />
                              <Input placeholder="Location" />
                            </div>

                            <div className="mt-3 ">
                              <Textarea placeholder="Full Message" rows={4} />
                            </div>

                            <div className="mt-6 text-left">
                              <Button
                                onClick={() => setOpen(false)}
                                className="bg-[#1F6779] text-white rounded-full"
                              >
                                SEND INQUIRY
                              </Button>
                            </div>
                          </DialogContent>
                        </Dialog>

                        <Link href={car.link} className="w-full">
                          <Button
                            variant="outline"
                            className="rounded-full px-4 w-full hover:cursor-pointer hover:bg-amber-50"
                          >
                            EXPLORE
                          </Button>
                        </Link>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
          <div className="block lg:hidden w-full">
            <Button
              variant="ghost"
              onClick={() => setShowPriceMenuMobile((prev) => !prev)}
              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
                isActive("/price") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
              }`}
            >
              HARGA <ChevronDown className="w-4 h-4" />
            </Button>

            {showPriceMenuMobile && (
              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
                <div className="flex flex-col gap-4">
                  {priceList.map((item, i) => (
                    <Link
                      key={i}
                      href={item.link}
                      onClick={() => {
                        setIsMobileMenuOpen(false);
                        setShowPriceMenuMobile(false);
                      }}
                      className="block w-full"
                    >
                      <Button
                        variant="ghost"
                        className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
                      >
                        {item.name}
                      </Button>
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>
          <div className="block lg:hidden w-full">
            <Button
              variant="ghost"
              onClick={() => setShowServiceMenuMobile((prev) => !prev)}
              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
                isActive("/service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
              }`}
            >
              SERVICES <ChevronDown className="w-4 h-4" />
            </Button>

            {showServiceMenuMobile && (
              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
                <div className="flex flex-col gap-4">
                  {serviceList.map((item, i) => (
                    <Link
                      key={i}
                      href={item.link}
                      onClick={() => {
                        setIsMobileMenuOpen(false);
                        setShowServiceMenuMobile(false);
                      }}
                      className="block w-full"
                    >
                      <Button
                        variant="ghost"
                        className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
                      >
                        {item.name}
                      </Button>
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>
          <div className="block lg:hidden w-full">
            <Button
              variant="ghost"
              onClick={() => setShowAboutMenuMobile((prev) => !prev)}
              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
                isActive("/about") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
              }`}
            >
              TENTANG DEALER JAECOO <ChevronDown className="w-4 h-4" />
            </Button>

            {showAboutMenuMobile && (
              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
                <div className="flex flex-col gap-4">
                  {aboutList.map((item, i) => (
                    <Link
                      key={i}
                      href={item.link}
                      onClick={() => {
                        setIsMobileMenuOpen(false);
                        setShowAboutMenuMobile(false);
                      }}
                      className="block w-full"
                    >
                      <Button
                        variant="ghost"
                        className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
                      >
                        {item.name}
                      </Button>
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>
          <div className="block lg:hidden w-full">
            <Button
              variant="ghost"
              onClick={() => setShowConsumerMenuMobile((prev) => !prev)}
              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
                isActive("/customer-service")
                  ? "bg-[#C2D8E2] text-[#1F3D4A]"
                  : ""
              }`}
            >
              LAYANAN KONSUMEN <ChevronDown className="w-4 h-4" />
            </Button>

            {showConsumerMenuMobile && (
              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
                <div className="flex flex-col gap-4">
                  {consumerList.map((item, i) => (
                    <Link
                      key={i}
                      href={item.link}
                      onClick={() => {
                        setIsMobileMenuOpen(false);
                        setShowConsumerMenuMobile(false);
                      }}
                      className="block w-full"
                    >
                      <Button
                        variant="ghost"
                        className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
                      >
                        {item.name}
                      </Button>
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>
          <Link href="/auth" onClick={() => setIsMobileMenuOpen(false)}>
            <Button className="bg-[#1F6779] w-full justify-start">
              <Lock className="w-3 h-3 mr-1" />
              Login
            </Button>
          </Link>
        </div>
      )}
    </nav>
  );
}