@burdenoff/microfe-proserviceworld 2026.624.1 → 2026.626.1

package/dist/proserviceworld/pages/ProviderDetailPage.js

@@ -1,92 +1,122 @@
 import { useProServiceWorldStore as e } from "../store/proserviceworldStore.js";
 import { useState as t } from "react";
-import { Award as n, Briefcase as r, Calendar as i, CheckCircle as a, Globe as o, MapPin as s, MessageSquare as c, Share2 as l, Star as u, Users as d } from "lucide-react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Badge as m, Button as h, Card as g, CardContent as _, CardHeader as v, CardTitle as y } from "@burdenoff/fe-libs/ui";
+import { Award as n, Briefcase as r, Calendar as i, CheckCircle as a, MapPin as o, MessageSquare as s, Share2 as c, Star as l, Users as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Badge as p, Button as m, CTAOverflowMenu as h, Card as g, CardContent as _, CardHeader as v, CardTitle as y, EmphasisPanel as b, GlassCard as x, IllustratedEmptyState as S, NextSteps as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
 //#region src/proserviceworld/pages/ProviderDetailPage.tsx
-function b() {
-	let { providers: b, services: x, reviews: S } = e(), [C, w] = t("overview"), T = b[0], E = x.filter((e) => e.providerId === T.id), D = S.filter((e) => e.providerName === T.name), O = [
+function T() {
+	let { providers: T, services: E, reviews: D } = e(), [O, k] = t("overview"), A = T[0], j = E.filter((e) => e.providerId === A.id), M = D.filter((e) => e.providerName === A.name), N = [
 		{
 			id: "overview",
 			label: "Overview"
 		},
 		{
 			id: "services",
-			label: `Services (${E.length})`
+			label: `Services (${j.length})`
 		},
 		{
 			id: "reviews",
-			label: `Reviews (${D.length})`
+			label: `Reviews (${M.length})`
 		}
 	];
-	return /* @__PURE__ */ p("div", {
-		className: "space-y-6 p-6",
+	return /* @__PURE__ */ f("div", {
+		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ d(w, {
+				icon: /* @__PURE__ */ d(r, { className: "h-4 w-4" }),
+				children: "A full picture of this provider before you engage. Review their background, specializations, certifications, and ratings, browse the services they offer, and read client reviews — then contact them or book a consultation with confidence."
+			}),
+			/* @__PURE__ */ d(C, {
+				storageKey: "proserviceworld-provider-detail",
+				steps: [
+					{
+						id: "services",
+						label: "Browse their services",
+						description: "See what this provider offers and starting prices.",
+						icon: /* @__PURE__ */ d(r, { className: "h-4 w-4" }),
+						onClick: () => k("services")
+					},
+					{
+						id: "reviews",
+						label: "Read client reviews",
+						description: "Check ratings and feedback from past clients.",
+						icon: /* @__PURE__ */ d(l, { className: "h-4 w-4" }),
+						onClick: () => k("reviews")
+					},
+					{
+						id: "contact",
+						label: "Contact the provider",
+						description: "Start a conversation or book a consultation.",
+						icon: /* @__PURE__ */ d(s, { className: "h-4 w-4" }),
+						onClick: () => k("overview")
+					}
+				]
+			}),
+			/* @__PURE__ */ f("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ f("div", {
+				children: [/* @__PURE__ */ d("div", {
 					className: "lg:col-span-2",
-					children: /* @__PURE__ */ f(g, { children: /* @__PURE__ */ f(_, {
-						className: "p-6",
-						children: /* @__PURE__ */ p("div", {
+					children: /* @__PURE__ */ d(b, {
+						className: "relative overflow-hidden",
+						children: /* @__PURE__ */ f("div", {
 							className: "flex items-start space-x-6",
-							children: [/* @__PURE__ */ f("div", {
-								className: "h-20 w-20 rounded-full bg-action-primary-bg/10 flex items-center justify-center shrink-0",
-								children: /* @__PURE__ */ p("span", {
-									className: "text-primary text-2xl font-bold",
-									children: [T.name.charAt(0), T.name.split(" ")[1]?.charAt(0)]
+							children: [/* @__PURE__ */ d("div", {
+								className: "h-20 w-20 rounded-full bg-accent-soft flex items-center justify-center shrink-0",
+								children: /* @__PURE__ */ f("span", {
+									className: "text-text-primary text-2xl font-bold",
+									children: [A.name.charAt(0), A.name.split(" ")[1]?.charAt(0)]
 								})
-							}), /* @__PURE__ */ p("div", {
+							}), /* @__PURE__ */ f("div", {
 								className: "flex-1",
 								children: [
-									/* @__PURE__ */ p("div", {
+									/* @__PURE__ */ f("div", {
 										className: "flex items-center gap-3 mb-1",
-										children: [/* @__PURE__ */ f("h1", {
-											className: "text-2xl font-bold",
-											children: T.businessName
-										}), T.verified && /* @__PURE__ */ p(m, {
+										children: [/* @__PURE__ */ d("h1", {
+											className: "text-2xl font-bold tracking-tight",
+											children: A.businessName
+										}), A.verified && /* @__PURE__ */ f(p, {
 											variant: "default",
-											children: [/* @__PURE__ */ f(a, { className: "h-3 w-3 mr-1" }), "Verified"]
+											children: [/* @__PURE__ */ d(a, { className: "h-3 w-3 mr-1" }), "Verified"]
 										})]
 									}),
-									/* @__PURE__ */ f("p", {
+									/* @__PURE__ */ d("p", {
 										className: "text-text-secondary mb-2",
-										children: T.name
+										children: A.name
 									}),
-									/* @__PURE__ */ f("p", {
+									/* @__PURE__ */ d("p", {
 										className: "text-sm text-text-secondary mb-4",
-										children: T.tagline
+										children: A.tagline
 									}),
-									/* @__PURE__ */ p("div", {
-										className: "flex items-center gap-4 text-sm",
+									/* @__PURE__ */ f("div", {
+										className: "flex flex-wrap items-center gap-4 text-sm",
 										children: [
-											/* @__PURE__ */ p("div", {
+											/* @__PURE__ */ f("div", {
 												className: "flex items-center",
 												children: [
-													/* @__PURE__ */ f(u, { className: "h-4 w-4 text-yellow-400 fill-current mr-1" }),
-													/* @__PURE__ */ f("span", {
-														className: "font-medium",
-														children: T.rating.toFixed(1)
+													/* @__PURE__ */ d(l, { className: "h-4 w-4 text-status-warning-text fill-current mr-1" }),
+													/* @__PURE__ */ d("span", {
+														className: "font-medium tabular-nums",
+														children: A.rating.toFixed(1)
 													}),
-													/* @__PURE__ */ p("span", {
+													/* @__PURE__ */ f("span", {
 														className: "text-text-secondary ml-1",
 														children: [
 															"(",
-															T.totalReviews,
+															A.totalReviews,
 															" reviews)"
 														]
 													})
 												]
 											}),
-											/* @__PURE__ */ p("div", {
+											/* @__PURE__ */ f("div", {
 												className: "flex items-center text-text-secondary",
-												children: [/* @__PURE__ */ f(s, { className: "h-4 w-4 mr-1" }), T.location]
+												children: [/* @__PURE__ */ d(o, { className: "h-4 w-4 mr-1" }), A.location]
 											}),
-											/* @__PURE__ */ p("div", {
+											/* @__PURE__ */ f("div", {
 												className: "flex items-center text-text-secondary",
 												children: [
-													/* @__PURE__ */ f(r, { className: "h-4 w-4 mr-1" }),
-													T.yearsExperience,
+													/* @__PURE__ */ d(r, { className: "h-4 w-4 mr-1" }),
+													A.yearsExperience,
 													" years"
 												]
 											})
@@ -95,223 +125,250 @@ function b() {
 								]
 							})]
 						})
-					}) })
-				}), /* @__PURE__ */ f(g, { children: /* @__PURE__ */ p(_, {
-					className: "p-6 space-y-4",
-					children: [
-						/* @__PURE__ */ p("div", {
-							className: "text-center",
-							children: [/* @__PURE__ */ p("div", {
-								className: "text-2xl font-bold",
+					})
+				}), /* @__PURE__ */ d(x, {
+					treatment: "glass",
+					glow: !0,
+					className: "border-border-seam",
+					children: /* @__PURE__ */ f(_, {
+						className: "p-6 space-y-4",
+						children: [
+							/* @__PURE__ */ f("div", {
+								className: "text-center",
+								children: [/* @__PURE__ */ f("div", {
+									className: "text-2xl font-bold tabular-nums",
+									children: [
+										"$",
+										A.hourlyRate,
+										"/hr"
+									]
+								}), /* @__PURE__ */ d("p", {
+									className: "text-sm text-text-secondary",
+									children: "Starting rate"
+								})]
+							}),
+							/* @__PURE__ */ f(m, {
+								className: "w-full",
+								children: [/* @__PURE__ */ d(s, { className: "h-4 w-4 mr-2" }), "Contact Provider"]
+							}),
+							/* @__PURE__ */ d(h, {
+								className: "justify-center",
+								actions: [{
+									label: "Book Consultation",
+									onSelect: () => {},
+									icon: /* @__PURE__ */ d(i, { className: "h-4 w-4" })
+								}, {
+									label: "Share Profile",
+									onSelect: () => {},
+									icon: /* @__PURE__ */ d(c, { className: "h-4 w-4" })
+								}]
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "grid grid-cols-2 gap-4 text-sm pt-4 border-t border-border-seam",
 								children: [
-									"$",
-									T.hourlyRate,
-									"/hr"
+									/* @__PURE__ */ f("div", {
+										className: "text-center p-3 bg-bg-sunken rounded",
+										children: [/* @__PURE__ */ f("div", {
+											className: "font-semibold tabular-nums",
+											children: [A.responseTime, "h"]
+										}), /* @__PURE__ */ d("div", {
+											className: "text-text-secondary",
+											children: "Response"
+										})]
+									}),
+									/* @__PURE__ */ f("div", {
+										className: "text-center p-3 bg-bg-sunken rounded",
+										children: [/* @__PURE__ */ f("div", {
+											className: "font-semibold tabular-nums",
+											children: [A.completionRate, "%"]
+										}), /* @__PURE__ */ d("div", {
+											className: "text-text-secondary",
+											children: "Completion"
+										})]
+									}),
+									/* @__PURE__ */ f("div", {
+										className: "text-center p-3 bg-bg-sunken rounded",
+										children: [/* @__PURE__ */ d("div", {
+											className: "font-semibold tabular-nums",
+											children: A.projectsCompleted
+										}), /* @__PURE__ */ d("div", {
+											className: "text-text-secondary",
+											children: "Projects"
+										})]
+									}),
+									/* @__PURE__ */ f("div", {
+										className: "text-center p-3 bg-bg-sunken rounded",
+										children: [/* @__PURE__ */ d("div", {
+											className: "font-semibold tabular-nums",
+											children: A.activeProjects
+										}), /* @__PURE__ */ d("div", {
+											className: "text-text-secondary",
+											children: "Active"
+										})]
+									})
 								]
-							}), /* @__PURE__ */ f("p", {
-								className: "text-sm text-text-secondary",
-								children: "Starting rate"
-							})]
-						}),
-						/* @__PURE__ */ p(h, {
-							className: "w-full",
-							children: [/* @__PURE__ */ f(c, { className: "h-4 w-4 mr-2" }), "Contact Provider"]
-						}),
-						/* @__PURE__ */ p(h, {
-							variant: "outline",
-							className: "w-full",
-							children: [/* @__PURE__ */ f(i, { className: "h-4 w-4 mr-2" }), "Book Consultation"]
-						}),
-						/* @__PURE__ */ p(h, {
-							variant: "ghost",
-							className: "w-full",
-							children: [/* @__PURE__ */ f(l, { className: "h-4 w-4 mr-2" }), "Share Profile"]
-						}),
-						/* @__PURE__ */ p("div", {
-							className: "grid grid-cols-2 gap-4 text-sm pt-4 border-t",
-							children: [
-								/* @__PURE__ */ p("div", {
-									className: "text-center p-3 bg-bg-sunken rounded",
-									children: [/* @__PURE__ */ p("div", {
-										className: "font-semibold",
-										children: [T.responseTime, "h"]
-									}), /* @__PURE__ */ f("div", {
-										className: "text-text-secondary",
-										children: "Response"
-									})]
-								}),
-								/* @__PURE__ */ p("div", {
-									className: "text-center p-3 bg-bg-sunken rounded",
-									children: [/* @__PURE__ */ p("div", {
-										className: "font-semibold",
-										children: [T.completionRate, "%"]
-									}), /* @__PURE__ */ f("div", {
-										className: "text-text-secondary",
-										children: "Completion"
-									})]
-								}),
-								/* @__PURE__ */ p("div", {
-									className: "text-center p-3 bg-bg-sunken rounded",
-									children: [/* @__PURE__ */ f("div", {
-										className: "font-semibold",
-										children: T.projectsCompleted
-									}), /* @__PURE__ */ f("div", {
-										className: "text-text-secondary",
-										children: "Projects"
-									})]
-								}),
-								/* @__PURE__ */ p("div", {
-									className: "text-center p-3 bg-bg-sunken rounded",
-									children: [/* @__PURE__ */ f("div", {
-										className: "font-semibold",
-										children: T.activeProjects
-									}), /* @__PURE__ */ f("div", {
-										className: "text-text-secondary",
-										children: "Active"
-									})]
-								})
-							]
-						})
-					]
-				}) })]
+							})
+						]
+					})
+				})]
 			}),
-			/* @__PURE__ */ f("div", {
-				className: "border-b",
-				children: /* @__PURE__ */ f("nav", {
+			/* @__PURE__ */ d("div", {
+				className: "border-b border-border-seam",
+				children: /* @__PURE__ */ d("nav", {
 					className: "-mb-px flex space-x-8",
-					children: O.map((e) => /* @__PURE__ */ f("button", {
-						onClick: () => w(e.id),
-						className: `py-3 px-1 border-b-2 font-medium text-sm transition-colors ${C === e.id ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
+					children: N.map((e) => /* @__PURE__ */ d("button", {
+						onClick: () => k(e.id),
+						"aria-pressed": O === e.id,
+						className: `py-3 px-1 border-b-2 font-medium text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${O === e.id ? "border-accent-blue text-accent-blue" : "border-transparent text-text-secondary hover:text-text-primary"}`,
 						children: e.label
 					}, e.id))
 				})
 			}),
-			C === "overview" && /* @__PURE__ */ p("div", {
+			O === "overview" && /* @__PURE__ */ f("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ p("div", {
+				children: [/* @__PURE__ */ f("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						/* @__PURE__ */ p(g, { children: [/* @__PURE__ */ f(v, { children: /* @__PURE__ */ f(y, { children: "About" }) }), /* @__PURE__ */ f(_, { children: /* @__PURE__ */ f("p", {
-							className: "text-text-secondary",
-							children: T.description
-						}) })] }),
-						/* @__PURE__ */ p(g, { children: [/* @__PURE__ */ f(v, { children: /* @__PURE__ */ f(y, { children: "Specializations" }) }), /* @__PURE__ */ f(_, { children: /* @__PURE__ */ f("div", {
-							className: "flex flex-wrap gap-2",
-							children: T.specializations.map((e) => /* @__PURE__ */ f(m, {
-								variant: "secondary",
-								children: e
-							}, e))
-						}) })] }),
-						/* @__PURE__ */ p(g, { children: [/* @__PURE__ */ f(v, { children: /* @__PURE__ */ f(y, { children: "Certifications" }) }), /* @__PURE__ */ f(_, {
-							className: "space-y-3",
-							children: T.certifications.map((e) => /* @__PURE__ */ p("div", {
-								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ f(n, { className: "h-5 w-5 text-blue-600" }), /* @__PURE__ */ f("span", { children: e })]
-							}, e))
-						})] })
+						/* @__PURE__ */ f(g, {
+							className: "border-border-seam",
+							children: [/* @__PURE__ */ d(v, { children: /* @__PURE__ */ d(y, { children: "About" }) }), /* @__PURE__ */ d(_, { children: /* @__PURE__ */ d("p", {
+								className: "text-text-secondary",
+								children: A.description
+							}) })]
+						}),
+						/* @__PURE__ */ f(g, {
+							className: "border-border-seam",
+							children: [/* @__PURE__ */ d(v, { children: /* @__PURE__ */ d(y, { children: "Specializations" }) }), /* @__PURE__ */ d(_, { children: /* @__PURE__ */ d("div", {
+								className: "flex flex-wrap gap-2",
+								children: A.specializations.map((e) => /* @__PURE__ */ d(p, {
+									variant: "secondary",
+									children: e
+								}, e))
+							}) })]
+						}),
+						/* @__PURE__ */ f(g, {
+							className: "border-border-seam",
+							children: [/* @__PURE__ */ d(v, { children: /* @__PURE__ */ d(y, { children: "Certifications" }) }), /* @__PURE__ */ d(_, {
+								className: "space-y-3",
+								children: A.certifications.map((e) => /* @__PURE__ */ f("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ d(n, { className: "h-5 w-5 text-accent-blue" }), /* @__PURE__ */ d("span", { children: e })]
+								}, e))
+							})]
+						})
 					]
-				}), /* @__PURE__ */ p("div", {
+				}), /* @__PURE__ */ f("div", {
 					className: "space-y-6",
-					children: [/* @__PURE__ */ p(g, { children: [/* @__PURE__ */ f(v, { children: /* @__PURE__ */ f(y, { children: "Details" }) }), /* @__PURE__ */ p(_, {
-						className: "space-y-3 text-sm",
-						children: [
-							/* @__PURE__ */ p("div", {
-								className: "flex justify-between",
-								children: [/* @__PURE__ */ f("span", {
-									className: "text-text-secondary",
-									children: "Location"
-								}), /* @__PURE__ */ f("span", { children: T.location })]
-							}),
-							/* @__PURE__ */ p("div", {
-								className: "flex justify-between",
-								children: [/* @__PURE__ */ f("span", {
-									className: "text-text-secondary",
-									children: "Languages"
-								}), /* @__PURE__ */ f("span", { children: T.languages.join(", ") })]
-							}),
-							/* @__PURE__ */ p("div", {
-								className: "flex justify-between",
-								children: [/* @__PURE__ */ f("span", {
-									className: "text-text-secondary",
-									children: "Member Since"
-								}), /* @__PURE__ */ f("span", { children: new Date(T.joinedDate).toLocaleDateString("en-US", {
-									month: "short",
-									year: "numeric"
-								}) })]
-							}),
-							/* @__PURE__ */ p("div", {
-								className: "flex justify-between",
-								children: [/* @__PURE__ */ f("span", {
-									className: "text-text-secondary",
-									children: "Category"
-								}), /* @__PURE__ */ f("span", {
-									className: "capitalize",
-									children: T.category.replace("_", " ")
-								})]
-							})
-						]
-					})] }), /* @__PURE__ */ p(g, { children: [/* @__PURE__ */ f(v, { children: /* @__PURE__ */ f(y, { children: "Similar Providers" }) }), /* @__PURE__ */ f(_, {
-						className: "space-y-3",
-						children: b.filter((e) => e.id !== T.id).slice(0, 3).map((e) => /* @__PURE__ */ p("div", {
-							className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ f(g, {
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ d(v, { children: /* @__PURE__ */ d(y, { children: "Details" }) }), /* @__PURE__ */ f(_, {
+							className: "space-y-3 text-sm",
 							children: [
 								/* @__PURE__ */ f("div", {
-									className: "h-8 w-8 rounded-full bg-bg-sunken flex items-center justify-center text-xs font-medium",
-									children: e.name.charAt(0)
+									className: "flex justify-between",
+									children: [/* @__PURE__ */ d("span", {
+										className: "text-text-secondary",
+										children: "Location"
+									}), /* @__PURE__ */ d("span", { children: A.location })]
 								}),
-								/* @__PURE__ */ p("div", {
-									className: "flex-1 min-w-0",
-									children: [/* @__PURE__ */ f("p", {
-										className: "text-sm font-medium truncate",
-										children: e.businessName
-									}), /* @__PURE__ */ f("p", {
-										className: "text-xs text-text-secondary",
-										children: e.specializations[0]
-									})]
+								/* @__PURE__ */ f("div", {
+									className: "flex justify-between",
+									children: [/* @__PURE__ */ d("span", {
+										className: "text-text-secondary",
+										children: "Languages"
+									}), /* @__PURE__ */ d("span", { children: A.languages.join(", ") })]
 								}),
-								/* @__PURE__ */ p("div", {
-									className: "flex items-center text-xs",
-									children: [/* @__PURE__ */ f(u, { className: "h-3 w-3 text-yellow-400 fill-current mr-0.5" }), e.rating.toFixed(1)]
+								/* @__PURE__ */ f("div", {
+									className: "flex justify-between",
+									children: [/* @__PURE__ */ d("span", {
+										className: "text-text-secondary",
+										children: "Member Since"
+									}), /* @__PURE__ */ d("span", { children: new Date(A.joinedDate).toLocaleDateString("en-US", {
+										month: "short",
+										year: "numeric"
+									}) })]
+								}),
+								/* @__PURE__ */ f("div", {
+									className: "flex justify-between",
+									children: [/* @__PURE__ */ d("span", {
+										className: "text-text-secondary",
+										children: "Category"
+									}), /* @__PURE__ */ d("span", {
+										className: "capitalize",
+										children: A.category.replace("_", " ")
+									})]
 								})
 							]
-						}, e.id))
-					})] })]
+						})]
+					}), /* @__PURE__ */ f(g, {
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ d(v, { children: /* @__PURE__ */ d(y, { children: "Similar Providers" }) }), /* @__PURE__ */ d(_, {
+							className: "space-y-3",
+							children: T.filter((e) => e.id !== A.id).slice(0, 3).map((e) => /* @__PURE__ */ f("div", {
+								className: "flex items-center gap-3",
+								children: [
+									/* @__PURE__ */ d("div", {
+										className: "h-8 w-8 rounded-full bg-bg-sunken flex items-center justify-center text-xs font-medium",
+										children: e.name.charAt(0)
+									}),
+									/* @__PURE__ */ f("div", {
+										className: "flex-1 min-w-0",
+										children: [/* @__PURE__ */ d("p", {
+											className: "text-sm font-medium truncate",
+											children: e.businessName
+										}), /* @__PURE__ */ d("p", {
+											className: "text-xs text-text-secondary",
+											children: e.specializations[0]
+										})]
+									}),
+									/* @__PURE__ */ f("div", {
+										className: "flex items-center text-xs",
+										children: [/* @__PURE__ */ d(l, { className: "h-3 w-3 text-status-warning-text fill-current mr-0.5" }), /* @__PURE__ */ d("span", {
+											className: "tabular-nums",
+											children: e.rating.toFixed(1)
+										})]
+									})
+								]
+							}, e.id))
+						})]
+					})]
 				})]
 			}),
-			C === "services" && /* @__PURE__ */ f("div", {
+			O === "services" && /* @__PURE__ */ d("div", {
 				className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
-				children: E.length > 0 ? E.map((e) => /* @__PURE__ */ f(g, {
-					className: "hover:shadow-md transition-shadow",
-					children: /* @__PURE__ */ p(_, {
+				children: j.length > 0 ? j.map((e) => /* @__PURE__ */ d(x, {
+					treatment: "plain",
+					className: "border-border-seam transition-shadow hover:shadow-pop",
+					children: /* @__PURE__ */ f(_, {
 						className: "p-6",
 						children: [
-							/* @__PURE__ */ f("h3", {
+							/* @__PURE__ */ d("h3", {
 								className: "font-semibold mb-2",
 								children: e.title
 							}),
-							/* @__PURE__ */ f("p", {
+							/* @__PURE__ */ d("p", {
 								className: "text-sm text-text-secondary mb-3 line-clamp-2",
 								children: e.description
 							}),
-							/* @__PURE__ */ f("div", {
+							/* @__PURE__ */ d("div", {
 								className: "flex flex-wrap gap-1 mb-3",
-								children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ f(m, {
+								children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ d(p, {
 									variant: "outline",
 									className: "text-xs",
 									children: e
 								}, e))
 							}),
-							/* @__PURE__ */ p("div", {
-								className: "flex justify-between border-t pt-3",
-								children: [/* @__PURE__ */ p("span", {
-									className: "font-medium",
+							/* @__PURE__ */ f("div", {
+								className: "flex justify-between border-t border-border-seam pt-3",
+								children: [/* @__PURE__ */ f("span", {
+									className: "font-medium tabular-nums",
 									children: ["From $", e.pricing.basePrice.toLocaleString()]
-								}), /* @__PURE__ */ p("span", {
-									className: "text-sm text-text-secondary",
+								}), /* @__PURE__ */ f("span", {
+									className: "text-sm text-text-secondary tabular-nums",
 									children: [e.duration.typical, " days"]
 								})]
 							}),
-							/* @__PURE__ */ f(h, {
+							/* @__PURE__ */ d(m, {
 								variant: "outline",
 								size: "sm",
 								className: "w-full mt-3",
@@ -319,146 +376,163 @@ function b() {
 							})
 						]
 					})
-				}, e.id)) : /* @__PURE__ */ p("div", {
-					className: "col-span-full text-center py-12",
-					children: [/* @__PURE__ */ f(o, { className: "h-12 w-12 mx-auto text-text-secondary mb-4" }), /* @__PURE__ */ f("p", {
-						className: "text-text-secondary",
-						children: "No services listed yet"
-					})]
+				}, e.id)) : /* @__PURE__ */ d("div", {
+					className: "col-span-full",
+					children: /* @__PURE__ */ d(S, {
+						illustration: "empty-data",
+						title: "No services listed yet",
+						description: "This provider has not published any services."
+					})
 				})
 			}),
-			C === "reviews" && /* @__PURE__ */ p("div", {
+			O === "reviews" && /* @__PURE__ */ f("div", {
 				className: "space-y-4",
-				children: [/* @__PURE__ */ f(g, { children: /* @__PURE__ */ f(_, {
-					className: "p-6",
-					children: /* @__PURE__ */ p("div", {
-						className: "flex items-center gap-8",
-						children: [/* @__PURE__ */ p("div", {
-							className: "text-center",
-							children: [
-								/* @__PURE__ */ f("div", {
-									className: "text-4xl font-bold",
-									children: T.rating.toFixed(1)
-								}),
-								/* @__PURE__ */ f("div", {
-									className: "flex justify-center mt-1",
-									children: [
-										1,
-										2,
-										3,
-										4,
-										5
-									].map((e) => /* @__PURE__ */ f(u, { className: `h-4 w-4 ${e <= Math.round(T.rating) ? "text-yellow-400 fill-current" : "text-text-secondary"}` }, e))
-								}),
-								/* @__PURE__ */ p("p", {
-									className: "text-sm text-text-secondary mt-1",
-									children: [T.totalReviews, " reviews"]
+				children: [/* @__PURE__ */ d(x, {
+					treatment: "metric",
+					className: "border-border-seam",
+					children: /* @__PURE__ */ d(_, {
+						className: "p-6",
+						children: /* @__PURE__ */ f("div", {
+							className: "flex flex-col gap-8 sm:flex-row sm:items-center",
+							children: [/* @__PURE__ */ f("div", {
+								className: "text-center",
+								children: [
+									/* @__PURE__ */ d("div", {
+										className: "text-4xl font-bold tabular-nums",
+										children: A.rating.toFixed(1)
+									}),
+									/* @__PURE__ */ d("div", {
+										className: "flex justify-center mt-1",
+										children: [
+											1,
+											2,
+											3,
+											4,
+											5
+										].map((e) => /* @__PURE__ */ d(l, { className: `h-4 w-4 ${e <= Math.round(A.rating) ? "text-status-warning-text fill-current" : "text-text-secondary"}` }, e))
+									}),
+									/* @__PURE__ */ f("p", {
+										className: "text-sm text-text-secondary mt-1",
+										children: [A.totalReviews, " reviews"]
+									})
+								]
+							}), /* @__PURE__ */ d("div", {
+								className: "flex-1 space-y-1",
+								children: [
+									5,
+									4,
+									3,
+									2,
+									1
+								].map((e) => {
+									let t = M.filter((t) => Math.round(t.rating) === e).length, n = M.length > 0 ? t / M.length * 100 : 0;
+									return /* @__PURE__ */ f("div", {
+										className: "flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ d("span", {
+												className: "text-sm w-3 tabular-nums",
+												children: e
+											}),
+											/* @__PURE__ */ d(l, { className: "h-3 w-3 text-status-warning-text fill-current" }),
+											/* @__PURE__ */ d("div", {
+												className: "flex-1 bg-bg-sunken rounded-full h-2",
+												children: /* @__PURE__ */ d("div", {
+													className: "bg-status-warning-text h-2 rounded-full",
+													style: { width: `${n}%` }
+												})
+											}),
+											/* @__PURE__ */ d("span", {
+												className: "text-sm text-text-secondary w-6 text-right tabular-nums",
+												children: t
+											})
+										]
+									}, e);
 								})
-							]
-						}), /* @__PURE__ */ f("div", {
-							className: "flex-1 space-y-1",
-							children: [
-								5,
-								4,
-								3,
-								2,
-								1
-							].map((e) => {
-								let t = D.filter((t) => Math.round(t.rating) === e).length, n = D.length > 0 ? t / D.length * 100 : 0;
-								return /* @__PURE__ */ p("div", {
+							})]
+						})
+					})
+				}), M.map((e) => /* @__PURE__ */ d(g, {
+					className: "border-border-seam",
+					children: /* @__PURE__ */ f(_, {
+						className: "p-6",
+						children: [
+							/* @__PURE__ */ f("div", {
+								className: "flex items-center gap-3 mb-3",
+								children: [/* @__PURE__ */ d("div", {
+									className: "h-10 w-10 rounded-full bg-accent-soft flex items-center justify-center",
+									children: /* @__PURE__ */ d("span", {
+										className: "text-text-primary font-medium",
+										children: e.clientName.charAt(0)
+									})
+								}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("div", {
 									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ d("span", {
+										className: "font-medium",
+										children: e.clientName
+									}), /* @__PURE__ */ d("div", {
+										className: "flex",
+										children: [
+											1,
+											2,
+											3,
+											4,
+											5
+										].map((t) => /* @__PURE__ */ d(l, { className: `h-3 w-3 ${t <= e.rating ? "text-status-warning-text fill-current" : "text-text-secondary"}` }, t))
+									})]
+								}), /* @__PURE__ */ f("p", {
+									className: "text-xs text-text-secondary",
 									children: [
-										/* @__PURE__ */ f("span", {
-											className: "text-sm w-3",
-											children: e
-										}),
-										/* @__PURE__ */ f(u, { className: "h-3 w-3 text-yellow-400 fill-current" }),
-										/* @__PURE__ */ f("div", {
-											className: "flex-1 bg-bg-sunken rounded-full h-2",
-											children: /* @__PURE__ */ f("div", {
-												className: "bg-yellow-400 h-2 rounded-full",
-												style: { width: `${n}%` }
-											})
-										}),
-										/* @__PURE__ */ f("span", {
-											className: "text-sm text-text-secondary w-6 text-right",
-											children: t
+										e.serviceName,
+										" -",
+										" ",
+										new Date(e.createdAt).toLocaleDateString("en-US", {
+											month: "long",
+											day: "numeric",
+											year: "numeric"
 										})
 									]
-								}, e);
-							})
-						})]
-					})
-				}) }), D.map((e) => /* @__PURE__ */ f(g, { children: /* @__PURE__ */ p(_, {
-					className: "p-6",
-					children: [
-						/* @__PURE__ */ p("div", {
-							className: "flex items-center gap-3 mb-3",
-							children: [/* @__PURE__ */ f("div", {
-								className: "h-10 w-10 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-								children: /* @__PURE__ */ f("span", {
-									className: "text-primary font-medium",
-									children: e.clientName.charAt(0)
-								})
-							}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ f("span", {
-									className: "font-medium",
-									children: e.clientName
-								}), /* @__PURE__ */ f("div", {
-									className: "flex",
-									children: [
-										1,
-										2,
-										3,
-										4,
-										5
-									].map((t) => /* @__PURE__ */ f(u, { className: `h-3 w-3 ${t <= e.rating ? "text-yellow-400 fill-current" : "text-text-secondary"}` }, t))
-								})]
-							}), /* @__PURE__ */ p("p", {
-								className: "text-xs text-text-secondary",
+								})] })]
+							}),
+							/* @__PURE__ */ d("p", {
+								className: "text-sm text-text-secondary mb-3",
+								children: e.comment
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "flex flex-wrap gap-4 text-xs text-text-secondary",
 								children: [
-									e.serviceName,
-									" -",
-									" ",
-									new Date(e.createdAt).toLocaleDateString("en-US", {
-										month: "long",
-										day: "numeric",
-										year: "numeric"
+									/* @__PURE__ */ f("span", {
+										className: "tabular-nums",
+										children: ["Value: $", e.projectValue.toLocaleString()]
+									}),
+									/* @__PURE__ */ f("span", {
+										className: "tabular-nums",
+										children: [
+											"Duration: ",
+											e.projectDuration,
+											" days"
+										]
+									}),
+									/* @__PURE__ */ f("span", {
+										className: "flex items-center",
+										children: [
+											/* @__PURE__ */ d(u, { className: "h-3 w-3 mr-1" }),
+											/* @__PURE__ */ d("span", {
+												className: "tabular-nums",
+												children: e.helpful
+											}),
+											" helpful"
+										]
 									})
 								]
-							})] })]
-						}),
-						/* @__PURE__ */ f("p", {
-							className: "text-sm text-text-secondary mb-3",
-							children: e.comment
-						}),
-						/* @__PURE__ */ p("div", {
-							className: "flex gap-4 text-xs text-text-secondary",
-							children: [
-								/* @__PURE__ */ p("span", { children: ["Value: $", e.projectValue.toLocaleString()] }),
-								/* @__PURE__ */ p("span", { children: [
-									"Duration: ",
-									e.projectDuration,
-									" days"
-								] }),
-								/* @__PURE__ */ p("span", {
-									className: "flex items-center",
-									children: [
-										/* @__PURE__ */ f(d, { className: "h-3 w-3 mr-1" }),
-										e.helpful,
-										" helpful"
-									]
-								})
-							]
-						})
-					]
-				}) }, e.id))]
+							})
+						]
+					})
+				}, e.id))]
 			})
 		]
 	});
 }
 //#endregion
-export { b as ProviderDetailPage };
+export { T as ProviderDetailPage };
 
 //# sourceMappingURL=ProviderDetailPage.js.map