ignum/components/layout/navbar.tsx

'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { ChevronDown, Phone, Menu, X } from 'lucide-react';

export function Navbar() {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  // Prevent body scroll when mobile menu is open
  useEffect(() => {
    if (isMobileMenuOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }
  }, [isMobileMenuOpen]);

  return (
    <>
      <nav className={`fixed top-0 left-0 right-0 z-50 border-b border-gray-400/50 ${scrolled && 'bg-black'} transition`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            {/* Logo */}
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
                <div className="w-6 h-6 bg-white rounded-full"></div>
              </div>
              <span className="text-white font-bold text-lg tracking-wider">FIREFORCE</span>
            </div>

            {/* Desktop Navigation Menu */}
            <div className="hidden lg:flex items-center gap-8">
              <Link href="/" className="text-white text-sm font-semibold hover:text-red-500 transition">
                HOME
              </Link>
              <Link href="/about" className="text-white text-sm font-semibold hover:text-red-500 transition">
                ABOUT
              </Link>
              
              {/* Pages Dropdown */}
              <div className="relative">
                <button
                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                  className="text-white text-sm font-semibold hover:text-red-500 transition flex items-center gap-1"
                >
                  PAGES
                  <ChevronDown size={16} />
                </button>
                {isDropdownOpen && (
                  <div className="absolute top-full left-0 mt-2 w-40 bg-white rounded-md shadow-lg font-semibold">
                    <Link
                      href="/faq"
                      className="block px-4 py-2 text-black text-sm hover:bg-red-600 hover:text-white rounded-t-md"
                    >
                      FAQ
                    </Link>
                    <Link
                      href="/services"
                      className="block px-4 py-2 text-black text-sm hover:bg-red-600 hover:text-white rounded-b-md"
                    >
                      Services
                    </Link>
                    <Link
                      href="/services"
                      className="block px-4 py-2 text-black text-sm hover:bg-red-600 hover:text-white rounded-b-md"
                    >
                      Blog
                    </Link>
                  </div>
                )}
              </div>
              
              <Link href="/blog" className="text-white text-sm font-semibold hover:text-red-500 transition">
                Products
              </Link>
              <Link href="/contact" className="text-white text-sm font-semibold hover:text-red-500 transition">
                CONTACT
              </Link>
            </div>

            {/* Emergency Call Button - Hidden on mobile */}
            <div className="hidden lg:flex items-center gap-3 bg-red-600 px-4 py-2 rounded-full">
              <Phone size={20} className="text-white" />
              <div>
                <div className="text-white text-xs font-semibold">Emergency Call!</div>
                <div className="text-white text-sm font-bold">+123-456-7890</div>
              </div>
            </div>

            {/* Mobile Menu Button */}
            <button
              onClick={() => setIsMobileMenuOpen(true)}
              className="lg:hidden text-white p-2 hover:bg-red-600 rounded-md transition"
            >
              <Menu size={24} />
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile Menu Overlay */}
      <div
        className={`fixed inset-0 bg-black/50 z-50 transition-opacity duration-300 lg:hidden ${
          isMobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
        }`}
        onClick={() => setIsMobileMenuOpen(false)}
      />

      {/* Mobile Menu Sidebar */}
      <div
        className={`fixed top-0 left-0 bottom-0 w-80 bg-black z-50 transform transition-transform duration-300 ease-in-out lg:hidden ${
          isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        {/* Mobile Menu Header */}
        <div className="flex justify-between items-center p-6 border-b border-gray-700">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
              <div className="w-6 h-6 bg-white rounded-full"></div>
            </div>
            <span className="text-white font-bold text-lg tracking-wider">FIREFORCE</span>
          </div>
          <button
            onClick={() => setIsMobileMenuOpen(false)}
            className="text-white p-2 hover:bg-red-600 rounded-md transition"
          >
            <X size={24} />
          </button>
        </div>

        {/* Mobile Menu Links */}
        <div className="flex flex-col p-6 gap-4">
          <Link
            href="/"
            className="text-white text-base font-semibold hover:text-red-500 transition py-2"
            onClick={() => setIsMobileMenuOpen(false)}
          >
            HOME
          </Link>
          <Link
            href="/about"
            className="text-white text-base font-semibold hover:text-red-500 transition py-2"
            onClick={() => setIsMobileMenuOpen(false)}
          >
            ABOUT
          </Link>

          {/* Mobile Pages Dropdown */}
          <div>
            <button
              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
              className="text-white text-base font-semibold hover:text-red-500 transition flex items-center gap-1 py-2 w-full"
            >
              PAGES
              <ChevronDown size={16} className={`transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
            </button>
            {isDropdownOpen && (
              <div className="ml-4 mt-2 flex flex-col gap-2">
                <Link
                  href="/faq"
                  className="text-white/80 text-sm hover:text-red-500 transition py-2"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  FAQ
                </Link>
                <Link
                  href="/services"
                  className="text-white/80 text-sm hover:text-red-500 transition py-2"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  Services
                </Link>
              </div>
            )}
          </div>

          <Link
            href="/blog"
            className="text-white text-base font-semibold hover:text-red-500 transition py-2"
            onClick={() => setIsMobileMenuOpen(false)}
          >
            BLOG
          </Link>
          <Link
            href="/contact"
            className="text-white text-base font-semibold hover:text-red-500 transition py-2"
            onClick={() => setIsMobileMenuOpen(false)}
          >
            CONTACT
          </Link>
        </div>
      </div>
    </>
  );
}