import { r as __toESM } from "../_runtime.mjs";
import { a as require_react, i as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { h as Link } from "../_libs/@tanstack/react-router+[...].mjs";
import { n as PageTitle, r as Prose, t as PageBody } from "./Layout-mJm59hV1.mjs";
import { r as products, t as categories } from "./catalog-CQ3AfDKO.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/Collection-MT6nxUuh.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
var topLevel = [
	"Ancient Maps",
	"Antique Maps",
	"Books",
	"Colorado Art",
	"Historic Colorado Photos",
	"Old Map Reproductions",
	"Old World Maps",
	"Replogle Globes",
	"Vintage Posters",
	"Vintage Prints"
];
function ProductCard({ product }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", {
		className: "group flex flex-col border border-border bg-card p-4 text-center shadow-sm transition-shadow hover:shadow-md",
		children: [
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
				to: "/shop/$slug",
				params: { slug: product.slug },
				className: "block",
				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "flex h-56 items-center justify-center overflow-hidden",
					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
						src: product.image,
						alt: product.title,
						loading: "lazy",
						className: "max-h-56 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
					})
				})
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
				className: "mt-4 flex-1 font-display text-lg leading-snug text-maroon",
				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
					to: "/shop/$slug",
					params: { slug: product.slug },
					children: product.title
				})
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
				className: "mt-2 text-[15px] text-foreground/80",
				children: product.price
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
				to: "/shop/$slug",
				params: { slug: product.slug },
				className: "mt-3 inline-block bg-maroon px-4 py-2 text-sm uppercase tracking-wide text-primary-foreground hover:bg-maroon-dark",
				children: "Details"
			})
		]
	});
}
function CollectionPage({ title, intro, categoryFilter }) {
	const [keyword, setKeyword] = (0, import_react.useState)("");
	const [sort, setSort] = (0, import_react.useState)("default");
	const [cat, setCat] = (0, import_react.useState)("All");
	const list = (0, import_react.useMemo)(() => {
		let items = products.filter((p) => categoryFilter ? p.category === categoryFilter : true);
		if (cat !== "All") {
			const slug = cat.toLowerCase().replace(/\s+/g, "-");
			items = items.filter((p) => p.category === slug);
		}
		if (keyword.trim()) {
			const k = keyword.toLowerCase();
			items = items.filter((p) => p.title.toLowerCase().includes(k));
		}
		const price = (p) => Number(p.price.replace(/[^0-9.]/g, ""));
		if (sort === "low") items = [...items].sort((a, b) => price(a) - price(b));
		if (sort === "high") items = [...items].sort((a, b) => price(b) - price(a));
		if (sort === "az") items = [...items].sort((a, b) => a.title.localeCompare(b.title));
		return items;
	}, [
		categoryFilter,
		cat,
		keyword,
		sort
	]);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageBody, { children: [
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageTitle, { children: title }),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Prose, { children: intro }),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "mt-10 flex items-center justify-end",
			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
				value: sort,
				onChange: (e) => setSort(e.target.value),
				className: "h-11 border border-border bg-secondary px-4 text-maroon",
				"aria-label": "Sort by",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
						value: "default",
						children: "Sort By"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
						value: "az",
						children: "Sort alphabetically"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
						value: "low",
						children: "Price: low to high"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
						value: "high",
						children: "Price: high to low"
					})
				]
			})
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "mt-6 grid gap-10 lg:grid-cols-[260px_1fr]",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
					className: "font-display text-xl text-maroon",
					children: "Filter results by keyword…"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
					value: keyword,
					onChange: (e) => setKeyword(e.target.value),
					placeholder: "Filter results by keyword",
					className: "mt-3 h-11 w-full border border-border bg-card px-3 outline-none focus:border-[color:var(--gold)]"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "my-6 border-border" }),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
					className: "font-display text-xl text-maroon",
					children: "Product Categories"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
					className: "mt-3 space-y-2 text-[15px]",
					children: ["All", ...topLevel].map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
						className: "flex cursor-pointer items-center gap-2",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
							type: "radio",
							name: "product-category",
							checked: cat === c,
							onChange: () => setCat(c),
							className: "accent-[color:var(--maroon)]"
						}), c]
					}) }, c))
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "my-6 border-border" }),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
					className: "font-display text-xl text-maroon",
					children: "All Categories"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
					className: "mt-3 max-h-96 space-y-1.5 overflow-y-auto pr-2 text-sm",
					children: categories.slice(0, 60).map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
						to: "/categories-of-our-catalog",
						className: "hover:text-maroon",
						children: [
							c.name,
							" (",
							c.count,
							")"
						]
					}) }, c.path))
				})
			] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: list.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
				className: "text-foreground/80",
				children: [
					"No items match this filter yet. Please try another category or use our",
					" ",
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
						to: "/request-an-item",
						className: "text-maroon underline",
						children: "request-an-item feature"
					}),
					"."
				]
			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
				className: "grid gap-6 sm:grid-cols-2 xl:grid-cols-3",
				children: list.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProductCard, { product: p }, p.slug))
			}) })]
		})
	] });
}
//#endregion
export { ProductCard as n, CollectionPage as t };
