brb-store/components/layout/Header.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { ChevronDown, Menu, UserRound, X } from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { InstantSearch } from "@/components/layout/InstantSearch";
import { MegaMenu } from "@/components/layout/MegaMenu";
import { customerPortalUrl } from "@/lib/config";
import { navLinks, site } from "@/lib/data";
import type { NavCategory } from "@/lib/categories";

export function Header({ categories = [] }: { categories?: NavCategory[] }) {
  const [open, setOpen] = useState(false);
  const [megaOpen, setMegaOpen] = useState(false);
  const [mobileCats, setMobileCats] = useState(false);

  return (
    <header className="sticky top-0 z-40 border-b border-line bg-white/95 backdrop-blur">
      <Container className="flex h-[84px] items-center gap-4">
        <button
          type="button"
          className="grid size-10 place-items-center lg:hidden"
          onClick={() => setOpen(true)}
          aria-label="منو"
        >
          <Menu className="size-5" />
        </button>

        <Link href="/" className="flex h-14 shrink-0 items-center">
          <Placeholder src={site.logo} alt={site.name} className="h-14 w-auto object-contain" />
        </Link>

        <nav className="mx-2 hidden h-14 items-center lg:flex">
          <Link href="/" className="inline-flex h-full items-center px-3 text-[14px] hover:text-brand">
            خانه
          </Link>

          <div
            className="relative flex h-full items-center"
            onMouseEnter={() => setMegaOpen(true)}
            onMouseLeave={() => setMegaOpen(false)}
          >
            <Link href="/products" className="inline-flex h-full items-center gap-1 px-3 text-[14px] hover:text-brand">
              محصولات
              <ChevronDown className="size-3.5" />
            </Link>
            <MegaMenu open={megaOpen} categories={categories} />
          </div>

          {navLinks
            .filter((link) => link.href !== "/" && link.href !== "/products")
            .map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="inline-flex h-full items-center px-3 text-[14px] hover:text-brand"
              >
                {link.label}
              </Link>
            ))}
        </nav>

        <InstantSearch className="ms-auto hidden max-w-xs flex-1 md:block" />

        <a
          href={customerPortalUrl}
          className="flex items-center gap-2 px-2 py-2 text-[13px] hover:text-brand"
          aria-label="ورود به حساب کاربری"
        >
          <UserRound className="size-5" />
          <span className="hidden xl:inline">ورود / ثبت‌نام</span>
        </a>
      </Container>

      {open ? (
        <div className="fixed inset-0 z-50 bg-ink/50 lg:hidden" onClick={() => setOpen(false)}>
          <div
            className="absolute inset-y-0 right-0 flex w-[min(100%,340px)] flex-col bg-white"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex h-[84px] items-center justify-between border-b border-line px-4">
              <Placeholder src={site.logo} alt={site.name} className="h-12 w-auto object-contain" />
              <button type="button" onClick={() => setOpen(false)} aria-label="بستن">
                <X className="size-5" />
              </button>
            </div>
            <div className="flex flex-1 flex-col gap-1 overflow-y-auto p-4 text-[15px]">
              <InstantSearch compact className="mb-3 w-full" />
              {navLinks.map((link) => (
                <Link key={link.href} href={link.href} className="py-2" onClick={() => setOpen(false)}>
                  {link.label}
                </Link>
              ))}
              <Link href="/products" className="py-2" onClick={() => setOpen(false)}>
                محصولات
              </Link>
              <button
                type="button"
                className="flex items-center justify-between py-2"
                onClick={() => setMobileCats((value) => !value)}
              >
                دسته‌بندی‌ها
                <ChevronDown className={`size-4 transition ${mobileCats ? "rotate-180" : ""}`} />
              </button>
              {mobileCats
                ? categories.map((category) => (
                    <div key={category.id} className="space-y-1 pe-2">
                      <Link href={category.href} className="block py-1.5 text-[13px] font-medium" onClick={() => setOpen(false)}>
                        {category.title}
                      </Link>
                      {category.children.map((child) => (
                        <div key={child.id} className="ps-2">
                          <Link
                            href={child.href}
                            className="block py-1 text-[12px] font-medium text-ink"
                            onClick={() => setOpen(false)}
                          >
                            {child.title}
                          </Link>
                          {child.children.map((leaf) => (
                            <Link
                              key={leaf.id}
                              href={leaf.href}
                              className="block py-1 ps-3 text-[12px] text-muted"
                              onClick={() => setOpen(false)}
                            >
                              {leaf.title}
                            </Link>
                          ))}
                        </div>
                      ))}
                    </div>
                  ))
                : null}
              <a href={customerPortalUrl} className="mt-4 rounded-xl bg-brand px-4 py-3 text-center text-white">
                ورود / ثبت‌نام
              </a>
            </div>
          </div>
        </div>
      ) : null}
    </header>
  );
}