nini-naderi/src/components/Header.tsx

"use client";

import Link from "next/link";
import { useState } from "react";
import { categories, navLinks } from "@/data/content";
import { toFaDigits } from "@/lib/format";
import { IconBag, IconChevronDown, IconClose, IconHeart, IconMenu, IconSearch, IconUser } from "./Icons";

export function Header() {
  const [open, setOpen] = useState(false);
  const [mega, setMega] = useState(false);
  const [mobileCats, setMobileCats] = useState(false);

  const closeAll = () => {
    setOpen(false);
    setMega(false);
    setMobileCats(false);
  };

  return (
    <header className="sticky top-0 z-40 border-b border-white/50 bg-white/40 backdrop-blur-2xl">
      <div className="container-nn">
        <div className="flex h-[72px] items-center gap-3">
          <button
            type="button"
            className="text-ink lg:hidden"
            onClick={() => setOpen((value) => !value)}
            aria-label={open ? "بستن منو" : "باز کردن منو"}
          >
            {open ? <IconClose /> : <IconMenu />}
          </button>

          <Link href="/" className="flex items-center gap-2.5">
            <span className="grid size-11 place-items-center rounded-2xl bg-linear-to-br from-purple-600 via-cyan-500 to-rose-500 text-white shadow-card">
              <span className="font-display text-lg leading-none">NN</span>
            </span>
            <span className="leading-tight">
              <span className="font-display block text-[15px] text-purple-700">Nini Naderi</span>
              <span className="block text-sm font-bold text-ink">نینی نادری</span>
            </span>
          </Link>

          <form className="relative mx-auto hidden min-w-0 flex-1 max-w-xl md:block">
            <input
              type="search"
              placeholder="جستجوی لباس نوزاد، دخترانه، یگانه..."
              className="h-11 w-full rounded-full border border-line bg-purple-50/60 pr-4 pl-11 text-sm outline-none transition focus:border-purple-500 focus:bg-white"
            />
            <span className="pointer-events-none absolute top-1/2 left-3.5 -translate-y-1/2 text-muted">
              <IconSearch />
            </span>
          </form>

          <div className="ms-auto flex items-center gap-1 sm:gap-2">
            <a href="#" className="hidden items-center gap-1.5 rounded-full px-3 py-2 text-sm text-ink hover:bg-purple-50 lg:inline-flex">
              <IconUser />
              ورود
            </a>
            <a href="#" className="relative grid size-10 place-items-center rounded-full text-ink hover:bg-purple-50" aria-label="علاقه‌مندی">
              <IconHeart />
              <span className="absolute top-1 left-1 grid size-4 place-items-center rounded-full bg-rose-500 text-[10px] text-white">
                ۲
              </span>
            </a>
            <a href="#" className="relative grid size-10 place-items-center rounded-full text-ink hover:bg-purple-50" aria-label="سبد خرید">
              <IconBag />
              <span className="absolute top-1 left-1 grid size-4 place-items-center rounded-full bg-cyan-500 text-[10px] text-white">
                ۳
              </span>
            </a>
          </div>
        </div>

        <form className="pb-3 md:hidden">
          <div className="relative">
            <input
              type="search"
              placeholder="جستجو در نینی نادری"
              className="h-10 w-full rounded-full border border-line bg-purple-50/60 pr-4 pl-10 text-sm outline-none"
            />
            <span className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted">
              <IconSearch className="size-4" />
            </span>
          </div>
        </form>

        <nav className="relative hidden h-12 items-center gap-6 text-sm font-medium text-ink lg:flex">
          <div
            className="h-full"
            onMouseEnter={() => setMega(true)}
            onMouseLeave={() => setMega(false)}
          >
            <button
              type="button"
              className="relative flex h-full items-center gap-1 py-3 transition hover:text-purple-700"
              aria-expanded={mega}
              onClick={() => setMega((value) => !value)}
            >
              دسته‌بندی‌ها
              <IconChevronDown className={`size-4 transition ${mega ? "rotate-180" : ""}`} />
            </button>
            {mega ? <MegaMenu onPick={closeAll} /> : null}
          </div>
          {navLinks.map((link) => (
            <a
              key={link.label}
              href={link.href}
              className="relative py-3 transition hover:text-purple-700 after:absolute after:right-0 after:bottom-1 after:h-0.5 after:w-0 after:bg-linear-to-l after:from-purple-600 after:to-cyan-500 after:transition-all hover:after:w-full"
            >
              {link.label}
            </a>
          ))}
        </nav>
      </div>

      {open ? (
        <div className="border-t border-line bg-white lg:hidden">
          <nav className="container-nn flex flex-col py-2 text-sm">
            <button
              type="button"
              className="flex items-center justify-between border-b border-line/70 py-3 text-ink"
              onClick={() => setMobileCats((value) => !value)}
            >
              دسته‌بندی‌ها
              <IconChevronDown className={`size-4 transition ${mobileCats ? "rotate-180" : ""}`} />
            </button>
            {mobileCats ? (
              <div className="grid grid-cols-2 gap-2 border-b border-line/70 py-3">
                {categories.map((category) => (
                  <a
                    key={category.id}
                    href="#categories"
                    onClick={closeAll}
                    className="rounded-2xl bg-purple-50/70 px-3 py-2 text-xs font-bold"
                  >
                    {category.title}
                  </a>
                ))}
              </div>
            ) : null}
            {navLinks.map((link) => (
              <a
                key={link.label}
                href={link.href}
                onClick={closeAll}
                className="border-b border-line/70 py-3 text-ink"
              >
                {link.label}
              </a>
            ))}
          </nav>
        </div>
      ) : null}
    </header>
  );
}

function MegaMenu({ onPick }: { onPick: () => void }) {
  return (
    <div className="absolute top-full right-0 z-50 w-[min(40rem,calc(100vw-2rem))] pt-2">
      <div className="rounded-3xl border border-white/80 bg-white/95 p-5 shadow-card backdrop-blur-[80px]">
        <div className="mb-4 flex items-end justify-between">
          <div>
            <p className="font-display text-xs text-cyan-600">Categories</p>
            <p className="text-base font-bold">خرید بر اساس دسته</p>
          </div>
          <a href="#categories" onClick={onPick} className="text-xs font-medium text-purple-700">
            مشاهده همه
          </a>
        </div>
        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
          {categories.map((category) => (
            <a
              key={category.id}
              href="#categories"
              onClick={onPick}
              className="rounded-2xl px-3 py-3 text-right transition hover:bg-white/45"
            >
              <p className="text-sm font-bold text-ink">{category.title}</p>
              <p className="mt-1 text-[11px] text-muted">{toFaDigits(category.count)} مدل</p>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}