Vitron-Front/app/components/desktop/DesktopHeader.tsx

import { Link, useLocation, useNavigate } from "@remix-run/react";
import { useState, type FormEvent } from "react";
import { Search, Heart, ShoppingBag, User } from "lucide-react";
import { useRootData } from "~/hooks/use-root-data";
import { useCartCount } from "~/requestHandler/use-cart-hooks";
import logo from "~/assets/logo/SVG-07.svg";

const NAV = [
  { label: "خانه", to: "/" },
  { label: "کاوش", to: "/explore" },
  { label: "برندها", to: "/sellers" },
  { label: "کالکشن‌ها", to: "/collections" },
];

/**
 * Desktop-only top chrome (sticky header with brand, nav, search and actions).
 * Hidden below the `lg` breakpoint; the mobile experience is unchanged.
 */
const DesktopHeader = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const { user } = useRootData();
  const cartCount = useCartCount();
  const [q, setQ] = useState("");

  const isActive = (to: string) =>
    to === "/" ? location.pathname === "/" : location.pathname.startsWith(to);

  const onSearch = (e: FormEvent) => {
    e.preventDefault();
    const term = q.trim();
    if (term) navigate(`/search/${encodeURIComponent(term)}`);
  };

  return (
    <header className="hidden lg:block sticky top-0 z-40 bg-WHITE/85 backdrop-blur-xl border-b border-WHITE3">
      <div className="max-w-[1320px] mx-auto h-[72px] px-8 flex items-center gap-7">
        <Link to="/" className="flex items-center gap-2.5 shrink-0">
          <img src={logo} alt="ویترون" className="w-7 h-9 object-contain" />
          <b className="text-[23px] font-extrabold tracking-tight text-VITROWN_BLUE">
            ویترون
          </b>
        </Link>

        <nav className="flex items-center gap-1">
          {NAV.map((n) => (
            <Link
              key={n.to}
              to={n.to}
              prefetch="intent"
              className={`px-3.5 py-2 rounded-[10px] text-[14.5px] transition-colors ${
                isActive(n.to)
                  ? "text-BLACK font-bold"
                  : "text-BLACK2 font-semibold hover:bg-WHITE3 hover:text-BLACK"
              }`}
            >
              {n.label}
            </Link>
          ))}
        </nav>

        <form
          onSubmit={onSearch}
          className="flex-1 max-w-[460px] mx-auto flex items-center gap-2.5 bg-WHITE3 border border-transparent rounded-xl px-3.5 h-11 transition-colors focus-within:bg-WHITE focus-within:border-GRAY3"
        >
          <Search size={20} className="text-GRAY shrink-0" />
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            name="q"
            placeholder="جستجوی محصول، برند یا فروشگاه…"
            aria-label="جستجو"
            className="w-full bg-transparent outline-none text-[14.5px] text-BLACK placeholder:text-GRAY"
          />
        </form>

        <div className="flex items-center gap-1.5 shrink-0">
          <Link
            to="/profile/bookmarks"
            aria-label="نشان‌شده‌ها"
            prefetch="intent"
            className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
          >
            <Heart size={21} />
          </Link>
          <Link
            to="/cart"
            aria-label="سبد خرید"
            prefetch="intent"
            className="relative w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
          >
            {cartCount > 0 && user?.access_token ? (
              <span className="absolute top-1 left-1 min-w-[17px] h-[17px] bg-RED text-white rounded-full text-[10.5px] font-bold grid place-items-center px-1 border-2 border-WHITE">
                {cartCount}
              </span>
            ) : null}
            <ShoppingBag size={21} />
          </Link>
          <Link
            to="/profile"
            aria-label="پروفایل"
            prefetch="intent"
            className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
          >
            <span className="w-9 h-9 rounded-full bg-WHITE3 grid place-items-center text-GRAY overflow-hidden">
              <User size={20} />
            </span>
          </Link>
        </div>
      </div>
    </header>
  );
};

export default DesktopHeader;