"use client";

import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const closeAllMenus = () => {
    setIsMenuOpen(false);
  };

  const menuItems = [
    { href: "/", label: "Home" },
    { href: "/about", label: "About" },
    { href: "/teamMember", label: "Our Team" },
    { href: "/education-training", label: "Academics & Research" },
    { href: "/services", label: "Services" },
    { href: "/events", label: "Events" },
    { href: "/publications", label: "Blogs" },
    { href: "/career", label: "Career" },
    { href: "/contact", label: "Contact Us" },
  ];

  return (
    <header className="sticky bg-white top-0 z-50 shadow-sm">
      <div className="container max-w-none mx-auto px-4 sm:px-6">
        <div className="flex justify-between items-center py-3 sm:py-4">
          {/* Left Logo */}
          <div className="flex-shrink-0">
            <Link href="/" onClick={closeAllMenus} className="flex items-center">
              <div className="relative w-60 sm:w-80 h-14 sm:h-18 mr-3 rounded overflow-hidden">
                <Image
                  src="/images/cmclogo2.svg"
                  alt="CMC Logo"
                  fill
                  className="object-fill"
                  priority
                />
              </div>
            </Link>
          </div>

          {/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center space-x-3 xl:space-x-5">
            {menuItems.map((item, idx) => (
              <Link
                key={idx}
                href={item.href}
                className="text-blue-900 hover:text-red-600 transition-colors font-medium text-sm xl:text-base whitespace-nowrap"
                onClick={closeAllMenus}
              >
                {item.label}
              </Link>
            ))}
          </nav>

          {/* Right side - Logo with Batch ID and Mobile Menu Button */}
          <div className="flex items-center gap-4">
            {/* Right Logo with Batch ID */}
            <div className="flex flex-col items-center">
              <div className="relative w-16 h-16 sm:w-20 sm:h-20 rounded overflow-hidden">
                <Image
                  src="/images/rightlogo.png"
                  alt="Batch Logo"
                  fill
                  className="object-contain"
                  priority
                />
              </div>
              <span className="text-xs sm:text-sm font-semibold text-blue-900 mt-1 whitespace-nowrap">
                H-2024-1431
              </span>
            </div>

            {/* Mobile menu button */}
            <button
              className="lg:hidden p-2 text-blue-900 hover:text-red-600 transition-colors"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                {isMenuOpen ? (
                  <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>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="lg:hidden bg-gray-100 border-t border-blue-900">
          <nav className="px-4 py-4">
            <ul className="space-y-4">
              {menuItems.map((item, idx) => (
                <li key={idx}>
                  <Link
                    href={item.href}
                    className="block font-medium py-2 text-blue-900 hover:text-red-600 transition-colors"
                    onClick={closeAllMenus}
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      )}
    </header>
  );
};

export default Header;