'use client';
import { useState } from 'react';
import { usePathname } from 'next/navigation';
import { Menu, X, ChevronDown } from 'lucide-react';
import Link from 'next/link';
import Image from 'next/image';

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isPortfolioOpen, setIsPortfolioOpen] = useState(false);
  const pathname = usePathname();

  const closeMenu = () => {
    setIsOpen(false);
    setIsPortfolioOpen(false);
  };

  const isActive = (path: string) => {
  const current = pathname?.replace(/\/$/, ''); // Remove trailing slash
  const target = path.replace(/\/$/, '');       // Normalize href
    return current === target
      ? 'text-[#E77025] font-bold border-b-2 border-[#E77025] hover:text-[#E77025]'
      : 'text-[#000] hover:text-[#E77025]';
    };

  return (
    <nav className="bg-white sticky top-0 z-50">
      {/* <div className="fixed left-3 bottom-3 z-20">
        <a href="https://api.whatsapp.com/send?phone=919924512890&text=Hey Fruxinfo! I am looking for your services." target="_blank">
          <Image src="/images/Main_Whatsapp_Icon.png" width={50} height={50}  alt="WhatsApp"/>
        </a>
      </div> */}

      {pathname !== '/sales-coordinator-career-form' && (
        <div className="fixed left-3 bottom-3 z-20">
          <a href="https://api.whatsapp.com/send?phone=919924512890&text=Hey Fruxinfo! I am looking for your services." target="_blank" rel="noopener noreferrer">
            <Image src="/images/Main_Whatsapp_Icon.png" width={50} height={50} alt="WhatsApp" />
          </a>
        </div>
      )}

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex-shrink-0">
            <Link href="/" onClick={closeMenu}>
              <Image src="/images/Main_logo.png" width={264} height={132} alt="Company Logo" priority fetchPriority="high" className="w-[132px] md:w-[200px] cursor-pointer"/>
            </Link>
          </div>

          <div className="hidden lg:flex space-x-6 items-center">
            {[{ href: '/', label: 'Home' }, { href: '/about', label: 'About' }, { href: '/services', label: 'Services' }, { href: '/career', label: 'Career' }, { href: '/blog', label: 'Blog' }, { href: '/team', label: 'Our Team' }].map(({ href, label }) => (
              <Link key={href} href={href} prefetch className={isActive(href)}>
                {label}
              </Link>
            ))}

            {/* Portfolio */}
            <div className="relative group">
              <button className="flex items-center text-[#000] hover:text-[#E77025]">
                Portfolio <ChevronDown size={16} className="ml-1" />
              </button>
              <div className="absolute left-[-50%] mt-0 hidden group-hover:block bg-white rounded-md shadow-md w-64 p-3">
                <div className="py-2">
                  <Link href="/website-portfolio" className={isActive('/website-portfolio')}>
                    Web Design
                  </Link>
                </div>
                <div className="py-2">
                  <Link href="/application-portfolio" className={isActive('/application-portfolio')}>
                    App Development
                  </Link>
                </div>
              </div>
            </div>

            <Link href="/contact" prefetch className="rounded-sm">
              <div className='py-2 px-3 text-[#FFF] radious bg-[#E77025] rounded-sm'>Contact Us</div>
            </Link>
            
          </div>

          <div className="lg:hidden flex items-center">
            <button onClick={() => setIsOpen(!isOpen)} className="text-[#000] focus:outline-none" aria-label="Open Menu">
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu with Animation (CSS-based — no framer-motion) */}
      {isOpen && (
          <div
            className="nav-menu-anim lg:hidden bg-white text-center border-t border-gray-200 py-4 px-6 rounded-b-md shadow-md"
          >
            {[{ href: '/', label: 'Home' }, { href: '/about', label: 'About' }, { href: '/services', label: 'Services' }, { href: '/career', label: 'Career' }, { href: '/blog', label: 'Blog' }, { href: '/team', label: 'Our Team' }].map(({ href, label }) => (
              <div className="py-2" key={href}>
                <Link href={href} prefetch className={isActive(href)} onClick={closeMenu}>
                  {label}
                </Link>
              </div>
            ))}

            {/* Portfolio dropdown */}
            <div className="py-3">
              <button onClick={() => setIsPortfolioOpen(!isPortfolioOpen)} className="flex justify-center items-center w-full text-left text-[#000] hover:text-[#E77025]">
                Portfolio <ChevronDown size={18} className="ml-2" />
              </button>

              {isPortfolioOpen && (
                  <div
                    className="nav-menu-anim flex flex-col gap-3 pl-5 mt-2 border-l border-gray-300"
                  >
                    <Link href="/website-portfolio" prefetch className={isActive('/website-portfolio')} onClick={closeMenu}>
                      Web Design
                    </Link>
                    <Link href="/application-portfolio" prefetch className={isActive('/application-portfolio')} onClick={closeMenu}>
                      App Development
                    </Link>
                  </div>
                )}
            </div>

            {/* Contact Us Button */}
            <div className="py-3 flex justify-center">
              <Link href="/contact" prefetch onClick={closeMenu}>
                <div className="py-2 px-4 text-center text-white bg-[#E77025] rounded-md shadow-md hover:bg-[#d45f1f] transition-all">
                  Contact Us
                </div>
              </Link>
            </div>
          </div>
        )}
    </nav>
  );
};

export default Navbar;