moalem-shop/src/components/Header.tsx

"use client";

import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import SearchBox from "./SearchBox";
import AccountMenu from "./AccountMenu";
import CartButton from "./CartButton";
import { ChevronDown, GridIcon, PhoneIcon } from "./icons";
import { MAIN_NAV, PHONE, PHONE_HREF, SITE_NAME } from "@/data/site";
import { categoryHref } from "@/lib/slug";
import type { AuthUser, CategoryNode } from "@/lib/types";

// Two rows: logo + search + account/cart, then the product mega menu and the
// main nav — the same split the reference storefront uses.
export default function Header({
  menu,
  user,
  logoUrl,
}: {
  menu: CategoryNode[];
  user: AuthUser | null;
  logoUrl: string;
}) {
  const [megaOpen, setMegaOpen] = useState(false);

  return (
    <header className="sticky top-0 z-40 w-full border-b border-line bg-white">
      <div className="boxed">
        {/* Mobile keeps the header down to the search box alone — account,
            cart and browsing live in the fixed bottom bar instead. The row
            is taller on lg so the desktop logo has room without cramming
            the search box/buttons beside it. */}
        <div className="flex h-[70px] items-center gap-4 lg:h-25">
          <Link href="/" className="hidden shrink-0 lg:block" aria-label={SITE_NAME}>
            {/* h-[70px] w-auto (not a fixed box) so a square dashboard logo
                mark and the wide fallback wordmark both render undistorted. */}
            <Image
              src={logoUrl}
              alt={SITE_NAME}
              width={180}
              height={70}
              className="h-[70px] w-auto object-contain"
              priority
            />
          </Link>

          <div className="flex-1">
            <SearchBox />
          </div>

          <div className="mr-auto hidden items-center gap-2 lg:flex">
            <AccountMenu user={user} />
            <CartButton className="flex h-11 items-center gap-2 rounded-xl bg-brand px-3 text-[13px] text-white transition hover:bg-brand-dark" />
          </div>
        </div>

        <nav className="hidden h-12 items-center gap-6 text-[13px] lg:flex">
          <div
            className="relative h-full"
            onMouseEnter={() => setMegaOpen(true)}
            onMouseLeave={() => setMegaOpen(false)}
          >
            <button
              className="flex h-full items-center gap-2 font-bold text-ink transition hover:text-brand"
              aria-expanded={megaOpen}
            >
              <GridIcon className="size-5" />
              منو محصولات
              <ChevronDown className="size-4" />
            </button>

            {megaOpen && menu.length > 0 && (
              <div className="absolute right-0 top-full z-50 w-[900px] rounded-b-2xl border border-line bg-white p-6 shadow-xl">
                <div className="grid grid-cols-4 gap-x-6 gap-y-5">
                  {menu.map((cat) => (
                    <div key={cat.id}>
                      <Link
                        href={categoryHref(cat.id, cat.nameFa, cat.name)}
                        className="mb-2 block font-bold text-ink transition hover:text-brand"
                      >
                        {cat.nameFa || cat.name}
                      </Link>
                      <ul className="space-y-1.5">
                        {cat.children.slice(0, 6).map((child) => (
                          <li key={child.id}>
                            <Link
                              href={categoryHref(child.id, child.nameFa, child.name)}
                              className="text-[12.5px] text-body transition hover:text-brand"
                            >
                              {child.nameFa || child.name}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>

          {MAIN_NAV.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`transition hover:text-brand ${
                item.highlight ? "font-bold text-brand" : "text-ink-soft"
              }`}
            >
              {item.label}
            </Link>
          ))}

          <a
            href={PHONE_HREF}
            className="mr-auto flex items-center gap-2 text-ink-soft transition hover:text-brand"
          >
            <PhoneIcon className="size-4" />
            <span className="font-bold">{PHONE}</span>
          </a>
        </nav>
      </div>
    </header>
  );
}