Pricing 1

"use client";

import { CheckIcon } from "lucide-react";
import { motion } from "motion/react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { SectionShell, ContentRail } from "@/components/layout-contract";

const plans = [
	{
		name: "Starter",
		price: "$0",
		period: "forever",
		description: "For individuals exploring the platform.",
		features: ["Up to 3 projects", "Basic analytics", "Email support"],
		highlighted: false,
	},
	{
		name: "Pro",
		price: "$29",
		period: "per seat / mo",
		description: "For growing teams shipping every week.",
		features: [
			"Unlimited projects",
			"Advanced analytics",
			"Priority support",
			"SSO & audit logs",
		],
		highlighted: true,
	},
	{
		name: "Enterprise",
		price: "Custom",
		period: "contact us",
		description: "For organizations with advanced needs.",
		features: [
			"Everything in Pro",
			"Dedicated manager",
			"Custom SLAs",
			"On-premise option",
		],
		highlighted: false,
	},
];

export function PricingSection() {
	return (
		<SectionShell spacingMode="section">
			<ContentRail maxWidth="max-w-5xl" className="space-y-10">
				<div className="mx-auto max-w-2xl text-center">
					<h2 className="font-medium text-2xl tracking-tight md:text-4xl">
						Simple, transparent pricing
					</h2>
					<p className="mt-4 text-muted-foreground text-sm md:text-base">
						Start free, upgrade when your team grows. No hidden fees.
					</p>
				</div>

				<div className="grid gap-6 md:grid-cols-3">
					{plans.map((plan, index) => (
						<motion.div
							className={cn(
								"relative flex flex-col rounded-[var(--radius-md)] border p-6 md:p-8",
								plan.highlighted
									? "border-primary bg-primary/[0.03] shadow-sm"
									: "border-border bg-background",
							)}
							initial={{ opacity: 0, y: 20 }}
							key={plan.name}
							transition={{ delay: index * 0.08, duration: 0.45 }}
							viewport={{ once: true }}
							whileInView={{ opacity: 1, y: 0 }}
						>
							{plan.highlighted ? (
								<Badge className="absolute -top-2.5 left-6">Most popular</Badge>
							) : null}
							<p className="font-medium text-sm">{plan.name}</p>
							<div className="mt-3 flex items-baseline gap-1">
								<span className="font-medium text-3xl tracking-tight">{plan.price}</span>
								<span className="text-muted-foreground text-xs">{plan.period}</span>
							</div>
							<p className="mt-3 text-muted-foreground text-sm">{plan.description}</p>
							<ul className="mt-6 flex-1 space-y-3">
								{plan.features.map((feature) => (
									<li className="flex items-start gap-2 text-sm" key={feature}>
										<CheckIcon className="mt-0.5 size-4 shrink-0 text-primary" />
										{feature}
									</li>
								))}
							</ul>
							<Button
								className="mt-8 w-full"
								variant={plan.highlighted ? "default" : "outline"}
							>
								{plan.price === "Custom" ? "Contact sales" : "Get started"}
							</Button>
						</motion.div>
					))}
				</div>
			</ContentRail>
		</SectionShell>
	);
}