@burdenoff/microfe-proserviceworld 2026.525.1 → 2026.625.1

package/dist/proserviceworld/pages/ServiceDetailsPage.js

@@ -2,18 +2,18 @@ import { useProServiceWorldStore as e } from "../store/proserviceworldStore.js";
 import { useState as t } from "react";
 import { ArrowLeft as n, BookOpen as r, Calendar as i, CheckCircle2 as a, ChevronDown as o, ChevronUp as s, ClipboardList as c, Clock as l, DollarSign as u, FileText as d, MessageSquare as f, Package as p, Shield as m, Star as h, Tag as g, User as _ } from "lucide-react";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { Badge as b, Button as x, Card as S, CardContent as C, CardHeader as w, CardTitle as T } from "@burdenoff/fe-libs/ui";
+import { Badge as b, Button as x, Card as S, CardContent as C, CardHeader as w, CardTitle as T, EmphasisPanel as E, GlassCard as D, ShowMore as O } from "@burdenoff/fe-libs/ui";
 //#region src/proserviceworld/pages/ServiceDetailsPage.tsx
-function E() {
-	let { services: E, providers: D } = e(), [O, k] = t(E[0]?.id ?? ""), [A, j] = t("packages"), [M, N] = t(null), [P, F] = t(!1), [I, L] = t(null), R = E.find((e) => e.id === O) ?? E[0], z = R ? D.find((e) => e.id === R.providerId) : null;
-	if (!R) return /* @__PURE__ */ v("div", {
+function k() {
+	let { services: k, providers: A } = e(), [j, M] = t(k[0]?.id ?? ""), [N, P] = t("packages"), [F, I] = t(null), [L, R] = t(!1), [z, B] = t(null), V = k.find((e) => e.id === j) ?? k[0], H = V ? A.find((e) => e.id === V.providerId) : null;
+	if (!V) return /* @__PURE__ */ v("div", {
 		className: "flex items-center justify-center p-12",
 		children: /* @__PURE__ */ v("p", {
-			className: "text-muted-foreground",
+			className: "text-text-secondary",
 			children: "No services available."
 		})
 	});
-	let B = [
+	let U = [
 		{
 			key: "packages",
 			label: "Packages",
@@ -34,9 +34,9 @@ function E() {
 			label: "FAQ",
 			icon: r
 		}
-	], V = R.pricing.type === "hourly" ? `$${R.pricing.hourlyRate}/hr` : R.pricing.type === "fixed" ? `$${R.pricing.basePrice.toLocaleString()} fixed` : `From $${R.pricing.basePrice.toLocaleString()}`;
+	], W = V.pricing.type === "hourly" ? `$${V.pricing.hourlyRate}/hr` : V.pricing.type === "fixed" ? `$${V.pricing.basePrice.toLocaleString()} fixed` : `From $${V.pricing.basePrice.toLocaleString()}`;
 	return /* @__PURE__ */ y("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
 		children: [
 			/* @__PURE__ */ y("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
@@ -46,18 +46,19 @@ function E() {
 						/* @__PURE__ */ y(x, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => k(E[0]?.id ?? ""),
+							onClick: () => M(k[0]?.id ?? ""),
 							children: [/* @__PURE__ */ v(n, { className: "mr-2 h-4 w-4" }), " Services"]
 						}),
 						/* @__PURE__ */ v("span", {
-							className: "text-muted-foreground",
+							className: "text-text-secondary",
 							children: "/"
 						}),
 						/* @__PURE__ */ v("select", {
-							className: "rounded border bg-background px-2 py-1 text-sm",
-							value: O,
-							onChange: (e) => k(e.target.value),
-							children: E.map((e) => /* @__PURE__ */ v("option", {
+							"aria-label": "Select service",
+							className: "rounded border border-border-seam bg-bg-surface px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+							value: j,
+							onChange: (e) => M(e.target.value),
+							children: k.map((e) => /* @__PURE__ */ v("option", {
 								value: e.id,
 								children: e.title
 							}, e.id))
@@ -65,7 +66,7 @@ function E() {
 					]
 				}), /* @__PURE__ */ y(x, {
 					size: "sm",
-					onClick: () => F(!0),
+					onClick: () => R(!0),
 					children: [/* @__PURE__ */ v(i, { className: "mr-2 h-4 w-4" }), " Book This Service"]
 				})]
 			}),
@@ -74,8 +75,8 @@ function E() {
 				children: [/* @__PURE__ */ y("div", {
 					className: "space-y-6 lg:col-span-2",
 					children: [
-						/* @__PURE__ */ v(S, { children: /* @__PURE__ */ y(C, {
-							className: "pt-6",
+						/* @__PURE__ */ y(E, {
+							className: "relative overflow-hidden",
 							children: [
 								/* @__PURE__ */ y("div", {
 									className: "flex flex-wrap items-start justify-between gap-4",
@@ -85,53 +86,53 @@ function E() {
 											/* @__PURE__ */ y("div", {
 												className: "flex items-center gap-2",
 												children: [
-													R.featured && /* @__PURE__ */ v(b, { children: "Featured" }),
+													V.featured && /* @__PURE__ */ v(b, { children: "Featured" }),
 													/* @__PURE__ */ v(b, {
 														variant: "secondary",
-														children: R.category.replace(/_/g, " ")
+														children: V.category.replace(/_/g, " ")
 													}),
 													/* @__PURE__ */ v(b, {
 														variant: "outline",
-														children: R.subcategory
+														children: V.subcategory
 													})
 												]
 											}),
 											/* @__PURE__ */ v("h1", {
-												className: "text-2xl font-bold",
-												children: R.title
+												className: "text-2xl font-bold tracking-tight",
+												children: V.title
 											}),
 											/* @__PURE__ */ v("p", {
-												className: "max-w-2xl text-muted-foreground",
-												children: R.description
+												className: "max-w-2xl text-text-secondary",
+												children: V.description
 											})
 										]
 									}), /* @__PURE__ */ y("div", {
 										className: "text-right",
 										children: [/* @__PURE__ */ v("p", {
-											className: "text-2xl font-bold text-primary",
-											children: V
+											className: "text-2xl font-bold text-accent-blue tabular-nums",
+											children: W
 										}), /* @__PURE__ */ y("p", {
-											className: "text-xs text-muted-foreground",
-											children: [R.pricing.type, " pricing"]
+											className: "text-xs text-text-secondary",
+											children: [V.pricing.type, " pricing"]
 										})]
 									})]
 								}),
 								/* @__PURE__ */ y("div", {
-									className: "mt-6 flex flex-wrap gap-6 border-t pt-4",
+									className: "mt-6 flex flex-wrap gap-6 border-t border-border-seam pt-4",
 									children: [
 										/* @__PURE__ */ y("div", {
 											className: "flex items-center gap-2",
 											children: [
-												/* @__PURE__ */ v(h, { className: "h-4 w-4 text-yellow-500" }),
+												/* @__PURE__ */ v(h, { className: "h-4 w-4 text-status-warning-text" }),
 												/* @__PURE__ */ v("span", {
-													className: "text-sm font-medium",
-													children: R.rating
+													className: "text-sm font-medium tabular-nums",
+													children: V.rating
 												}),
 												/* @__PURE__ */ y("span", {
-													className: "text-xs text-muted-foreground",
+													className: "text-xs text-text-secondary",
 													children: [
 														"(",
-														R.providerReviews,
+														V.providerReviews,
 														" reviews)"
 													]
 												})
@@ -139,59 +140,62 @@ function E() {
 										}),
 										/* @__PURE__ */ y("div", {
 											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ v(l, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ y("span", {
-												className: "text-sm",
-												children: [R.duration.typical, " days typical"]
+											children: [/* @__PURE__ */ v(l, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("span", {
+												className: "text-sm tabular-nums",
+												children: [V.duration.typical, " days typical"]
 											})]
 										}),
 										/* @__PURE__ */ y("div", {
 											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ v(a, { className: "h-4 w-4 text-green-500" }), /* @__PURE__ */ y("span", {
-												className: "text-sm",
-												children: [R.totalBookings, " bookings"]
+											children: [/* @__PURE__ */ v(a, { className: "h-4 w-4 text-status-success-text" }), /* @__PURE__ */ y("span", {
+												className: "text-sm tabular-nums",
+												children: [V.totalBookings, " bookings"]
 											})]
 										}),
 										/* @__PURE__ */ y("div", {
 											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ v(i, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ y("span", {
-												className: "text-sm",
+											children: [/* @__PURE__ */ v(i, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("span", {
+												className: "text-sm tabular-nums",
 												children: [
-													R.duration.min,
+													V.duration.min,
 													"-",
-													R.duration.max,
+													V.duration.max,
 													" days range"
 												]
 											})]
 										})
 									]
 								}),
-								R.tags.length > 0 && /* @__PURE__ */ y("div", {
-									className: "mt-4 flex flex-wrap gap-2",
-									children: [/* @__PURE__ */ v(g, { className: "h-4 w-4 text-muted-foreground" }), R.tags.map((e) => /* @__PURE__ */ v(b, {
+								V.tags.length > 0 && /* @__PURE__ */ y("div", {
+									className: "mt-4 flex flex-wrap items-center gap-2",
+									children: [/* @__PURE__ */ v(g, { className: "h-4 w-4 text-text-secondary" }), V.tags.map((e) => /* @__PURE__ */ v(b, {
 										variant: "outline",
 										className: "text-xs",
 										children: e
 									}, e))]
 								})
 							]
-						}) }),
+						}),
 						/* @__PURE__ */ v("div", {
-							className: "flex gap-1 border-b",
-							children: B.map(({ key: e, label: t, icon: n }) => /* @__PURE__ */ y("button", {
-								onClick: () => j(e),
-								className: `flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${A === e ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+							className: "flex gap-1 border-b border-border-seam",
+							children: U.map(({ key: e, label: t, icon: n }) => /* @__PURE__ */ y("button", {
+								onClick: () => P(e),
+								"aria-pressed": N === e,
+								className: `flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${N === e ? "border-accent-blue text-accent-blue" : "border-transparent text-text-secondary hover:text-text-primary"}`,
 								children: [/* @__PURE__ */ v(n, { className: "h-4 w-4" }), t]
 							}, e))
 						}),
-						A === "packages" && /* @__PURE__ */ v("div", {
+						N === "packages" && /* @__PURE__ */ v("div", {
 							className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-							children: R.packages.map((e) => /* @__PURE__ */ y(S, {
-								className: `relative ${e.popular ? "border-primary ring-1 ring-primary" : ""} ${I === e.id ? "bg-primary/5" : ""}`,
+							children: V.packages.map((e) => /* @__PURE__ */ y(D, {
+								treatment: e.popular ? "glass" : "plain",
+								glow: e.popular,
+								className: `relative border-border-seam ${z === e.id ? "ring-1 ring-accent-blue" : ""}`,
 								children: [
 									e.popular && /* @__PURE__ */ v("div", {
 										className: "absolute -top-3 left-1/2 -translate-x-1/2",
 										children: /* @__PURE__ */ v(b, {
-											className: "bg-primary text-primary-foreground",
+											className: "bg-accent-blue text-action-primary-text",
 											children: "Most Popular"
 										})
 									}),
@@ -201,7 +205,7 @@ function E() {
 											className: "text-lg",
 											children: e.name
 										}), /* @__PURE__ */ v("p", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: e.description
 										})]
 									}),
@@ -209,10 +213,10 @@ function E() {
 										className: "space-y-4",
 										children: [
 											/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("span", {
-												className: "text-3xl font-bold",
+												className: "text-3xl font-bold tabular-nums",
 												children: ["$", e.price.toLocaleString()]
 											}), /* @__PURE__ */ y("span", {
-												className: "text-sm text-muted-foreground",
+												className: "text-sm text-text-secondary",
 												children: [
 													" / ",
 													e.duration,
@@ -223,14 +227,14 @@ function E() {
 												className: "space-y-2",
 												children: e.features.map((e, t) => /* @__PURE__ */ y("li", {
 													className: "flex items-start gap-2 text-sm",
-													children: [/* @__PURE__ */ v(a, { className: "mt-0.5 h-4 w-4 shrink-0 text-green-500" }), e]
+													children: [/* @__PURE__ */ v(a, { className: "mt-0.5 h-4 w-4 shrink-0 text-status-success-text" }), e]
 												}, t))
 											}),
 											/* @__PURE__ */ v(x, {
 												className: "w-full",
 												variant: e.popular ? "default" : "outline",
 												onClick: () => {
-													L(e.id), F(!0);
+													B(e.id), R(!0);
 												},
 												children: "Select Package"
 											})
@@ -239,264 +243,292 @@ function E() {
 								]
 							}, e.id))
 						}),
-						A === "deliverables" && /* @__PURE__ */ y(S, { children: [/* @__PURE__ */ v(w, { children: /* @__PURE__ */ v(T, {
-							className: "text-base",
-							children: "What You'll Receive"
-						}) }), /* @__PURE__ */ v(C, { children: /* @__PURE__ */ v("ul", {
-							className: "grid gap-3 sm:grid-cols-2",
-							children: R.deliverables.map((e, t) => /* @__PURE__ */ y("li", {
-								className: "flex items-center gap-3 rounded-lg border p-3",
-								children: [/* @__PURE__ */ v(d, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ v("span", {
-									className: "text-sm font-medium",
-									children: e
-								})]
-							}, t))
-						}) })] }),
-						A === "requirements" && /* @__PURE__ */ y(S, { children: [/* @__PURE__ */ v(w, { children: /* @__PURE__ */ v(T, {
-							className: "text-base",
-							children: "What We Need From You"
-						}) }), /* @__PURE__ */ v(C, { children: /* @__PURE__ */ v("ul", {
-							className: "space-y-3",
-							children: R.requirements.map((e, t) => /* @__PURE__ */ y("li", {
-								className: "flex items-start gap-3 rounded-lg border p-3",
-								children: [/* @__PURE__ */ v(c, { className: "mt-0.5 h-5 w-5 text-orange-500" }), /* @__PURE__ */ v("span", {
-									className: "text-sm",
-									children: e
-								})]
-							}, t))
-						}) })] }),
-						A === "faq" && /* @__PURE__ */ v("div", {
+						N === "deliverables" && /* @__PURE__ */ y(S, {
+							className: "border-border-seam",
+							children: [/* @__PURE__ */ v(w, { children: /* @__PURE__ */ v(T, {
+								className: "text-base",
+								children: "What You'll Receive"
+							}) }), /* @__PURE__ */ v(C, { children: /* @__PURE__ */ v(O, {
+								collapsedHeight: 180,
+								children: /* @__PURE__ */ v("ul", {
+									className: "grid gap-3 sm:grid-cols-2",
+									children: V.deliverables.map((e, t) => /* @__PURE__ */ y("li", {
+										className: "flex items-center gap-3 rounded-lg border border-border-seam p-3",
+										children: [/* @__PURE__ */ v(d, { className: "h-5 w-5 text-accent-blue" }), /* @__PURE__ */ v("span", {
+											className: "text-sm font-medium",
+											children: e
+										})]
+									}, t))
+								})
+							}) })]
+						}),
+						N === "requirements" && /* @__PURE__ */ y(S, {
+							className: "border-border-seam",
+							children: [/* @__PURE__ */ v(w, { children: /* @__PURE__ */ v(T, {
+								className: "text-base",
+								children: "What We Need From You"
+							}) }), /* @__PURE__ */ v(C, { children: /* @__PURE__ */ v(O, {
+								collapsedHeight: 180,
+								children: /* @__PURE__ */ v("ul", {
+									className: "space-y-3",
+									children: V.requirements.map((e, t) => /* @__PURE__ */ y("li", {
+										className: "flex items-start gap-3 rounded-lg border border-border-seam p-3",
+										children: [/* @__PURE__ */ v(c, { className: "mt-0.5 h-5 w-5 text-status-warning-text" }), /* @__PURE__ */ v("span", {
+											className: "text-sm",
+											children: e
+										})]
+									}, t))
+								})
+							}) })]
+						}),
+						N === "faq" && /* @__PURE__ */ v("div", {
 							className: "space-y-3",
-							children: R.faq.length === 0 ? /* @__PURE__ */ v(S, { children: /* @__PURE__ */ v(C, {
-								className: "py-8 text-center text-muted-foreground",
-								children: "No FAQ items for this service yet."
-							}) }) : R.faq.map((e) => /* @__PURE__ */ y(S, { children: [/* @__PURE__ */ y("button", {
-								className: "flex w-full items-center justify-between p-4 text-left",
-								onClick: () => N(M === e.id ? null : e.id),
-								children: [/* @__PURE__ */ v("span", {
-									className: "font-medium",
-									children: e.question
-								}), M === e.id ? /* @__PURE__ */ v(s, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ v(o, { className: "h-4 w-4 text-muted-foreground" })]
-							}), M === e.id && /* @__PURE__ */ v(C, {
-								className: "border-t pt-4",
-								children: /* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
-									children: e.answer
+							children: V.faq.length === 0 ? /* @__PURE__ */ v(S, {
+								className: "border-border-seam",
+								children: /* @__PURE__ */ v(C, {
+									className: "py-8 text-center text-text-secondary",
+									children: "No FAQ items for this service yet."
 								})
-							})] }, e.id))
+							}) : V.faq.map((e) => /* @__PURE__ */ y(S, {
+								className: "border-border-seam",
+								children: [/* @__PURE__ */ y("button", {
+									className: "flex w-full items-center justify-between p-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+									"aria-expanded": F === e.id,
+									onClick: () => I(F === e.id ? null : e.id),
+									children: [/* @__PURE__ */ v("span", {
+										className: "font-medium",
+										children: e.question
+									}), F === e.id ? /* @__PURE__ */ v(s, { className: "h-4 w-4 text-text-secondary" }) : /* @__PURE__ */ v(o, { className: "h-4 w-4 text-text-secondary" })]
+								}), F === e.id && /* @__PURE__ */ v(C, {
+									className: "border-t border-border-seam pt-4",
+									children: /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: e.answer
+									})
+								})]
+							}, e.id))
 						})
 					]
 				}), /* @__PURE__ */ y("div", {
 					className: "space-y-4",
-					children: [z && /* @__PURE__ */ y(S, { children: [/* @__PURE__ */ v(w, { children: /* @__PURE__ */ v(T, {
-						className: "text-base",
-						children: "Service Provider"
-					}) }), /* @__PURE__ */ y(C, {
-						className: "space-y-4",
-						children: [
-							/* @__PURE__ */ y("div", {
-								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ v("div", {
-									className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold",
-									children: z.name.charAt(0)
-								}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-									className: "font-medium",
-									children: z.name
-								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
-									children: z.businessName
-								})] })]
-							}),
-							z.verified && /* @__PURE__ */ y("div", {
-								className: "flex items-center gap-2 rounded-lg bg-green-50 p-2 dark:bg-green-950",
-								children: [/* @__PURE__ */ v(m, { className: "h-4 w-4 text-green-600" }), /* @__PURE__ */ v("span", {
-									className: "text-sm font-medium text-green-700 dark:text-green-400",
-									children: "Verified Provider"
-								})]
-							}),
-							/* @__PURE__ */ y("div", {
-								className: "space-y-3 text-sm",
-								children: [
-									/* @__PURE__ */ y("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ v("span", {
-											className: "text-muted-foreground",
-											children: "Rating"
-										}), /* @__PURE__ */ y("div", {
-											className: "flex items-center gap-1",
-											children: [
-												/* @__PURE__ */ v(h, { className: "h-4 w-4 text-yellow-500" }),
-												/* @__PURE__ */ v("span", {
-													className: "font-medium",
-													children: z.rating
-												}),
-												/* @__PURE__ */ y("span", {
-													className: "text-muted-foreground",
-													children: [
-														"(",
-														z.totalReviews,
-														")"
-													]
-												})
-											]
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ v("span", {
-											className: "text-muted-foreground",
-											children: "Completion Rate"
-										}), /* @__PURE__ */ y("span", {
-											className: "font-medium",
-											children: [z.completionRate, "%"]
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ v("span", {
-											className: "text-muted-foreground",
-											children: "Response Time"
-										}), /* @__PURE__ */ y("span", {
-											className: "font-medium",
-											children: [z.responseTime, "h avg"]
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ v("span", {
-											className: "text-muted-foreground",
-											children: "Experience"
-										}), /* @__PURE__ */ y("span", {
-											className: "font-medium",
-											children: [z.yearsExperience, " years"]
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ v("span", {
-											className: "text-muted-foreground",
-											children: "Projects Done"
-										}), /* @__PURE__ */ v("span", {
-											className: "font-medium",
-											children: z.projectsCompleted
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ v("span", {
-											className: "text-muted-foreground",
-											children: "Hourly Rate"
-										}), /* @__PURE__ */ y("span", {
-											className: "font-medium",
-											children: [
-												"$",
-												z.hourlyRate,
-												"/hr"
-											]
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ v("span", {
-											className: "text-muted-foreground",
-											children: "Location"
-										}), /* @__PURE__ */ v("span", {
-											className: "font-medium",
-											children: z.location
-										})]
-									})
-								]
-							}),
-							/* @__PURE__ */ y("div", {
-								className: "space-y-2 border-t pt-3",
-								children: [/* @__PURE__ */ v("p", {
-									className: "text-xs font-medium text-muted-foreground",
-									children: "Certifications"
-								}), /* @__PURE__ */ v("div", {
-									className: "flex flex-wrap gap-1",
-									children: z.certifications.map((e) => /* @__PURE__ */ v(b, {
-										variant: "secondary",
-										className: "text-xs",
-										children: e
-									}, e))
-								})]
-							}),
-							/* @__PURE__ */ y("div", {
-								className: "space-y-2 border-t pt-3",
-								children: [/* @__PURE__ */ v("p", {
-									className: "text-xs font-medium text-muted-foreground",
-									children: "Languages"
-								}), /* @__PURE__ */ v("div", {
-									className: "flex flex-wrap gap-1",
-									children: z.languages.map((e) => /* @__PURE__ */ v(b, {
+					children: [H && /* @__PURE__ */ y(S, {
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ v(w, { children: /* @__PURE__ */ v(T, {
+							className: "text-base",
+							children: "Service Provider"
+						}) }), /* @__PURE__ */ y(C, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ y("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ v("div", {
+										className: "flex h-12 w-12 items-center justify-center rounded-full bg-accent-soft text-text-primary font-semibold",
+										children: H.name.charAt(0)
+									}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "font-medium",
+										children: H.name
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: H.businessName
+									})] })]
+								}),
+								H.verified && /* @__PURE__ */ y("div", {
+									className: "flex items-center gap-2 rounded-lg bg-status-success-bg-subtle p-2",
+									children: [/* @__PURE__ */ v(m, { className: "h-4 w-4 text-status-success-text" }), /* @__PURE__ */ v("span", {
+										className: "text-sm font-medium text-status-success-text",
+										children: "Verified Provider"
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "space-y-3 text-sm",
+									children: [
+										/* @__PURE__ */ y("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ v("span", {
+												className: "text-text-secondary",
+												children: "Rating"
+											}), /* @__PURE__ */ y("div", {
+												className: "flex items-center gap-1",
+												children: [
+													/* @__PURE__ */ v(h, { className: "h-4 w-4 text-status-warning-text" }),
+													/* @__PURE__ */ v("span", {
+														className: "font-medium tabular-nums",
+														children: H.rating
+													}),
+													/* @__PURE__ */ y("span", {
+														className: "text-text-secondary tabular-nums",
+														children: [
+															"(",
+															H.totalReviews,
+															")"
+														]
+													})
+												]
+											})]
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ v("span", {
+												className: "text-text-secondary",
+												children: "Completion Rate"
+											}), /* @__PURE__ */ y("span", {
+												className: "font-medium tabular-nums",
+												children: [H.completionRate, "%"]
+											})]
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ v("span", {
+												className: "text-text-secondary",
+												children: "Response Time"
+											}), /* @__PURE__ */ y("span", {
+												className: "font-medium tabular-nums",
+												children: [H.responseTime, "h avg"]
+											})]
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ v("span", {
+												className: "text-text-secondary",
+												children: "Experience"
+											}), /* @__PURE__ */ y("span", {
+												className: "font-medium tabular-nums",
+												children: [H.yearsExperience, " years"]
+											})]
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ v("span", {
+												className: "text-text-secondary",
+												children: "Projects Done"
+											}), /* @__PURE__ */ v("span", {
+												className: "font-medium tabular-nums",
+												children: H.projectsCompleted
+											})]
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ v("span", {
+												className: "text-text-secondary",
+												children: "Hourly Rate"
+											}), /* @__PURE__ */ y("span", {
+												className: "font-medium tabular-nums",
+												children: [
+													"$",
+													H.hourlyRate,
+													"/hr"
+												]
+											})]
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ v("span", {
+												className: "text-text-secondary",
+												children: "Location"
+											}), /* @__PURE__ */ v("span", {
+												className: "font-medium",
+												children: H.location
+											})]
+										})
+									]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "space-y-2 border-t border-border-seam pt-3",
+									children: [/* @__PURE__ */ v("p", {
+										className: "text-xs font-medium text-text-secondary",
+										children: "Certifications"
+									}), /* @__PURE__ */ v("div", {
+										className: "flex flex-wrap gap-1",
+										children: H.certifications.map((e) => /* @__PURE__ */ v(b, {
+											variant: "secondary",
+											className: "text-xs",
+											children: e
+										}, e))
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "space-y-2 border-t border-border-seam pt-3",
+									children: [/* @__PURE__ */ v("p", {
+										className: "text-xs font-medium text-text-secondary",
+										children: "Languages"
+									}), /* @__PURE__ */ v("div", {
+										className: "flex flex-wrap gap-1",
+										children: H.languages.map((e) => /* @__PURE__ */ v(b, {
+											variant: "outline",
+											className: "text-xs",
+											children: e
+										}, e))
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex gap-2 border-t border-border-seam pt-3",
+									children: [/* @__PURE__ */ y(x, {
+										className: "flex-1",
+										size: "sm",
 										variant: "outline",
-										className: "text-xs",
-										children: e
-									}, e))
-								})]
-							}),
-							/* @__PURE__ */ y("div", {
-								className: "flex gap-2 border-t pt-3",
-								children: [/* @__PURE__ */ y(x, {
-									className: "flex-1",
-									size: "sm",
-									variant: "outline",
-									children: [/* @__PURE__ */ v(_, { className: "mr-2 h-4 w-4" }), " View Profile"]
-								}), /* @__PURE__ */ y(x, {
-									className: "flex-1",
-									size: "sm",
-									variant: "outline",
-									children: [/* @__PURE__ */ v(f, { className: "mr-2 h-4 w-4" }), " Message"]
-								})]
-							})
-						]
-					})] }), /* @__PURE__ */ y(S, { children: [/* @__PURE__ */ v(w, { children: /* @__PURE__ */ v(T, {
-						className: "text-base",
-						children: "Quick Book"
-					}) }), /* @__PURE__ */ y(C, {
-						className: "space-y-3",
-						children: [
-							/* @__PURE__ */ y("div", {
-								className: "flex items-center justify-between text-sm",
-								children: [/* @__PURE__ */ v("span", {
-									className: "text-muted-foreground",
-									children: "Starting from"
-								}), /* @__PURE__ */ y("span", {
-									className: "text-lg font-bold text-primary",
-									children: ["$", R.pricing.basePrice.toLocaleString()]
-								})]
-							}),
-							/* @__PURE__ */ y("div", {
-								className: "flex items-center gap-2 text-sm text-muted-foreground",
-								children: [/* @__PURE__ */ v(l, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", { children: [
-									"Typical duration: ",
-									R.duration.typical,
-									" days"
-								] })]
-							}),
-							/* @__PURE__ */ y("div", {
-								className: "flex items-center gap-2 text-sm text-muted-foreground",
-								children: [/* @__PURE__ */ v(u, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", { children: [R.pricing.type, " pricing model"] })]
-							}),
-							/* @__PURE__ */ y(x, {
-								className: "w-full",
-								onClick: () => F(!0),
-								children: [/* @__PURE__ */ v(i, { className: "mr-2 h-4 w-4" }), " Book Now"]
-							})
-						]
-					})] })]
+										children: [/* @__PURE__ */ v(_, { className: "mr-2 h-4 w-4" }), " View Profile"]
+									}), /* @__PURE__ */ y(x, {
+										className: "flex-1",
+										size: "sm",
+										variant: "outline",
+										children: [/* @__PURE__ */ v(f, { className: "mr-2 h-4 w-4" }), " Message"]
+									})]
+								})
+							]
+						})]
+					}), /* @__PURE__ */ y(D, {
+						treatment: "glass",
+						glow: !0,
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ v(w, { children: /* @__PURE__ */ v(T, {
+							className: "text-base",
+							children: "Quick Book"
+						}) }), /* @__PURE__ */ y(C, {
+							className: "space-y-3",
+							children: [
+								/* @__PURE__ */ y("div", {
+									className: "flex items-center justify-between text-sm",
+									children: [/* @__PURE__ */ v("span", {
+										className: "text-text-secondary",
+										children: "Starting from"
+									}), /* @__PURE__ */ y("span", {
+										className: "text-lg font-bold text-accent-blue tabular-nums",
+										children: ["$", V.pricing.basePrice.toLocaleString()]
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex items-center gap-2 text-sm text-text-secondary",
+									children: [/* @__PURE__ */ v(l, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", { children: [
+										"Typical duration: ",
+										V.duration.typical,
+										" days"
+									] })]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex items-center gap-2 text-sm text-text-secondary",
+									children: [/* @__PURE__ */ v(u, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", { children: [V.pricing.type, " pricing model"] })]
+								}),
+								/* @__PURE__ */ y(x, {
+									className: "w-full",
+									onClick: () => R(!0),
+									children: [/* @__PURE__ */ v(i, { className: "mr-2 h-4 w-4" }), " Book Now"]
+								})
+							]
+						})]
+					})]
 				})]
 			}),
-			P && /* @__PURE__ */ v("div", {
-				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
-				children: /* @__PURE__ */ y(S, {
-					className: "w-full max-w-lg mx-4",
+			L && /* @__PURE__ */ v("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay",
+				children: /* @__PURE__ */ y(D, {
+					treatment: "glass",
+					className: "w-full max-w-lg mx-4 border-border-seam",
 					children: [/* @__PURE__ */ v(w, { children: /* @__PURE__ */ y("div", {
 						className: "flex items-center justify-between",
 						children: [/* @__PURE__ */ v(T, { children: "Book Service" }), /* @__PURE__ */ v(x, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => F(!1),
+							onClick: () => R(!1),
 							children: "Close"
 						})]
 					}) }), /* @__PURE__ */ y(C, {
@@ -504,30 +536,31 @@ function E() {
 						children: [
 							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
 								className: "font-medium",
-								children: R.title
+								children: V.title
 							}), /* @__PURE__ */ y("p", {
-								className: "text-sm text-muted-foreground",
-								children: ["by ", R.providerName]
+								className: "text-sm text-text-secondary",
+								children: ["by ", V.providerName]
 							})] }),
 							/* @__PURE__ */ y("div", {
 								className: "space-y-2",
 								children: [/* @__PURE__ */ v("p", {
 									className: "text-sm font-medium",
 									children: "Select Package"
-								}), R.packages.map((e) => /* @__PURE__ */ y("button", {
-									onClick: () => L(e.id),
-									className: `w-full rounded-lg border p-3 text-left transition-colors ${I === e.id ? "border-primary bg-primary/5" : "hover:bg-muted/50"}`,
+								}), V.packages.map((e) => /* @__PURE__ */ y("button", {
+									onClick: () => B(e.id),
+									"aria-pressed": z === e.id,
+									className: `w-full rounded-lg border p-3 text-left transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${z === e.id ? "border-accent-blue bg-accent-blue-subtle" : "border-border-seam hover:shadow-pop"}`,
 									children: [/* @__PURE__ */ y("div", {
 										className: "flex items-center justify-between",
 										children: [/* @__PURE__ */ v("span", {
 											className: "font-medium",
 											children: e.name
 										}), /* @__PURE__ */ y("span", {
-											className: "font-bold",
+											className: "font-bold tabular-nums",
 											children: ["$", e.price.toLocaleString()]
 										})]
 									}), /* @__PURE__ */ y("p", {
-										className: "text-xs text-muted-foreground",
+										className: "text-xs text-text-secondary",
 										children: [
 											e.description,
 											" - ",
@@ -542,11 +575,11 @@ function E() {
 								children: [/* @__PURE__ */ v(x, {
 									variant: "outline",
 									className: "flex-1",
-									onClick: () => F(!1),
+									onClick: () => R(!1),
 									children: "Cancel"
 								}), /* @__PURE__ */ v(x, {
 									className: "flex-1",
-									disabled: !I,
+									disabled: !z,
 									children: "Confirm Booking"
 								})]
 							})
@@ -558,6 +591,6 @@ function E() {
 	});
 }
 //#endregion
-export { E as ServiceDetailsPage };
+export { k as ServiceDetailsPage };
 
 //# sourceMappingURL=ServiceDetailsPage.js.map