simode/src/components/Header.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import Logo from "./Logo";
import SearchBox from "./SearchBox";
import {
  BagIcon,
  ChevronDownIcon,
  CloseIcon,
  InstagramIcon,
  MenuIcon,
  TelegramIcon,
  WhatsappIcon,
} from "./icons";
import { headerNavLinks } from "@/data/site";
import { CUSTOMER_PORTAL_URL } from "@/lib/config";
import type { CategoryNode } from "@/lib/types";

const socialLinks = [
  { icon: InstagramIcon, label: "اینستاگرام" },
  { icon: TelegramIcon, label: "تلگرام" },
  { icon: WhatsappIcon, label: "واتساپ" },
];

export default function Header({ categoryColumns }: { categoryColumns: CategoryNode[] }) {
  const [productsOpen, setProductsOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [mobileCategoriesOpen, setMobileCategoriesOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 pt-2 md:pt-3 pb-0">
      <div className="boxed">
        <div className="rounded-2xl shadow-sm border border-line/60">
          {/* Row 1: logo / search / actions */}
          <div className="bg-white rounded-2xl lg:rounded-t-2xl lg:rounded-b-none flex h-16 md:h-20 items-center gap-3 md:gap-6 px-3 md:px-6">
            <button
              type="button"
              className="lg:hidden p-1.5 text-ink shrink-0"
              aria-label="باز کردن منو"
              onClick={() => setMobileOpen(true)}
            >
              <MenuIcon className="size-6" />
            </button>

            <Logo />

            <div className="hidden md:flex flex-1 items-center">
              <SearchBox />
            </div>

            <div className="flex items-center gap-2 md:gap-3 ms-auto md:ms-0">
              <a
                href="#"
                className="relative flex items-center justify-center size-10 md:size-11 rounded-lg border border-line text-ink hover:border-brand hover:text-brand transition-colors"
                aria-label="سبد خرید"
              >
                <BagIcon className="size-5" />
                <span className="absolute -top-1.5 -end-1.5 flex items-center justify-center size-4.5 rounded-full bg-gold text-[10px] font-bold text-ink">
                  0
                </span>
              </a>

              <a
                href={CUSTOMER_PORTAL_URL}
                className="hidden sm:flex items-center gap-1.5 rounded-full bg-brand text-white text-xs md:text-sm font-bold px-4 md:px-5 h-10 md:h-11 hover:bg-brand-dark transition-colors whitespace-nowrap"
              >
                ورود <span className="text-white/50">|</span> ثبت‌نام
              </a>
            </div>
          </div>

          {/* Row 2: nav + socials */}
          <div className="hidden lg:flex bg-brand rounded-b-2xl items-center justify-between h-12 px-4 md:px-6">
            <nav className="flex items-center h-full">
              <div
                className="relative h-full flex items-center"
                onMouseEnter={() => setProductsOpen(true)}
                onMouseLeave={() => setProductsOpen(false)}
              >
                <button
                  type="button"
                  className="flex h-full items-center gap-1.5 px-4 text-sm font-medium text-white/90 hover:text-gold transition-colors"
                >
                  محصولات
                  <ChevronDownIcon className="size-4" />
                </button>

                {productsOpen && categoryColumns.length > 0 && (
                  <div className="absolute top-full start-0 min-w-[420px] bg-white border border-line shadow-lg p-6 flex flex-wrap gap-8 z-50">
                    {categoryColumns.map((col) => (
                      <div key={col.id} className="min-w-[180px]">
                        <Link
                          href={`/products?category=${col.slug}`}
                          className="block font-bold text-ink text-sm mb-2.5 hover:text-brand transition-colors"
                        >
                          {col.nameFa}
                        </Link>
                        <ul className="space-y-1.5">
                          {col.children.map((sub) => (
                            <li key={sub.id}>
                              <Link
                                href={`/products?category=${sub.slug}`}
                                className="text-[13px] text-body hover:text-gold-dark transition-colors"
                              >
                                {sub.nameFa}
                              </Link>
                            </li>
                          ))}
                        </ul>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {headerNavLinks.map((link) => (
                <a
                  key={link.title}
                  href={link.href}
                  className="flex h-full items-center px-4 text-sm font-medium text-white/90 hover:text-gold transition-colors"
                >
                  {link.title}
                </a>
              ))}
            </nav>

            <div className="flex items-center gap-2">
              {socialLinks.map(({ icon: Icon, label }) => (
                <a
                  key={label}
                  href="#"
                  aria-label={label}
                  className="flex items-center justify-center size-8 rounded-md bg-white/10 text-white hover:bg-white/20 transition-colors"
                >
                  <Icon className="size-4" />
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div className="fixed inset-0 z-[60] lg:hidden">
          <div
            className="absolute inset-0 bg-ink/50"
            onClick={() => setMobileOpen(false)}
          />
          <div className="absolute inset-y-0 start-0 w-[82%] max-w-xs bg-white flex flex-col">
            <div className="flex items-center justify-between h-16 px-4 border-b border-line">
              <Logo />
              <button
                type="button"
                onClick={() => setMobileOpen(false)}
                aria-label="بستن منو"
                className="p-2 text-ink"
              >
                <CloseIcon className="size-5" />
              </button>
            </div>
            <div className="p-4 overflow-y-auto">
              <div className="mb-4">
                <SearchBox placeholder="جستجو..." inputHeightClassName="h-10" />
              </div>

              <button
                type="button"
                className="flex w-full items-center justify-between py-3 text-sm font-bold text-ink border-b border-line"
                onClick={() => setMobileCategoriesOpen((v) => !v)}
              >
                محصولات
                <ChevronDownIcon
                  className={`size-4 transition-transform ${
                    mobileCategoriesOpen ? "rotate-180" : ""
                  }`}
                />
              </button>
              {mobileCategoriesOpen && (
                <div className="py-2 ps-3 space-y-3 border-b border-line">
                  {categoryColumns.map((col) => (
                    <div key={col.id}>
                      <Link
                        href={`/products?category=${col.slug}`}
                        className="block text-sm font-bold text-ink"
                        onClick={() => setMobileOpen(false)}
                      >
                        {col.nameFa}
                      </Link>
                      <ul className="mt-1.5 ps-3 space-y-1.5">
                        {col.children.map((sub) => (
                          <li key={sub.id}>
                            <Link
                              href={`/products?category=${sub.slug}`}
                              className="text-sm text-body"
                              onClick={() => setMobileOpen(false)}
                            >
                              {sub.nameFa}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              )}

              {headerNavLinks.map((link) => (
                <a
                  key={link.title}
                  href={link.href}
                  className="block py-3 text-sm font-bold text-ink border-b border-line"
                >
                  {link.title}
                </a>
              ))}

              <a
                href={CUSTOMER_PORTAL_URL}
                className="mt-5 flex items-center justify-center rounded-full bg-brand text-white text-sm font-bold h-11 hover:bg-brand-dark transition-colors"
              >
                ورود / ثبت‌نام
              </a>

              <div className="mt-5 flex items-center justify-center gap-2">
                {socialLinks.map(({ icon: Icon, label }) => (
                  <a
                    key={label}
                    href="#"
                    aria-label={label}
                    className="flex items-center justify-center size-9 rounded-md border border-line text-ink"
                  >
                    <Icon className="size-4" />
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}