"use client";

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

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

  return (
    <header className="sticky top-0 z-50 border-b border-white/60 bg-[rgba(248,251,255,0.82)] backdrop-blur-xl">
      <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-6 px-5 py-4 md:px-8">
        <Link href="/" className="flex items-center gap-3">
          <Image
            src="/bizone.png"
            alt={`${site.name} logo`}
            width={140}
            height={75}
            priority
            className="h-auto w-[120px] md:w-[140px]"
          />
        </Link>

        <nav className="hidden items-center gap-6 text-sm font-semibold text-[var(--muted)] lg:flex">
          {navigation.map((item) => {
            const isActive = pathname === item.href;

            return (
              <Link
                key={item.href}
                href={item.href}
                aria-current={isActive ? "page" : undefined}
                className={`nav-link ${isActive ? "nav-link-active" : ""}`}
              >
                {item.label}
              </Link>
            );
          })}
        </nav>

        <Link href="/contact" className="button button-primary hidden sm:inline-flex">
          Jadwalkan Demo
        </Link>
      </div>
    </header>
  );
}
