"use client";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import {
categoryMenu,
menuAssurances,
menuCta,
menuFeature,
} from "@/lib/category-menu";
/**
* Categories mega-menu.
*
* Geometry is taken off the design: the panel spans the same 1200px container
* as the header (its left edge lines up with the logo, its right with the
* avatar), and splits into a 300 rail / 528 detail / 310 promo set of columns.
* See `lib/category-menu.ts` for the provenance of the copy.
*/
function LineIcon({ d, size = 18 }: { d: string; size?: number }) {
return (
);
}
function ArrowCircle() {
return (
);
}
function PlayMark() {
return (
);
}
export function CategoryMegaMenu({ onClose }: { onClose: () => void }) {
const [activeId, setActiveId] = useState(categoryMenu[0].id);
const active = useMemo(
() => categoryMenu.find((c) => c.id === activeId) ?? categoryMenu[0],
[activeId],
);
const panelRef = useRef(null);
// Escape closes; focus moves into the panel so the menu is keyboard-usable.
useEffect(() => {
const onKey = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
};
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [onClose]);
const activeLinkId = active.groups[0]?.links[0]?.label;
return (
{/* The panel itself is the light grey; only the middle detail column is
a white card sitting on it. Rail and promo columns read as grey.
Below lg it becomes a single scrolling sheet — three columns cannot
survive a phone, and the promo rail is the first thing to go. */}
{/* ---------------- category rail ---------------- */}
{/* 44px rows on a 12px gap = the design's ~57px pitch. Tighter than
this and the whole panel comes out short, because nine rows set
the rail height and the rail sets the panel height. */}
{/* The design stacks Garments + Footwear on the left and leaves
Fabric & Trims alone on the right, so the split is explicit —
CSS multi-column auto-flow puts the break in the wrong place. */}