import { useState, useEffect } from "react";
import { ChevronDown } from "lucide-react";
import { Link } from "react-router-dom";

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  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"
            }`}
          >
            WALANJA
          </span>
        </div>

        {/* Menu */}
        <ul
          className={`flex items-center space-x-8 font-medium transition-colors duration-300 ${
            scrolled ? "text-black" : "text-white"
          }`}
        >
          {/* Home */}
          <li>
            <Link
              to="/"
              className={`hover:text-yellow-400 ${
                !scrolled ? "border-b-2 border-yellow-400 pb-1" : ""
              }`}
            >
              Home
            </Link>
          </li>

          {/* Dropdown Portofolio */}
          <li className="relative">
            <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>
                  <Link
                    to="/sdm"
                    className="block px-4 py-2 hover:bg-yellow-100"
                  >
                    SDM
                  </Link>
                </li>
                <li>
                  <Link
                    to="/alat-kerja"
                    className="block px-4 py-2 hover:bg-yellow-100"
                  >
                    Alat Kerja
                  </Link>
                </li>
                <li>
                  <Link
                    to="/produksi"
                    className="block px-4 py-2 hover:bg-yellow-100"
                  >
                    Produksi
                  </Link>
                </li>
                <li>
                  <Link
                    to="/pengalaman"
                    className="block px-4 py-2 hover:bg-yellow-100"
                  >
                    Pengalaman
                  </Link>
                </li>
              </ul>
            )}
          </li>

          {/* About Us */}
          <li>
            <Link to="/about" className="hover:text-yellow-400">
              About Us
            </Link>
          </li>

          {/* Contact Us */}
          <li>
            <Link to="/contact" className="hover:text-yellow-400">
              Contact Us
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}
