import { T as __toESM, b as require_react, t as require_jsx_runtime } from "../index.js";
import { n as DOCTORS } from "./clinic-CiEEmMP0.js";
import { n as InnerPage, t as InnerHero } from "./InnerPage-D1ekgyfU.js";
//#region app/doctors/page.tsx
var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
var import_jsx_runtime = require_jsx_runtime();
function Doctors() {
	const [active, setActive] = (0, import_react.useState)(null);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InnerPage, { children: [
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerHero, {
			kicker: "Our specialists",
			title: "Expert hands. Thoughtful care.",
			copy: "Meet the clinicians behind every confident smile."
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
			className: "doctor-grid",
			children: DOCTORS.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "doctor-photo",
					children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
						src: "/assets/asset-11-doctor-cutout.png",
						alt: d.name
					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: d.name.split(" ").slice(1).map((x) => x[0]).join("") })
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: d.specialization }),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: d.name }),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
					d.qualification,
					" · ",
					d.experience
				] }),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
					onClick: () => setActive(d),
					children: "View profile →"
				})
			] }, d.id))
		}),
		active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "modal-backdrop",
			onMouseDown: (e) => e.currentTarget === e.target && setActive(null),
			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", {
				className: "doctor-modal",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
						onClick: () => setActive(null),
						children: "×"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: active.specialization }),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: active.name }),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: active.bio }),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", { children: [
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { children: "Education" }),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { children: active.qualification }),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { children: "Languages" }),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { children: active.languages }),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { children: "Availability" }),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { children: active.availability })
					] }),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
						"data-book": true,
						"data-doctor": active.name,
						children: ["Book with ", active.name]
					})
				]
			})
		})
	] });
}
//#endregion
export { Doctors as default };
