"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useState } from "react";

const navItems = [
  { label: "Home", href: "/" },
  { label: "About Us", href: "/about" },
  { label: "Our Programs", href: "/programs" },
  { label: "Admissions", href: "/admissions" },
  { label: "Contact Us", href: "/contact" },
];

export type HeaderProps = {
  title: string;
  subtitle: string;
  logoUrl: string;
};

export default function Header({ title, subtitle, logoUrl }: HeaderProps) {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  return (
    <>
      <header className="fixed inset-x-0 top-0 z-50 w-full bg-white/95 backdrop-blur-sm border-b border-[#eef1fb]">
        <div className="site-container py-2 flex items-center gap-4">
          <Link
            href="/"
            className="flex items-center gap-2 shrink-0"
            aria-label="Go to homepage"
          >
            <Image
              src={logoUrl}
              alt={`${title} logo`}
              width={54}
              height={54}
              className="object-contain h-10 w-10 md:h-12 md:w-12"
            />
            <div className="flex flex-col leading-tight">
              <span className="text-[13px] md:text-[15px] font-bold tracking-tight text-[#000000]">
                {title}
              </span>
              <span className="text-[11px] md:text-[13px] font-semibold tracking-tight text-[#000000]">
                {subtitle}
              </span>
            </div>
          </Link>

          <nav className="hidden md:block md:ml-auto border border-[#18339a] bg-[#1f3fb8] shadow-sm">
            <ul className="flex items-stretch text-white text-sm md:text-[15px] leading-none font-semibold">
              {navItems.map((item, index) => {
                const active = pathname === item.href;
                return (
                  <li
                    key={item.label}
                    className={
                      index < navItems.length - 1
                        ? "border-r border-[#18339a]"
                        : ""
                    }
                  >
                    <Link
                      href={item.href}
                      className={`block px-4 lg:px-5 py-2 text-center whitespace-nowrap transition-colors ${
                        active ? "bg-white/15" : "hover:bg-white/10"
                      }`}
                    >
                      {item.label}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </nav>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="mobile-menu"
            aria-label={open ? "Close menu" : "Open menu"}
            className="md:hidden ml-auto inline-flex h-10 w-10 items-center justify-center text-[#1f3fb8] border border-[#1f3fb8]"
          >
            {open ? (
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
                className="h-5 w-5"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 6l12 12M6 18 18 6"
                />
              </svg>
            ) : (
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
                className="h-5 w-5"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M4 7h16M4 12h16M4 17h16"
                />
              </svg>
            )}
          </button>
        </div>

        {open && (
          <nav
            id="mobile-menu"
            className="md:hidden border-t border-[#eef1fb] bg-white"
          >
            <ul className="site-container py-3 flex flex-col">
              {navItems.map((item) => {
                const active = pathname === item.href;
                return (
                  <li key={item.label}>
                    <Link
                      href={item.href}
                      onClick={() => setOpen(false)}
                      className={`block py-3 text-sm font-semibold border-b border-[#eef1fb] ${
                        active
                          ? "text-[#1f3fb8]"
                          : "text-[#132b87] hover:text-[#1f3fb8]"
                      }`}
                    >
                      {item.label}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </nav>
        )}
      </header>

      <div aria-hidden="true" className="h-16 md:h-19" />
    </>
  );
}
