import Image from "next/image";
import Link from "next/link";
import CartPopover from "./CartPopover";
import ProfileMenu from "./ProfileMenu";
import ProductsMegaMenu from "./ProductsMegaMenu";
import { buildCategoryTree } from "@/lib/categories";
import { meshkee } from "@/lib/meshkee";

const navLinks = [
  { href: "/blog", label: "بلاگ" },
  { href: "/satisfaction", label: "مشتریان راضی" },
  { href: "/purchaseguide", label: "راهنمای خرید" },
];

export default async function Header() {
  const categoriesRes = await meshkee.getCategories("product").catch(() => ({ items: [] }));
  const categories = buildCategoryTree(categoriesRes.items);

  return (
    <header className="relative sticky top-0 z-50 h-16 border-b border-black/10 bg-white shadow-[0_2px_10px_rgba(0,0,0,0.06)]">
      <div className="mx-auto flex h-full max-w-7xl items-center justify-between gap-6 px-4 sm:px-6 lg:px-8">
        <Link href="/" className="shrink-0">
          <Image
            src="/images/logo.png"
            alt="دکوریا"
            width={110}
            height={36}
            priority
            className="h-9 w-auto"
          />
        </Link>

        <nav className="hidden items-center gap-7 lg:flex">
          <Link
            href="/"
            className="text-sm font-medium text-neutral-700 transition-colors hover:text-primary"
          >
            صفحه اصلی
          </Link>
          <ProductsMegaMenu categories={categories} />
          {navLinks.map((link) => (
            <Link
              key={link.label}
              href={link.href}
              className="text-sm font-medium text-neutral-700 transition-colors hover:text-primary"
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-5">
          <button
            aria-label="جستجو"
            className="inline-flex h-9 w-9 items-center justify-center text-neutral-600 transition-colors hover:text-primary"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" className="h-5 w-5">
              <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8" />
              <path d="m20 20-3.5-3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            </svg>
          </button>

          <CartPopover />

          <ProfileMenu />
        </div>
      </div>
    </header>
  );
}