Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/layout/Header.tsx

@@ -5,15 +5,16 @@ 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 { InstantSearch } from "@/components/layout/InstantSearch";
+import { MegaMenu } from "@/components/layout/MegaMenu";
 import { customerPortalUrl } from "@/lib/config";
-import { applianceGroups, categories, navLinks, site } from "@/lib/data";
+import { navLinks, site } from "@/lib/data";
+import type { NavCategory } from "@/lib/categories";
 
-export function Header() {
+export function Header({ categories = [] }: { categories?: NavCategory[] }) {
   const [open, setOpen] = useState(false);
-  const [partsOpen, setPartsOpen] = useState(false);
-  const [appliancesOpen, setAppliancesOpen] = useState(false);
-  const [mobileParts, setMobileParts] = 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">
@@ -38,83 +39,26 @@ export function Header() {
 
           <div
             className="relative"
-            onMouseEnter={() => setAppliancesOpen(true)}
-            onMouseLeave={() => setAppliancesOpen(false)}
+            onMouseEnter={() => setMegaOpen(true)}
+            onMouseLeave={() => setMegaOpen(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">
-              قطعات
+            <Link href="/products" 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}
+            <MegaMenu open={megaOpen} categories={categories} />
           </div>
 
           {navLinks
-            .filter((link) => link.href !== "/" && link.href !== "/#parts")
+            .filter((link) => link.href !== "/" && link.href !== "/products")
             .map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className="px-3 py-2 text-[14px] hover:text-brand"
-              >
+              <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" />
+        <InstantSearch className="ms-auto hidden max-w-xs flex-1 md:block" />
 
         <a
           href={customerPortalUrl}
@@ -139,30 +83,40 @@ export function Header() {
               </button>
             </div>
             <div className="flex flex-1 flex-col gap-1 overflow-y-auto p-4 text-[15px]">
-              <HeaderSearch className="mb-3" />
+              <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={() => setMobileParts((value) => !value)}
+                onClick={() => setMobileCats((value) => !value)}
               >
-                دسته‌بندی قطعات
-                <ChevronDown className={`size-4 transition ${mobileParts ? "rotate-180" : ""}`} />
+                دسته‌بندی‌ها
+                <ChevronDown className={`size-4 transition ${mobileCats ? "rotate-180" : ""}`} />
               </button>
-              {mobileParts
+              {mobileCats
                 ? 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>
+                    <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) => (
+                        <Link
+                          key={child.id}
+                          href={child.href}
+                          className="block py-1 text-[12px] text-muted"
+                          onClick={() => setOpen(false)}
+                        >
+                          {child.title}
+                        </Link>
+                      ))}
+                    </div>
                   ))
                 : null}
               <a href={customerPortalUrl} className="mt-4 rounded-xl bg-brand px-4 py-3 text-center text-white">