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 { HeaderSearch } from "@/components/layout/HeaderSearch";
import { customerPortalUrl } from "@/lib/config";
import { applianceGroups, categories, navLinks, site } from "@/lib/data";

export function Header() {
  const [open, setOpen] = useState(false);
  const [partsOpen, setPartsOpen] = useState(false);
  const [appliancesOpen, setAppliancesOpen] = useState(false);
  const [mobileParts, setMobileParts] = 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 items-center lg:flex">
          <Link href="/" className="px-3 py-2 text-[14px] hover:text-brand">
            خانه
          </Link>

          <div
            className="relative"
            onMouseEnter={() => setAppliancesOpen(true)}
            onMouseLeave={() => setAppliancesOpen(false)}
          >
            <button type="button" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
              لوازم برقی
              <ChevronDown className="size-3.5" />
            </button>
            {appliancesOpen ? (
              <div className="absolute right-0 top-full w-[560px] border border-line bg-white p-6 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
                <div className="grid grid-cols-2 gap-8">
                  {applianceGroups.map((group) => (
                    <div key={group.title}>
                      <p className="mb-3 border-r-2 border-brand pr-2 text-[13px] font-bold">{group.title}</p>
                      <ul className="space-y-1.5 text-[13px] text-muted">
                        {group.items.map((item) => (
                          <li key={item}>
                            <Link href="/#parts" className="hover:text-brand">
                              {item}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </div>
            ) : null}
          </div>

          <div
            className="relative"
            onMouseEnter={() => setPartsOpen(true)}
            onMouseLeave={() => setPartsOpen(false)}
          >
            <Link href="/#parts" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
              قطعات
              <ChevronDown className="size-3.5" />
            </Link>
            {partsOpen ? (
              <div className="absolute right-0 top-full w-[720px] border border-line bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
                <div className="grid grid-cols-4 gap-3">
                  {categories.map((category) => (
                    <Link key={category.id} href="/#parts" className="group flex items-center gap-2 p-1.5 hover:bg-paper">
                      <Placeholder
                        src={category.image}
                        alt=""
                        className="size-11 shrink-0 object-cover"
                      />
                      <span className="min-w-0">
                        <span className="block truncate text-[12px] font-medium leading-5 group-hover:text-brand">
                          {category.title.replace("قطعات ", "")}
                        </span>
                        <span className="font-latin block text-[9px] tracking-[0.16em] text-muted uppercase">
                          {category.english}
                        </span>
                      </span>
                    </Link>
                  ))}
                </div>
              </div>
            ) : null}
          </div>

          {navLinks
            .filter((link) => link.href !== "/" && link.href !== "/#parts")
            .map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="px-3 py-2 text-[14px] hover:text-brand"
              >
                {link.label}
              </Link>
            ))}
        </nav>

        <HeaderSearch 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]">
              <HeaderSearch className="mb-3" />
              {navLinks.map((link) => (
                <Link key={link.href} href={link.href} className="py-2" onClick={() => setOpen(false)}>
                  {link.label}
                </Link>
              ))}
              <button
                type="button"
                className="flex items-center justify-between py-2"
                onClick={() => setMobileParts((value) => !value)}
              >
                دسته‌بندی قطعات
                <ChevronDown className={`size-4 transition ${mobileParts ? "rotate-180" : ""}`} />
              </button>
              {mobileParts
                ? categories.map((category) => (
                    <Link
                      key={category.id}
                      href="/#parts"
                      className="py-1.5 pe-2 text-[13px] text-muted"
                      onClick={() => setOpen(false)}
                    >
                      {category.title}
                    </Link>
                  ))
                : 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>
  );
}