"use client";

import { companyInfo } from "@/lib/mock/company";
import { navItems } from "@/lib/utils/nav";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";

export default function Navbar() {
  const pathname = usePathname();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const isActive = (path?: string) => path && pathname === path;

  const linkBase =
    "uppercase transition-colors duration-200 font-medium text-[#666666]";
  const activeStyle = "text-secondary font-semibold";

  return (
    <nav className="bg-white sticky top-0 z-50 shadow-md">
      <div className="max-w-7xl mx-auto flex items-center justify-between px-4 py-4">
        {/* Logo */}
        <Link href="/" className="flex items-center">
          <Image
            src="/images/logo.png"
            alt={companyInfo.name + "logo"}
            width={60}
            height={60}
            className="w-[60px] h-auto"
          />
        </Link>

        {/* Mobile Hamburger */}
        <button
          className="lg:hidden text-secondary flex flex-row items-center uppercase"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          aria-label="Toggle menu"
        >
          Menu
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            {mobileMenuOpen ? (
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            ) : (
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 6h16M4 12h16M4 18h16"
              />
            )}
          </svg>
        </button>

        {/* Desktop Navigation */}
        <div className="hidden lg:flex items-center space-x-8">
          {navItems.map((item, index) => (
            <Link
              key={index}
              href={item.link!}
              className={`${linkBase} ${isActive(item.link) ? activeStyle : "hover:text-secondary"
                }`}
            >
              {item.name}
            </Link>
          ))}

          {/* Desktop CTA */}
          {/* <Link
            href="/service-request"
            className="ml-4 inline-flex items-center justify-center uppercase font-semibold
                       bg-secondary text-white px-5 py-2 rounded-full
                       hover:bg-secondary transition-colors duration-200"
          >
            Request Service
          </Link> */}
        </div>
      </div>

      {/* Mobile Navigation */}
      {mobileMenuOpen && (
        <div className="lg:hidden border-t px-4 py-4 space-y-4 bg-white shadow-inner">
          {navItems.map((item, index) => (
            <Link
              key={index}
              href={item.link!}
              onClick={() => setMobileMenuOpen(false)}
              className={`${linkBase} block ${isActive(item.link) ? activeStyle : "hover:text-secondary"
                }`}
            >
              {item.name}
            </Link>
          ))}

          {/* Mobile CTA */}
          {/* <Link
            href="/service-request"
            onClick={() => setMobileMenuOpen(false)}
            className="block text-center uppercase font-semibold
                       bg-secondary text-white px-4 py-3 rounded-full
                       hover:bg-secondary transition-colors duration-200"
          >
            Request Service
          </Link> */}
        </div>
      )}
    </nav>
  );
}