"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

const navItems = [
  { label: "首页", href: "/", left: 422 },
  { label: "关于鼎兴", href: "/about", left: 603 },
  { label: "产品", href: "/products", left: 820 },
  { label: "联系我们", href: "/contact", left: 1000 },
];

function isActive(pathname: string, href: string) {
  if (href === "/") return pathname === "/";
  return pathname === href || pathname.startsWith(`${href}/`);
}

export function SiteNav() {
  const pathname = usePathname();

  return (
    <header className="sticky top-0 z-50 h-20 w-full bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
      <div className="relative mx-auto h-full max-w-[1442px]">
        {/* Logo: 201x46 at left=117, top=24 */}
        <Link
          href="/"
          className="absolute left-[117px] top-[24px] h-[46px] w-[201px]"
        >
          <Image
            src="/logo.png"
            alt="鼎兴电子 DINGXING ELECTRONICS"
            width={201}
            height={46}
            className="h-[46px] w-[201px] object-contain"
            priority
          />
        </Link>

        {/* Nav items */}
        <nav className="absolute inset-y-0">
          {navItems.map((item) => {
            const active = isActive(pathname, item.href);
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "absolute top-[29px] whitespace-nowrap text-[18px] font-normal leading-normal transition-colors",
                  active
                    ? "text-[#00d6f9]"
                    : "text-[#02398b] hover:text-[#00d6f9]"
                )}
                style={{ left: item.left }}
              >
                {item.label}
              </Link>
            );
          })}
        </nav>

        {/* Language switcher: icon at left=1273, text at left=1298 */}
        <button
          type="button"
          className="absolute left-[1273px] top-[31px] flex items-center gap-1.5 text-[18px] font-normal text-[#02398b] transition-colors hover:text-[#00d6f9]"
        >
          <svg
            className="size-[20.48px]"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
            <path d="M2 12h20" />
          </svg>
          <span className="absolute left-[25px] top-[-2px] whitespace-nowrap">
            En
          </span>
        </button>
      </div>
    </header>
  );
}
