import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { FeaturedIcon } from "./index81.js";
import { PageBackground } from "./index481.js";
import { cva } from "class-variance-authority";
import { ArrowLeft, ArrowRight, Search } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/pages/NotFoundPage/NotFoundPage.tsx
var notFoundVariants = cva("flex flex-col items-center w-full bg-background", {
	variants: { variant: {
		/** Left-aligned with "404 error" label */
		simple01: "items-start",
		/** Left-aligned with badge and resource links */
		simple02: "items-start",
		/** Centered with optional grid pattern and icon */
		simple03: "items-center text-center",
		/** Centered with label and feature cards */
		simple04: "items-center text-center"
	} },
	defaultVariants: { variant: "simple01" }
});
/** Feature card for simple04 variant */
var FeatureCard = ({ icon, title, description, actionText, onClick, href, layout = "vertical" }) => {
	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon && /* @__PURE__ */ jsx("span", {
		className: "text-primary [&_svg]:size-6",
		"aria-hidden": "true",
		children: icon
	}), /* @__PURE__ */ jsxs("div", {
		className: cn("flex flex-col", layout === "vertical" ? "gap-4" : "gap-2"),
		children: [/* @__PURE__ */ jsxs("div", {
			className: cn("flex flex-col", layout === "vertical" ? "gap-2" : "gap-1"),
			children: [/* @__PURE__ */ jsx("h3", {
				className: "text-lg font-semibold text-foreground leading-7",
				children: title
			}), /* @__PURE__ */ jsx("p", {
				className: "text-base text-muted-foreground leading-6",
				children: description
			})]
		}), /* @__PURE__ */ jsx(Button, {
			appearance: "link",
			variant: "primary",
			size: "md",
			onClick,
			endIcon: /* @__PURE__ */ jsx(ArrowRight, { className: "size-5 rtl:rotate-180" }),
			children: actionText
		})]
	})] });
	if (href) return /* @__PURE__ */ jsx("a", {
		href,
		className: cn("flex bg-muted p-5 md:p-6", layout === "vertical" ? "flex-col gap-8 md:gap-12" : "flex-col gap-4 items-center text-center"),
		children: content
	});
	return /* @__PURE__ */ jsx("div", {
		className: cn("flex bg-muted p-5 md:p-6", layout === "vertical" ? "flex-col gap-8 md:gap-12" : "flex-col gap-4 items-center text-center"),
		children: content
	});
};
/** Resource link for simple02 variant */
var ResourceLink = ({ title, description, onClick, href }) => {
	const linkContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
		appearance: "link",
		variant: "primary",
		size: "md",
		onClick,
		endIcon: /* @__PURE__ */ jsx(ArrowRight, { className: "size-5 rtl:rotate-180" }),
		children: title
	}), /* @__PURE__ */ jsx("p", {
		className: "text-base text-muted-foreground leading-6",
		children: description
	})] });
	if (href) return /* @__PURE__ */ jsx("a", {
		href,
		className: "flex flex-col gap-1",
		children: linkContent
	});
	return /* @__PURE__ */ jsx("div", {
		className: "flex flex-col gap-1",
		children: linkContent
	});
};
/** Feature text with icon for simple03 mobile variant */
var FeatureText = ({ icon, title, description, actionText, onClick }) => /* @__PURE__ */ jsxs("div", {
	className: "flex flex-col gap-4 items-center text-center w-full",
	children: [
		icon && /* @__PURE__ */ jsx(FeaturedIcon, {
			size: "sm",
			icon
		}),
		/* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-1 items-center",
			children: [/* @__PURE__ */ jsx("h3", {
				className: "text-lg font-semibold text-foreground leading-7",
				children: title
			}), /* @__PURE__ */ jsx("p", {
				className: "text-base text-muted-foreground leading-6",
				children: description
			})]
		}),
		/* @__PURE__ */ jsx(Button, {
			appearance: "link",
			variant: "primary",
			size: "md",
			onClick,
			endIcon: /* @__PURE__ */ jsx(ArrowRight, { className: "size-5 rtl:rotate-180" }),
			children: actionText
		})
	]
});
var variantDefaults = {
	simple01: {
		title: "We can't find that page",
		description: "Sorry, the page you are looking for doesn't exist or has been moved."
	},
	simple02: {
		title: "Page not found",
		description: "Sorry, the page you are looking for doesn't exist."
	},
	simple03: {
		title: "Page not found",
		description: "The page you are looking for doesn't exist.\nHere are some helpful links:"
	},
	simple04: {
		title: "We lost this page",
		description: "We searched high and low, but couldn't find what you're looking for.\nLet's find a better place for you to go."
	}
};
var NotFoundPage = React.forwardRef(({ className, variant = "simple01", errorLabel = "404 error", title = "Page not found", description = "Sorry, the page you are looking for doesn't exist or has been moved.", primaryActionText = "Take me home", onPrimaryAction, primaryActionHref, secondaryActionText = "Go back", onSecondaryAction, secondaryActionHref, links = [], showGridPattern = true, icon, ...props }, ref) => {
	const finalTitle = title === "Page not found" ? variantDefaults[variant || "simple01"].title : title;
	const finalDescription = description === "Sorry, the page you are looking for doesn't exist or has been moved." ? variantDefaults[variant || "simple01"].description : description;
	const handlePrimaryClick = () => {
		if (primaryActionHref) {
			if (typeof window !== "undefined") window.location.href = primaryActionHref;
		} else if (onPrimaryAction) onPrimaryAction();
	};
	const handleSecondaryClick = () => {
		if (secondaryActionHref) {
			if (typeof window !== "undefined") window.location.href = secondaryActionHref;
		} else if (onSecondaryAction) onSecondaryAction();
		else if (typeof window !== "undefined") window.history.back();
	};
	if (variant === "simple01") return /* @__PURE__ */ jsx("div", {
		ref,
		"data-slot": "not-found-page",
		className: cn(notFoundVariants({ variant }), "py-16 md:py-24 px-4 md:px-8", className),
		...props,
		children: /* @__PURE__ */ jsx("div", {
			className: "w-full max-w-[1280px]",
			children: /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-8 md:gap-12 max-w-[768px]",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex flex-col gap-4 md:gap-6",
					children: [/* @__PURE__ */ jsxs("div", {
						className: "flex flex-col gap-3",
						children: [/* @__PURE__ */ jsx("span", {
							className: "text-base font-semibold text-primary leading-6 delight-stagger",
							style: { "--delight-delay": "0ms" },
							children: errorLabel
						}), /* @__PURE__ */ jsx("h1", {
							className: "text-display-md md:text-display-xl font-semibold text-foreground delight-stagger",
							style: { "--delight-delay": "100ms" },
							children: finalTitle
						})]
					}), /* @__PURE__ */ jsx("p", {
						className: "text-lg md:text-xl text-muted-foreground leading-7 md:leading-[30px] max-w-prose whitespace-pre-line delight-stagger",
						style: { "--delight-delay": "200ms" },
						children: finalDescription
					})]
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex flex-col md:flex-row gap-3 w-full md:w-auto delight-stagger",
					style: { "--delight-delay": "300ms" },
					children: [/* @__PURE__ */ jsx(Button, {
						appearance: "outline",
						variant: "secondary",
						size: "lg",
						startIcon: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-5" }),
						onClick: handleSecondaryClick,
						className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
						children: secondaryActionText
					}), /* @__PURE__ */ jsx(Button, {
						appearance: "gradient",
						variant: "primary",
						size: "lg",
						onClick: handlePrimaryClick,
						className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
						children: primaryActionText
					})]
				})]
			})
		})
	});
	if (variant === "simple02") return /* @__PURE__ */ jsx("div", {
		ref,
		"data-slot": "not-found-page",
		className: cn(notFoundVariants({ variant }), "py-16 md:py-24 px-4 md:px-8 justify-center", className),
		...props,
		children: /* @__PURE__ */ jsx("div", {
			className: "w-full max-w-[1280px]",
			children: /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-8 md:gap-12 max-w-[768px]",
				children: [
					/* @__PURE__ */ jsxs("div", {
						className: "flex flex-col gap-4 md:gap-6",
						children: [/* @__PURE__ */ jsxs("div", {
							className: "flex flex-col gap-3 md:gap-4",
							children: [/* @__PURE__ */ jsxs("div", {
								className: "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-md border border-border bg-background text-sm font-medium text-secondary-foreground delight-stagger",
								style: { "--delight-delay": "0ms" },
								children: [/* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-primary/10" }), errorLabel]
							}), /* @__PURE__ */ jsx("h1", {
								className: "text-display-md md:text-display-xl font-semibold text-foreground delight-stagger",
								style: { "--delight-delay": "100ms" },
								children: finalTitle
							})]
						}), /* @__PURE__ */ jsx("p", {
							className: "text-lg md:text-xl text-muted-foreground leading-7 md:leading-[30px] max-w-prose delight-stagger",
							style: { "--delight-delay": "200ms" },
							children: finalDescription
						})]
					}),
					/* @__PURE__ */ jsxs("div", {
						className: "flex flex-col md:flex-row gap-3 w-full md:w-auto delight-stagger",
						style: { "--delight-delay": "300ms" },
						children: [/* @__PURE__ */ jsx(Button, {
							appearance: "outline",
							variant: "secondary",
							size: "lg",
							startIcon: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-5" }),
							onClick: handleSecondaryClick,
							className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
							children: secondaryActionText
						}), /* @__PURE__ */ jsx(Button, {
							appearance: "gradient",
							variant: "primary",
							size: "lg",
							onClick: handlePrimaryClick,
							className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
							children: primaryActionText === "Take me home" ? "Go home" : primaryActionText
						})]
					}),
					links.length > 0 && /* @__PURE__ */ jsx("div", {
						className: "flex flex-col gap-6 delight-stagger",
						style: { "--delight-delay": "400ms" },
						children: links.map((link, index) => /* @__PURE__ */ jsx(ResourceLink, {
							title: link.actionText,
							description: link.description,
							actionText: link.actionText,
							onClick: link.onClick,
							href: link.href
						}, index))
					})
				]
			})
		})
	});
	if (variant === "simple03") return /* @__PURE__ */ jsx("div", {
		ref,
		"data-slot": "not-found-page",
		className: cn(notFoundVariants({ variant }), "py-16 md:py-24 px-4 md:px-8", className),
		...props,
		children: /* @__PURE__ */ jsxs("div", {
			className: "w-full max-w-[1280px] flex flex-col gap-16 md:gap-24 items-center",
			children: [/* @__PURE__ */ jsxs("div", {
				className: "relative w-full flex flex-col items-center md:min-h-[768px]",
				children: [showGridPattern && /* @__PURE__ */ jsx(PageBackground, {
					pattern: "circular",
					offset: "icon-center"
				}), /* @__PURE__ */ jsxs("div", {
					className: "relative z-10 flex flex-col gap-8 md:gap-12 items-center max-w-[768px] flex-1 md:justify-center",
					children: [/* @__PURE__ */ jsxs("div", {
						className: "flex flex-col gap-4 md:gap-6 items-center",
						children: [/* @__PURE__ */ jsx("div", {
							className: "delight-stagger",
							style: { "--delight-delay": "0ms" },
							children: /* @__PURE__ */ jsx(FeaturedIcon, {
								size: "lg",
								icon: icon || /* @__PURE__ */ jsx(Search, {})
							})
						}), /* @__PURE__ */ jsxs("div", {
							className: "flex flex-col gap-4 md:gap-6 items-center",
							children: [/* @__PURE__ */ jsx("h1", {
								className: "text-display-md md:text-display-xl font-semibold text-foreground delight-stagger",
								style: { "--delight-delay": "100ms" },
								children: finalTitle
							}), /* @__PURE__ */ jsx("p", {
								className: "text-lg md:text-xl text-muted-foreground leading-7 md:leading-[30px] max-w-prose whitespace-pre-line delight-stagger",
								style: { "--delight-delay": "200ms" },
								children: finalDescription
							})]
						})]
					}), /* @__PURE__ */ jsxs("div", {
						className: "flex flex-col md:flex-row gap-3 w-full md:w-auto delight-stagger",
						style: { "--delight-delay": "300ms" },
						children: [/* @__PURE__ */ jsx(Button, {
							appearance: "gradient",
							variant: "primary",
							size: "lg",
							onClick: handlePrimaryClick,
							className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
							children: primaryActionText
						}), /* @__PURE__ */ jsx(Button, {
							appearance: "outline",
							variant: "secondary",
							size: "lg",
							startIcon: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-5" }),
							onClick: handleSecondaryClick,
							className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
							children: secondaryActionText
						})]
					})]
				})]
			}), links.length > 0 && /* @__PURE__ */ jsx("div", {
				className: "w-full flex flex-col gap-10 md:hidden",
				children: links.map((link, index) => /* @__PURE__ */ jsx(FeatureText, { ...link }, index))
			})]
		})
	});
	if (variant === "simple04") return /* @__PURE__ */ jsx("div", {
		ref,
		"data-slot": "not-found-page",
		className: cn(notFoundVariants({ variant }), "py-16 md:py-24 px-4 md:px-8", className),
		...props,
		children: /* @__PURE__ */ jsxs("div", {
			className: "w-full max-w-[1280px] flex flex-col gap-16 md:gap-24 items-center",
			children: [/* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-8 md:gap-12 items-center max-w-[768px]",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex flex-col gap-4 md:gap-6 items-center",
					children: [/* @__PURE__ */ jsxs("div", {
						className: "flex flex-col gap-3 items-center",
						children: [/* @__PURE__ */ jsx("span", {
							className: "text-base font-semibold text-primary leading-6 delight-stagger",
							style: { "--delight-delay": "0ms" },
							children: errorLabel
						}), /* @__PURE__ */ jsx("h1", {
							className: "text-display-md md:text-display-xl font-semibold text-foreground delight-stagger",
							style: { "--delight-delay": "100ms" },
							children: finalTitle
						})]
					}), /* @__PURE__ */ jsx("p", {
						className: "text-lg md:text-xl text-muted-foreground leading-7 md:leading-[30px] max-w-prose whitespace-pre-line delight-stagger",
						style: { "--delight-delay": "200ms" },
						children: finalDescription
					})]
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex flex-col md:flex-row gap-3 w-full md:w-auto delight-stagger",
					style: { "--delight-delay": "300ms" },
					children: [/* @__PURE__ */ jsx(Button, {
						appearance: "gradient",
						variant: "primary",
						size: "lg",
						onClick: handlePrimaryClick,
						className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
						children: primaryActionText === "Take me home" ? "Go home" : primaryActionText
					}), /* @__PURE__ */ jsx(Button, {
						appearance: "outline",
						variant: "secondary",
						size: "lg",
						startIcon: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-5" }),
						onClick: handleSecondaryClick,
						className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
						children: secondaryActionText
					})]
				})]
			}), links.length > 0 && /* @__PURE__ */ jsx("div", {
				className: "w-full delight-stagger",
				style: { "--delight-delay": "400ms" },
				children: /* @__PURE__ */ jsx("div", {
					className: "flex flex-col md:flex-row md:flex-wrap gap-4 md:gap-8",
					children: links.map((link, index) => /* @__PURE__ */ jsx("div", {
						className: "flex-1 min-w-[280px]",
						children: /* @__PURE__ */ jsx(FeatureCard, {
							...link,
							layout: "vertical"
						})
					}, index))
				})
			})]
		})
	});
	return null;
});
NotFoundPage.displayName = "NotFoundPage";
//#endregion
export { NotFoundPage, notFoundVariants };

//# sourceMappingURL=index485.js.map