import { useState, useEffect } from "react";
import { ChevronDown, Menu, X } from "lucide-react";
import { HashLink } from "react-router-hash-link";

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false); // dropdown portfolio
  const [mobileMenu, setMobileMenu] = useState(false); // toggle mobile
  const [scrolled, setScrolled] = useState(false);

  // Deteksi scroll
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const linkClass = `block px-4 py-2 hover:text-yellow-400 transition-colors`;

  return (
    <header
      className={`fixed w-full top-0 z-20 transition-all duration-300 ${
        scrolled ? "bg-white shadow-md" : "bg-transparent"
      }`}
    >
      <nav className="max-w-7xl mx-auto flex items-center justify-between px-6 lg:px-12 py-4 relative">
        {/* Logo */}
        <div className="flex items-center space-x-2">
          <img src="/WTell.png" alt="logo" className="h-8" />
          <span
            className={`text-lg font-bold transition-colors duration-300 ${
              scrolled ? "text-black" : "text-white"
            }`}
          >
            WTell
          </span>
        </div>

        {/* Menu Desktop */}
        <ul
          className={`hidden md:flex items-center space-x-8 font-medium transition-colors duration-300 ${
            scrolled ? "text-black" : "text-white"
          }`}
        >
          <li>
            <HashLink smooth to="/#" className="hover:text-yellow-400">
              Home
            </HashLink>
          </li>

          {/* Dropdown Portofolio */}
          <li className="relative group">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className="hover:text-yellow-400 flex items-center gap-1"
            >
              Portofolio
              <ChevronDown
                size={18}
                className={`transition-transform duration-200 ${
                  isOpen ? "rotate-180" : ""
                }`}
              />
            </button>

            {isOpen && (
              <ul className="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg text-black">
                <li>
                  <HashLink to="/sdm" className={linkClass}>
                    SDM
                  </HashLink>
                </li>
                <li>
                  <HashLink to="/alat-kerja" className={linkClass}>
                    Alat Kerja
                  </HashLink>
                </li>
                <li>
                  <HashLink to="/produksi" className={linkClass}>
                    Produksi
                  </HashLink>
                </li>
                <li>
                  <HashLink to="/pengalaman" className={linkClass}>
                    Pengalaman
                  </HashLink>
                </li>
              </ul>
            )}
          </li>

          <li>
            <HashLink to="/about" className="hover:text-yellow-400">
              About Us
            </HashLink>
          </li>
          <li>
            <HashLink smooth to="/#footer" className="hover:text-yellow-400">
              Contact Us
            </HashLink>
          </li>
        </ul>

        {/* Hamburger Mobile */}
        <button
          onClick={() => setMobileMenu(!mobileMenu)}
          className={`md:hidden text-2xl focus:outline-none transition-colors duration-300 ${
            scrolled ? "text-black" : "text-white"
          }`}
        >
          {mobileMenu ? <X /> : <Menu />}
        </button>
      </nav>

      {/* Menu Mobile */}
      {mobileMenu && (
        <div
          className={`md:hidden fixed top-0 right-0 w-2/3 h-screen bg-white shadow-lg z-30 transform transition-transform duration-300 ${
            mobileMenu ? "translate-x-0" : "translate-x-full"
          }`}
        >
          <div className="flex justify-end p-4">
            <button onClick={() => setMobileMenu(false)}>
              <X size={28} />
            </button>
          </div>

          <ul className="flex flex-col space-y-4 px-6 font-medium text-gray-800">
            <li>
              <HashLink
                smooth
                to="/#"
                onClick={() => setMobileMenu(false)}
                className={linkClass}
              >
                Home
              </HashLink>
            </li>

            {/* Dropdown Portofolio di Mobile */}
            <li>
              <button
                onClick={() => setIsOpen(!isOpen)}
                className="w-full flex justify-between items-center px-4 py-2 hover:bg-gray-100 rounded-lg"
              >
                Portofolio
                <ChevronDown
                  size={18}
                  className={`transition-transform ${
                    isOpen ? "rotate-180" : ""
                  }`}
                />
              </button>
              {isOpen && (
                <ul className="ml-4 mt-2 space-y-2 text-sm">
                  <li>
                    <HashLink
                      to="/sdm"
                      className="block px-4 py-2 hover:text-yellow-400 rounded"
                      onClick={() => setMobileMenu(false)}
                    >
                      SDM
                    </HashLink>
                  </li>
                  <li>
                    <HashLink
                      to="/alat-kerja"
                      className="block px-4 py-2 hover:text-yellow-400 rounded"
                      onClick={() => setMobileMenu(false)}
                    >
                      Alat Kerja
                    </HashLink>
                  </li>
                  <li>
                    <HashLink
                      to="/produksi"
                      className="block px-4 py-2 hover:text-yellow-400 rounded"
                      onClick={() => setMobileMenu(false)}
                    >
                      Produksi
                    </HashLink>
                  </li>
                  <li>
                    <HashLink
                      to="/pengalaman"
                      className="block px-4 py-2 hover:text-yellow-400 rounded"
                      onClick={() => setMobileMenu(false)}
                    >
                      Pengalaman
                    </HashLink>
                  </li>
                </ul>
              )}
            </li>

            <li>
              <HashLink
                to="/about"
                onClick={() => setMobileMenu(false)}
                className={linkClass}
              >
                About Us
              </HashLink>
            </li>
            <li>
              <HashLink
                smooth
                to="/#footer"
                onClick={() => setMobileMenu(false)}
                className={linkClass}
              >
                Contact Us
              </HashLink>
            </li>
          </ul>
        </div>
      )}
    </header>
  );
}
