import { T as __toESM, b as require_react, t as require_jsx_runtime } from "../index.js";
import { n as InnerPage, t as InnerHero } from "./InnerPage-D1ekgyfU.js";
//#region app/gallery/page.tsx
var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
var import_jsx_runtime = require_jsx_runtime();
var cases = [
	{
		img: "asset-12b-patient-enhanced-smile.png",
		cap: "Natural smile enhancement"
	},
	{
		img: "asset-07-digital-dental-jaw-scan.png",
		cap: "Digital consultation"
	},
	{
		img: "asset-06-dental-scanner.png",
		cap: "Precision scanning"
	},
	{
		img: "asset-04-invisible-aligner.png",
		cap: "Aligner transformation"
	},
	{
		img: "asset-03-dental-implant.png",
		cap: "Implant restoration"
	}
];
function Gallery() {
	const [open, setOpen] = (0, import_react.useState)(-1);
	(0, import_react.useEffect)(() => {
		const key = (e) => {
			if (e.key === "Escape") setOpen(-1);
			if (open >= 0 && e.key === "ArrowRight") setOpen((open + 1) % cases.length);
			if (open >= 0 && e.key === "ArrowLeft") setOpen((open - 1 + cases.length) % cases.length);
		};
		addEventListener("keydown", key);
		return () => removeEventListener("keydown", key);
	}, [open]);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InnerPage, { children: [
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerHero, {
			kicker: "Smile gallery",
			title: "Results that still feel like you.",
			copy: "Explore thoughtful transformations and the technology behind them."
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
			className: "gallery-grid",
			children: cases.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
				onClick: () => setOpen(i),
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
					src: `/assets/${c.img}`,
					alt: c.cap
				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: c.cap })]
			}, c.img))
		}),
		open >= 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "lightbox",
			role: "dialog",
			"aria-modal": "true",
			children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
					onClick: () => setOpen(-1),
					"aria-label": "Close",
					children: "×"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
					onClick: () => setOpen((open - 1 + cases.length) % cases.length),
					"aria-label": "Previous",
					children: "←"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
					src: `/assets/${cases[open].img}`,
					alt: cases[open].cap
				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figcaption", { children: [
					open + 1,
					" / ",
					cases.length,
					" · ",
					cases[open].cap
				] })] }),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
					onClick: () => setOpen((open + 1) % cases.length),
					"aria-label": "Next",
					children: "→"
				})
			]
		})
	] });
}
//#endregion
export { Gallery as default };
