"use client";
import Link from "next/link";
import Image from "next/image";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { usePathname, useSearchParams } from "next/navigation";
import { useCart } from "@/lib/cart-context";
import { useWishlist } from "@/lib/wishlist-context";
import CartDrawer from "@/components/CartDrawer";
import { whatsappLink } from "@/lib/site";
type NavCategory = {
id: string;
name: string;
slug: string;
productCount: number;
children: { id: string; name: string; slug: string }[];
};
// "Budget Return Gifts" gets a fixed dropdown of site-wide price tiers instead of
// real category children — these aren't Category rows, just /shop?maxPrice=N links.
const BUDGET_PRICE_TIERS = [49, 99, 199, 499, 999];
// Small label that fades in on hover of the icon button it's dropped into — the parent needs
// `group relative` for this to anchor and reveal correctly.
function IconTooltip({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
export default function Header({ categories, isLoggedIn }: { categories: NavCategory[]; isLoggedIn: boolean }) {
const { count } = useCart();
const { count: wishlistCount } = useWishlist();
const [menuOpen, setMenuOpen] = useState(false);
const [cartOpen, setCartOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
const [openDropdown, setOpenDropdown] = useState(null);
const pathname = usePathname();
const searchParams = useSearchParams();
const activeCategory = searchParams.get("category");
const activeMaxPrice = searchParams.get("maxPrice");
// Any navigation, from any link (category dropdown, logo, browser back/forward — not just the menu's own
// links), should close whatever's open. Layouts persist across routes in the App Router, so this state
// otherwise survives a page change and shows up stuck open on the next page.
useEffect(() => {
setMenuOpen(false);
setSearchOpen(false);
setOpenDropdown(null);
}, [pathname, searchParams]);
const navLinkClass = (active: boolean) =>
`text-sm font-medium ${active ? "font-semibold text-rose-700" : "text-stone-600 hover:text-rose-700"}`;
const accountHref = isLoggedIn ? "/account" : "/account/login";
const accountLabel = isLoggedIn ? "My Account" : "Login";
const menuLinks = [
{ href: accountHref, label: accountLabel },
{ href: "/track-order", label: "Track Order" },
{ href: "/about", label: "About" },
{ href: "/contact", label: "Contact" },
];
return (
<>
Iniyaval{" "}
Return Gifts
WhatsApp us
{wishlistCount > 0 && (
{wishlistCount}
)}
WishlistTrack your order{accountLabel}
{/* sm and up: small dropdown anchored under the button, sized to content — not the
mobile full-height drawer (rendered separately below, sm:hidden). */}
{menuOpen && (
{menuOpen && (
<>
{/* Mobile: partial-width slide-out drawer (not full-screen), portaled to , matching the
usual "hamburger drawer" pattern — a dim backdrop over the page with a narrower panel
anchored to the left. All shopping navigation lives here instead of a wrapping row of
dropdowns (hidden on mobile above) — sections with sub-items expand in place with a
chevron, flat categories are plain links.
Rendered via a portal rather than inline: has `backdrop-blur` (backdrop-filter),
and per spec any filter/backdrop-filter on an ancestor creates a new containing block for
`position: fixed` descendants — nested here, this overlay would be constrained to header's
own ~64px height instead of the real viewport, no matter what inset/height it's given. */}
{createPortal(