oms-website-nextjs/components/HeaderSingle.tsx

// components/Header.tsx
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { FiSearch, FiChevronDown, FiClipboard } from "react-icons/fi"; // Added ChevronDown for dropdowns and Clipboard for Demo

// TODO: Ensure this path is correct
const omsLogoUrl = "/oms-logo.svg"; // Or your actual logo file

// Placeholder for Dropdown Menu component (implement separately)
const DropdownMenu = ({
  trigger,
  children,
}: {
  trigger: React.ReactNode;
  children: React.ReactNode;
}) => {
  // Basic structure - Needs state and proper styling for visibility toggle
  return (
    <div className="relative group">
      <button className="flex items-center space-x-1 text-sm font-medium text-gray-700 hover:text-primary focus:outline-none">
        {trigger}
        <FiChevronDown className="w-4 h-4 transition-transform duration-200 group-hover:rotate-180" />
      </button>
      <div className="absolute left-0 mt-2 w-48 bg-light border border-gray-200 rounded-md shadow-lg opacity-0 group-hover:opacity-100 invisible group-hover:visible transition-all duration-200 z-50">
        {children}
      </div>
    </div>
  );
};

const Header = () => {
  // In a real app use: import { usePathname } from 'next/navigation';
  // const pathname = usePathname();
  const pathname = "/"; // Placeholder for example

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

  return (
    <header className="sticky top-0 z-50 bg-light shadow-md">
      <div className="container 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="/"
              className="flex items-center space-x-2"
              title="Owethu Managed Services Home"
            >
              <Image
                src={omsLogoUrl}
                alt="OMS Logo"
                width={40}
                height={40}
                priority
              />
              <span className="text-xl font-bold text-dark hidden sm:inline">
                Owethu Managed Services
              </span>
            </Link>
          </div>

          <nav className="hidden md:flex items-center space-x-6 lg:space-x-8">
            <Link
              href="/"
              className={`text-sm font-medium ${
                isActive("/")
                  ? "text-primary font-semibold"
                  : "text-gray-700 hover:text-primary"
              }`}
            >
              Home
            </Link>

            {/* About Us Dropdown */}
            <DropdownMenu trigger={<span>About Us</span>}>
              <Link
                href="/about"
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
              >
                Company Overview
              </Link>
              <Link
                href="/about#team"
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
              >
                Our Team
              </Link>
              {/* Add other sub-links if needed */}
            </DropdownMenu>

            {/* Services Dropdown */}
            <DropdownMenu trigger={<span>Services</span>}>
              <Link
                href="/services/resource-augmentation"
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
              >
                Resource Augmentation
              </Link>
              <Link
                href="/services/project-management"
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
              >
                Project Management
              </Link>
              <Link
                href="/services/product-development"
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
              >
                Product Development
              </Link>
            </DropdownMenu>

            {/* Products Dropdown */}
            <DropdownMenu trigger={<span>Products</span>}>
              <Link
                href="/products/obse"
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
              >
                OBSE
              </Link>
              {/* Add other products if any */}
            </DropdownMenu>

            {/* Join Our Team Dropdown */}
            <DropdownMenu trigger={<span>Join Our Team</span>}>
              <Link
                href="/join-us/vacancies"
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
              >
                Vacancies
              </Link>
              <Link
                href="/join-us/portal"
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
              >
                Recruitment Portal
              </Link>
            </DropdownMenu>

            <Link
              href="/contact"
              className={`text-sm font-medium ${
                isActive("/contact")
                  ? "text-primary font-semibold"
                  : "text-gray-700 hover:text-primary"
              }`}
            >
              Contact Us
            </Link>
          </nav>

          <div className="flex items-center space-x-4">
            <button
              className="text-gray-600 hover:text-primary focus:outline-none"
              title="Search"
            >
              <FiSearch className="w-5 h-5" />
              <span className="sr-only">Search</span>
            </button>

            <Link
              href="/request-demo" // Link to a demo request page or section
              className="flex items-center text-sm font-medium bg-primary text-dark px-3 py-1.5 rounded-md hover:bg-primary/90 transition-colors"
              title="Request a Demo"
            >
              <FiClipboard className="w-4 h-4 mr-1.5" />
              Request OBSE Demo
            </Link>
          </div>

          <div className="md:hidden flex items-center">
            <button className="text-gray-600 focus:outline-none">
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M4 6h16M4 12h16m-7 6h7"
                ></path>
              </svg>
              <span className="sr-only">Open menu</span>
            </button>
            {/* Mobile menu component would go here */}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;