"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { ArrowRight, Menu, X } from "lucide-react";
import { navLinks } from "@/lib/content";
import { useScrolled } from "@/hooks/use-scrolled";
import Logo from "@/components/Logo";

type HeaderProps = {
  /** Always render the solid (scrolled) header — used on inner pages that have no hero behind it. */
  forceSolid?: boolean;
};

export default function Header({ forceSolid = false }: HeaderProps) {
  const scrolled = useScrolled(12) || forceSolid;
  const [open, setOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  useEffect(() => {
    if (!open) return;
    function onKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [open]);

  return (
    <header
      className={`fixed inset-x-0 top-0 z-50 transition-all duration-300 ${
        scrolled || open
          ? "border-b border-slate-200/80 bg-white/80 backdrop-blur-xl"
          : "border-b border-transparent bg-transparent"
      }`}
    >
      <div className="container">
        <nav className="flex h-16 items-center justify-between sm:h-20" aria-label="Primary">
          <Link href="/" aria-label="Vasundhara Infotech home">
            <Logo />
          </Link>

          <ul className="hidden items-center gap-0 lg:flex xl:gap-1">
            {navLinks.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  className="group relative rounded-lg px-2 py-2 text-[13px] font-medium text-ink-300 transition-colors hover:text-slate-900 xl:px-3.5 xl:text-base"
                >
                  {link.label}
                  <span className="absolute inset-x-2 -bottom-0.5 xl:inset-x-3.5 h-px origin-left scale-x-0 bg-accent transition-transform duration-300 group-hover:scale-x-100" />
                </Link>
              </li>
            ))}
          </ul>

          <div className="hidden items-center lg:flex">
            <Link href="/careers" className="btn-primary group">
              Join Us
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
            </Link>
          </div>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-900 lg:hidden"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            aria-controls="mobile-nav"
          >
            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </nav>
      </div>

      <div id="mobile-nav" className={`lg:hidden ${open ? "pointer-events-auto" : "pointer-events-none"}`}>
        <div
          className={`absolute inset-x-0 top-16 origin-top border-b border-slate-200/80 bg-white/95 backdrop-blur-xl transition-all duration-300 sm:top-20 ${
            open ? "visible translate-y-0 opacity-100" : "invisible -translate-y-2 opacity-0"
          }`}
        >
          <div className="container py-6">
            <ul className="flex flex-col gap-1">
              {navLinks.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    onClick={() => setOpen(false)}
                    className="flex items-center justify-between rounded-xl px-4 py-3 text-base font-medium text-ink-300 transition-colors hover:bg-slate-50 hover:text-slate-900"
                  >
                    {link.label}
                    <ArrowRight className="h-4 w-4 text-ink-400" />
                  </Link>
                </li>
              ))}
            </ul>
            <div className="mt-4">
              <Link href="/careers" onClick={() => setOpen(false)} className="btn-primary w-full">
                Join Us
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}