@burdenoff/microfe-proserviceworld 2026.624.1 → 2026.626.1

package/dist/proserviceworld/pages/ServiceDetailsPage.js

@@ -2,18 +2,19 @@ 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, IllustratedEmptyState as O, NextSteps as k, PagePurpose as A, ShowMore as j } 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", {
-		className: "flex items-center justify-center p-12",
-		children: /* @__PURE__ */ v("p", {
-			className: "text-text-secondary",
-			children: "No services available."
+function M() {
+	let { services: M, providers: N } = e(), [P, F] = t(M[0]?.id ?? ""), [I, L] = t("packages"), [R, z] = t(null), [B, V] = t(!1), [H, U] = t(null), W = M.find((e) => e.id === P) ?? M[0], G = W ? N.find((e) => e.id === W.providerId) : null;
+	if (!W) return /* @__PURE__ */ v("div", {
+		className: "p-6 bg-bg-canvas min-h-screen",
+		children: /* @__PURE__ */ v(O, {
+			illustration: "empty-data",
+			title: "No services available",
+			description: "There are no services to display yet. Once services are published they will appear here with full package and provider details."
 		})
 	});
-	let B = [
+	let K = [
 		{
 			key: "packages",
 			label: "Packages",
@@ -34,9 +35,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()}`;
+	], q = W.pricing.type === "hourly" ? `$${W.pricing.hourlyRate}/hr` : W.pricing.type === "fixed" ? `$${W.pricing.basePrice.toLocaleString()} fixed` : `From $${W.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,7 +47,7 @@ function E() {
 						/* @__PURE__ */ y(x, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => k(E[0]?.id ?? ""),
+							onClick: () => F(M[0]?.id ?? ""),
 							children: [/* @__PURE__ */ v(n, { className: "mr-2 h-4 w-4" }), " Services"]
 						}),
 						/* @__PURE__ */ v("span", {
@@ -54,10 +55,11 @@ function E() {
 							children: "/"
 						}),
 						/* @__PURE__ */ v("select", {
-							className: "rounded border bg-bg-surface 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: P,
+							onChange: (e) => F(e.target.value),
+							children: M.map((e) => /* @__PURE__ */ v("option", {
 								value: e.id,
 								children: e.title
 							}, e.id))
@@ -65,17 +67,47 @@ function E() {
 					]
 				}), /* @__PURE__ */ y(x, {
 					size: "sm",
-					onClick: () => F(!0),
+					onClick: () => V(!0),
 					children: [/* @__PURE__ */ v(i, { className: "mr-2 h-4 w-4" }), " Book This Service"]
 				})]
 			}),
+			/* @__PURE__ */ v(A, {
+				icon: /* @__PURE__ */ v(p, { className: "h-4 w-4" }),
+				children: "Everything you need to decide on this service. Compare packages and pricing, see exactly what you will receive and what is required from you, read the FAQ, and review the provider behind it — then book the package that fits your project."
+			}),
+			/* @__PURE__ */ v(k, {
+				storageKey: "proserviceworld-service-details",
+				steps: [
+					{
+						id: "packages",
+						label: "Compare packages",
+						description: "Review tiers, features, and pricing to pick the right fit.",
+						icon: /* @__PURE__ */ v(p, { className: "h-4 w-4" }),
+						onClick: () => L("packages")
+					},
+					{
+						id: "requirements",
+						label: "Check what is required",
+						description: "See the deliverables and what the provider needs from you.",
+						icon: /* @__PURE__ */ v(c, { className: "h-4 w-4" }),
+						onClick: () => L("requirements")
+					},
+					{
+						id: "book",
+						label: "Book this service",
+						description: "Select a package and confirm your booking.",
+						icon: /* @__PURE__ */ v(i, { className: "h-4 w-4" }),
+						onClick: () => V(!0)
+					}
+				]
+			}),
 			/* @__PURE__ */ y("div", {
 				className: "grid gap-6 lg:grid-cols-3",
 				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 +117,53 @@ function E() {
 											/* @__PURE__ */ y("div", {
 												className: "flex items-center gap-2",
 												children: [
-													R.featured && /* @__PURE__ */ v(b, { children: "Featured" }),
+													W.featured && /* @__PURE__ */ v(b, { children: "Featured" }),
 													/* @__PURE__ */ v(b, {
 														variant: "secondary",
-														children: R.category.replace(/_/g, " ")
+														children: W.category.replace(/_/g, " ")
 													}),
 													/* @__PURE__ */ v(b, {
 														variant: "outline",
-														children: R.subcategory
+														children: W.subcategory
 													})
 												]
 											}),
 											/* @__PURE__ */ v("h1", {
-												className: "text-2xl font-bold",
-												children: R.title
+												className: "text-2xl font-bold tracking-tight",
+												children: W.title
 											}),
 											/* @__PURE__ */ v("p", {
 												className: "max-w-2xl text-text-secondary",
-												children: R.description
+												children: W.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: q
 										}), /* @__PURE__ */ y("p", {
 											className: "text-xs text-text-secondary",
-											children: [R.pricing.type, " pricing"]
+											children: [W.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: W.rating
 												}),
 												/* @__PURE__ */ y("span", {
 													className: "text-xs text-text-secondary",
 													children: [
 														"(",
-														R.providerReviews,
+														W.providerReviews,
 														" reviews)"
 													]
 												})
@@ -140,58 +172,61 @@ function E() {
 										/* @__PURE__ */ y("div", {
 											className: "flex items-center gap-2",
 											children: [/* @__PURE__ */ v(l, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("span", {
-												className: "text-sm",
-												children: [R.duration.typical, " days typical"]
+												className: "text-sm tabular-nums",
+												children: [W.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: [W.totalBookings, " bookings"]
 											})]
 										}),
 										/* @__PURE__ */ y("div", {
 											className: "flex items-center gap-2",
 											children: [/* @__PURE__ */ v(i, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("span", {
-												className: "text-sm",
+												className: "text-sm tabular-nums",
 												children: [
-													R.duration.min,
+													W.duration.min,
 													"-",
-													R.duration.max,
+													W.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-text-secondary" }), R.tags.map((e) => /* @__PURE__ */ v(b, {
+								W.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" }), W.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-text-secondary hover:text-text-primary"}`,
+							className: "flex gap-1 border-b border-border-seam",
+							children: K.map(({ key: e, label: t, icon: n }) => /* @__PURE__ */ y("button", {
+								onClick: () => L(e),
+								"aria-pressed": I === 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 ${I === 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", {
+						I === "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-action-primary-bg/5" : ""}`,
+							children: W.packages.map((e) => /* @__PURE__ */ y(D, {
+								treatment: e.popular ? "glass" : "plain",
+								glow: e.popular,
+								className: `relative border-border-seam ${H === 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-action-primary-bg text-action-primary-text",
+											className: "bg-accent-blue text-action-primary-text",
 											children: "Most Popular"
 										})
 									}),
@@ -209,7 +244,7 @@ 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-text-secondary",
@@ -223,14 +258,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);
+													U(e.id), V(!0);
 												},
 												children: "Select Package"
 											})
@@ -239,264 +274,296 @@ 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", {
+						I === "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(j, {
+								collapsedHeight: 180,
+								children: /* @__PURE__ */ v("ul", {
+									className: "grid gap-3 sm:grid-cols-2",
+									children: W.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))
+								})
+							}) })]
+						}),
+						I === "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(j, {
+								collapsedHeight: 180,
+								children: /* @__PURE__ */ v("ul", {
+									className: "space-y-3",
+									children: W.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))
+								})
+							}) })]
+						}),
+						I === "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-text-secondary",
-								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-text-secondary" }) : /* @__PURE__ */ v(o, { className: "h-4 w-4 text-text-secondary" })]
-							}), M === e.id && /* @__PURE__ */ v(C, {
-								className: "border-t pt-4",
-								children: /* @__PURE__ */ v("p", {
-									className: "text-sm text-text-secondary",
-									children: e.answer
+							children: W.faq.length === 0 ? /* @__PURE__ */ v(S, {
+								className: "border-border-seam",
+								children: /* @__PURE__ */ v(C, {
+									className: "py-6",
+									children: /* @__PURE__ */ v(O, {
+										illustration: "empty-generic",
+										title: "No FAQ items yet",
+										description: "This service does not have any frequently asked questions yet. Message the provider if you have a question before booking."
+									})
 								})
-							})] }, e.id))
+							}) : W.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": R === e.id,
+									onClick: () => z(R === e.id ? null : e.id),
+									children: [/* @__PURE__ */ v("span", {
+										className: "font-medium",
+										children: e.question
+									}), R === e.id ? /* @__PURE__ */ v(s, { className: "h-4 w-4 text-text-secondary" }) : /* @__PURE__ */ v(o, { className: "h-4 w-4 text-text-secondary" })]
+								}), R === 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-action-primary-bg/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-text-secondary",
-									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-text-secondary",
-											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-text-secondary",
-													children: [
-														"(",
-														z.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",
-											children: [z.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",
-											children: [z.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",
-											children: [z.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",
-											children: z.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",
-											children: [
-												"$",
-												z.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: z.location
-										})]
-									})
-								]
-							}),
-							/* @__PURE__ */ y("div", {
-								className: "space-y-2 border-t 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: 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-text-secondary",
-									children: "Languages"
-								}), /* @__PURE__ */ v("div", {
-									className: "flex flex-wrap gap-1",
-									children: z.languages.map((e) => /* @__PURE__ */ v(b, {
+					children: [G && /* @__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: G.name.charAt(0)
+									}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "font-medium",
+										children: G.name
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: G.businessName
+									})] })]
+								}),
+								G.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: G.rating
+													}),
+													/* @__PURE__ */ y("span", {
+														className: "text-text-secondary tabular-nums",
+														children: [
+															"(",
+															G.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: [G.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: [G.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: [G.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: G.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: [
+													"$",
+													G.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: G.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: G.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: G.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-text-secondary",
-									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-text-secondary",
-								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-text-secondary",
-								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: ["$", W.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: ",
+										W.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: [W.pricing.type, " pricing model"] })]
+								}),
+								/* @__PURE__ */ y(x, {
+									className: "w-full",
+									onClick: () => V(!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",
+			B && /* @__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: () => V(!1),
 							children: "Close"
 						})]
 					}) }), /* @__PURE__ */ y(C, {
@@ -504,26 +571,27 @@ function E() {
 						children: [
 							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
 								className: "font-medium",
-								children: R.title
+								children: W.title
 							}), /* @__PURE__ */ y("p", {
 								className: "text-sm text-text-secondary",
-								children: ["by ", R.providerName]
+								children: ["by ", W.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-action-primary-bg/5" : "hover:bg-bg-sunken/50"}`,
+								}), W.packages.map((e) => /* @__PURE__ */ y("button", {
+									onClick: () => U(e.id),
+									"aria-pressed": H === 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 ${H === 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", {
@@ -542,11 +610,11 @@ function E() {
 								children: [/* @__PURE__ */ v(x, {
 									variant: "outline",
 									className: "flex-1",
-									onClick: () => F(!1),
+									onClick: () => V(!1),
 									children: "Cancel"
 								}), /* @__PURE__ */ v(x, {
 									className: "flex-1",
-									disabled: !I,
+									disabled: !H,
 									children: "Confirm Booking"
 								})]
 							})
@@ -558,6 +626,6 @@ function E() {
 	});
 }
 //#endregion
-export { E as ServiceDetailsPage };
+export { M as ServiceDetailsPage };
 
 //# sourceMappingURL=ServiceDetailsPage.js.map