Connect the storefront to Meshkee catalog, blogs, and static image slots.

Wire homepage specials, product/blog pages, instant search, and the customer portal so the live pharmacy site can be managed from the dashboard.

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

components/layout/Header.tsx

@@ -6,7 +6,6 @@ import {
   ChevronDown,
   Heart,
   Menu,
-  Search,
   ShoppingBag,
   UserRound,
   X,
@@ -14,9 +13,12 @@ import {
 import { Container } from "@/components/Container";
 import { Placeholder } from "@/components/Placeholder";
 import { MegaMenu } from "@/components/layout/MegaMenu";
-import { categories, navLinks, site } from "@/lib/data";
+import { InstantSearch } from "@/components/layout/InstantSearch";
+import { customerPortalUrl } from "@/lib/config";
+import { navLinks, site } from "@/lib/data";
+import type { NavCategory } from "@/lib/categories";
 
-export function Header({ logoSrc }: { logoSrc: string }) {
+export function Header({ logoSrc, categories }: { logoSrc: string; categories: NavCategory[] }) {
   const [megaOpen, setMegaOpen] = useState(false);
   const [mobileOpen, setMobileOpen] = useState(false);
   const [mobileCats, setMobileCats] = useState(false);
@@ -37,32 +39,22 @@ export function Header({ logoSrc }: { logoSrc: string }) {
           <Placeholder src={logoSrc} alt={site.name} className="h-11 w-auto object-contain" />
         </Link>
 
-        <form className="relative hidden min-w-0 flex-1 md:block">
-          <input
-            type="search"
-            placeholder="جستجوی دارو، مکمل و محصولات بهداشتی..."
-            className="h-11 w-full rounded-xl border border-line bg-mist pr-4 pl-11 text-[13px] outline-none transition focus:border-primary focus:bg-white"
-          />
-          <Search className="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted" />
-        </form>
+        <InstantSearch />
 
         <div className="ms-auto flex items-center gap-1">
-          <Link
-            href="#"
+          <a
+            href={customerPortalUrl}
             className="hidden items-center gap-2 rounded-xl px-3 py-2 text-[13px] text-ink hover:bg-mist lg:flex"
           >
             <UserRound className="size-5 text-navy" />
             ورود / ثبت‌نام
-          </Link>
-          <Link href="#" className="grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="علاقه‌مندی">
+          </a>
+          <a href={customerPortalUrl} className="grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="علاقه‌مندی">
             <Heart className="size-5 text-navy" />
-          </Link>
-          <Link href="#" className="relative grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="سبد خرید">
+          </a>
+          <a href={customerPortalUrl} className="relative grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="سبد خرید">
             <ShoppingBag className="size-5 text-navy" />
-            <span className="absolute top-1.5 left-1.5 grid size-4 place-items-center rounded-full bg-primary text-[10px] text-white">
-              ۰
-            </span>
-          </Link>
+          </a>
         </div>
       </Container>
 
@@ -81,7 +73,7 @@ export function Header({ logoSrc }: { logoSrc: string }) {
               دسته‌بندی‌ها
               <ChevronDown className={`size-4 transition ${megaOpen ? "rotate-180" : ""}`} />
             </button>
-            <MegaMenu open={megaOpen} />
+            <MegaMenu open={megaOpen} categories={categories} />
           </div>
 
           {navLinks.map((link) => (
@@ -111,18 +103,14 @@ export function Header({ logoSrc }: { logoSrc: string }) {
                 <X className="size-5" />
               </button>
             </div>
-            <form className="px-4 pt-4">
-              <input
-                type="search"
-                placeholder="جستجو..."
-                className="h-11 w-full rounded-xl border border-line bg-mist px-3 text-[13px] outline-none"
-              />
-            </form>
+            <div className="px-4 pt-4">
+              <InstantSearch compact />
+            </div>
             <nav className="flex-1 overflow-y-auto px-2 py-3">
               <button
                 type="button"
                 className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-right text-[14px] font-medium text-navy"
-                onClick={() => setMobileCats((v) => !v)}
+                onClick={() => setMobileCats((value) => !value)}
               >
                 دسته‌بندی‌ها
                 <ChevronDown className={`size-4 ${mobileCats ? "rotate-180" : ""}`} />
@@ -131,9 +119,19 @@ export function Header({ logoSrc }: { logoSrc: string }) {
                 <ul className="mb-2 space-y-1 pr-3">
                   {categories.map((cat) => (
                     <li key={cat.id}>
-                      <Link href={cat.href} className="block rounded-lg px-3 py-1.5 text-[13px] text-muted">
+                      <Link href={cat.href} className="block rounded-lg px-3 py-1.5 text-[13px] font-medium text-navy" onClick={() => setMobileOpen(false)}>
                         {cat.title}
                       </Link>
+                      {cat.children.map((child) => (
+                        <Link
+                          key={child.id}
+                          href={child.href}
+                          className="block rounded-lg px-3 py-1.5 pr-5 text-[13px] text-muted"
+                          onClick={() => setMobileOpen(false)}
+                        >
+                          {child.title}
+                        </Link>
+                      ))}
                     </li>
                   ))}
                 </ul>
@@ -148,6 +146,9 @@ export function Header({ logoSrc }: { logoSrc: string }) {
                   {link.title}
                 </Link>
               ))}
+              <a href={customerPortalUrl} className="mt-2 block rounded-xl px-3 py-2.5 text-[14px] text-primary">
+                ورود / ثبت‌نام
+              </a>
             </nav>
           </aside>
         </div>