import { a as __toESM } from "../_runtime.mjs";
import { n as AnimatePresence, t as motion } from "../_libs/framer-motion.mjs";
import { n as require_react, r as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { t as Section } from "./Section-DMbf0dne.mjs";
import { G as ChevronDown, K as Check, Y as ArrowRight, f as Sparkles, g as ShieldCheck } from "../_libs/lucide-react.mjs";
import { t as pricingCategories } from "./pricing-data-Dybo2dxX.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/pricing--8xDibYT.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
var VISIBLE_COUNT = 6;
function PricingTierCard({ tier }) {
	const [expanded, setExpanded] = (0, import_react.useState)(false);
	const visible = expanded ? tier.features : tier.features.slice(0, VISIBLE_COUNT);
	const hidden = tier.features.length - VISIBLE_COUNT;
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: `relative flex h-full flex-col rounded-3xl border p-7 transition ${tier.featured ? "border-brand bg-gradient-to-br from-deep to-[#2a1f5f] text-deep-foreground shadow-2xl md:-translate-y-2" : "border-border bg-card text-foreground hover:-translate-y-1 hover:shadow-xl"}`,
		children: [
			tier.featured && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
				className: "absolute -top-3 left-7 rounded-full bg-highlight px-3 py-1 text-xs font-bold uppercase tracking-wider text-highlight-foreground shadow-lg",
				children: "Best Seller"
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
				className: "font-display text-lg font-semibold",
				children: tier.name
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
				className: "mt-4 flex items-end gap-1.5",
				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
					className: "font-display text-4xl font-bold tracking-tight",
					children: tier.price
				})
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
				className: `mt-1 text-xs ${tier.featured ? "text-white/60" : "text-muted-foreground"}`,
				children: tier.unit
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
				href: "tel:+18883917298",
				className: `mt-6 rounded-full px-5 py-3 text-center text-sm font-semibold transition ${tier.featured ? "bg-highlight text-highlight-foreground hover:opacity-90" : "bg-brand text-brand-foreground hover:opacity-90"}`,
				children: "Consult an Expert"
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
				className: "mt-7 space-y-2.5",
				children: visible.map((f) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
					className: "flex items-start gap-2.5 text-sm",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: `mt-0.5 h-4 w-4 shrink-0 ${tier.featured ? "text-highlight" : "text-brand"}` }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
						className: tier.featured ? "text-white/90" : "text-foreground",
						children: f
					})]
				}, f))
			}),
			hidden > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
				type: "button",
				onClick: () => setExpanded((v) => !v),
				className: `mt-5 inline-flex items-center justify-center gap-1.5 text-sm font-semibold transition ${tier.featured ? "text-white/90 hover:text-white" : "text-brand hover:opacity-80"}`,
				children: [expanded ? "Show less" : `Read more (+${hidden})`, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: `h-4 w-4 transition-transform ${expanded ? "rotate-180" : ""}` })]
			})
		]
	});
}
var carePlans = [
	{
		name: "Essential Care",
		price: "$99",
		blurb: "Keep your site secure, updated, and online.",
		perks: [
			"Software & plugin updates",
			"Daily backups",
			"Uptime monitoring",
			"SSL & security checks",
			"1 hour of content edits / month",
			"Email support"
		]
	},
	{
		name: "Growth Care",
		price: "$249",
		blurb: "Ongoing improvements to keep momentum.",
		featured: true,
		perks: [
			"Everything in Essential Care",
			"3 hours of edits & updates / month",
			"Monthly performance report",
			"Speed optimization",
			"Basic SEO monitoring",
			"Priority support (48h)"
		]
	},
	{
		name: "Premium Care",
		price: "$499",
		blurb: "A dedicated partner for evolving sites.",
		perks: [
			"Everything in Growth Care",
			"8 hours of edits & updates / month",
			"Conversion & A/B testing",
			"Advanced SEO & analytics",
			"Quarterly strategy call",
			"Dedicated manager (24h)"
		]
	}
];
function PricingPage() {
	const [activeId, setActiveId] = (0, import_react.useState)(pricingCategories[0].id);
	const active = pricingCategories.find((c) => c.id === activeId) ?? pricingCategories[0];
	(0, import_react.useEffect)(() => {
		const hash = window.location.hash.replace("#", "");
		if (hash && pricingCategories.some((c) => c.id === hash)) setActiveId(hash);
	}, []);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, {
			className: "relative overflow-hidden",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "absolute inset-0 -z-10",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute -top-40 left-1/4 h-[500px] w-[500px] rounded-full bg-brand/20 blur-3xl" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute -bottom-40 right-1/4 h-[400px] w-[400px] rounded-full bg-highlight/20 blur-3xl" })]
			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "mx-auto max-w-4xl px-4 py-20 text-center md:px-6 md:py-24",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
						className: "inline-flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1 text-xs font-semibold text-brand backdrop-blur",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sparkles, { className: "h-3 w-3" }), " Pricing & care plans"]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
						className: "mt-5 font-display text-4xl font-bold leading-[1.05] md:text-6xl",
						children: "Find the right plan for you"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
						className: "mx-auto mt-5 max-w-2xl text-lg text-muted-foreground",
						children: "Clear, fixed-scope packages across every service. Choose a plan when you're ready — or call us and we'll tailor one."
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "mt-8 flex flex-wrap justify-center gap-3",
						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", {
							href: "tel:+18883917298",
							className: "inline-flex items-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-brand-foreground shadow-lg shadow-brand/30 transition hover:-translate-y-0.5",
							children: ["Call now ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowRight, { className: "h-4 w-4" })]
						})
					})
				]
			})]
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
			className: "bg-background px-4 md:px-6",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
				className: "mx-auto flex max-w-5xl flex-wrap justify-center gap-2",
				children: pricingCategories.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
					onClick: () => setActiveId(c.id),
					className: `rounded-full px-5 py-2.5 text-sm font-semibold transition ${c.id === activeId ? "bg-brand text-brand-foreground shadow-md" : "border border-border bg-card text-foreground hover:border-brand hover:text-brand"}`,
					children: c.label
				}, c.id))
			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
				className: "mt-6 text-center text-base text-muted-foreground",
				children: active.tagline
			})]
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
			className: "bg-background px-4 pb-20 pt-10 md:px-6",
			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatePresence, {
				mode: "wait",
				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(motion.div, {
					initial: {
						opacity: 0,
						y: 12
					},
					animate: {
						opacity: 1,
						y: 0
					},
					exit: {
						opacity: 0,
						y: -8
					},
					transition: { duration: .25 },
					className: "mx-auto grid max-w-7xl items-start gap-6 sm:grid-cols-2 lg:grid-cols-3",
					children: active.tiers.map((tier) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PricingTierCard, { tier }, tier.name))
				}, active.id)
			})
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
			className: "bg-secondary px-4 py-20 md:px-6",
			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "mx-auto max-w-6xl",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "text-center",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
								className: "text-sm font-semibold uppercase tracking-widest text-brand",
								children: "Care plans"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
								className: "mt-3 font-display text-3xl font-bold md:text-4xl",
								children: "Keep it fast, secure, and improving"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
								className: "mx-auto mt-3 max-w-xl text-muted-foreground",
								children: "Once your site is live, keep it healthy with a monthly care plan."
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "mt-10 grid gap-6 lg:grid-cols-3",
						children: carePlans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: `relative flex h-full flex-col rounded-3xl border p-8 transition ${plan.featured ? "border-brand bg-gradient-to-br from-deep to-[#2a1f5f] text-deep-foreground shadow-2xl" : "border-border bg-card text-foreground hover:-translate-y-1 hover:shadow-xl"}`,
							children: [
								plan.featured && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
									className: "absolute -top-3 left-8 rounded-full bg-highlight px-3 py-1 text-xs font-bold uppercase tracking-wider text-highlight-foreground shadow-lg",
									children: "Most Popular"
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
									className: "font-display text-xl font-semibold",
									children: plan.name
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
									className: `mt-1 text-sm ${plan.featured ? "text-white/70" : "text-muted-foreground"}`,
									children: plan.blurb
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "mt-6 flex items-end gap-1",
									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
										className: "font-display text-5xl font-bold tracking-tight",
										children: plan.price
									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
										className: `mb-2 text-sm ${plan.featured ? "text-white/60" : "text-muted-foreground"}`,
										children: "/mo"
									})]
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", {
									href: "tel:+18883917298",
									className: `mt-6 rounded-full px-5 py-3 text-center text-sm font-semibold transition ${plan.featured ? "bg-highlight text-highlight-foreground hover:opacity-90" : "bg-brand text-brand-foreground hover:opacity-90"}`,
									children: ["Choose ", plan.name.split(" ")[0]]
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
									className: "mt-7 space-y-3",
									children: plan.perks.map((perk) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
										className: "flex items-start gap-2.5 text-sm",
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: `mt-0.5 h-4 w-4 shrink-0 ${plan.featured ? "text-highlight" : "text-brand"}` }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
											className: plan.featured ? "text-white/90" : "text-foreground",
											children: perk
										})]
									}, perk))
								})
							]
						}, plan.name))
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "mt-12 flex flex-col items-center justify-center gap-4 text-center sm:flex-row",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "flex items-center gap-2 text-sm text-muted-foreground",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShieldCheck, { className: "h-4 w-4 text-brand" }), "100% money-back guarantee on all plans"]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", {
							href: "tel:+18883917298",
							className: "inline-flex items-center gap-2 rounded-full bg-brand px-7 py-3.5 text-sm font-semibold text-brand-foreground shadow-lg shadow-brand/30 transition hover:-translate-y-0.5",
							children: ["Get a tailored quote ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowRight, { className: "h-4 w-4" })]
						})]
					})
				]
			})
		})
	] });
}
//#endregion
export { PricingPage as component };
