Pricing 3

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import * as PricingCard from "@/components/pricing-card";

export function PricingSection() {
	return (
		<section className="w-full">
			<div className="mx-auto mb-4 max-w-md space-y-2">
				<div className="flex justify-center">
					<div className="rounded-md border px-4 py-1 text-sm">Pricing</div>
				</div>
				<h2 className="font-heading text-center font-bold text-2xl tracking-tight md:text-3xl lg:font-extrabold lg:text-4xl">
					Plans that Scale with You
				</h2>
				<p className="text-center text-muted-foreground text-sm md:text-base">
					Whether you're just starting out or growing fast, our flexible pricing
					has you covered.
				</p>
			</div>
			<div className="mx-auto grid w-full max-w-4xl gap-4 p-6 md:grid-cols-3">
				{plans.map((plan, index) => (
					<PricingCard.Card
						className={cn("w-full max-w-full", index === 1 && "md:scale-105")}
						key={plan.name}
					>
						<PricingCard.Header isPopular={index === 1}>
							<PricingCard.Plan>
								<PricingCard.PlanName>
									{plan.icon}
									<span>{plan.name}</span>
								</PricingCard.PlanName>
								{plan.badge && (
									<PricingCard.Badge>{plan.badge}</PricingCard.Badge>
								)}
							</PricingCard.Plan>
							<PricingCard.Price>
								<PricingCard.MainPrice>{plan.price}</PricingCard.MainPrice>
								<PricingCard.Period>{plan.period}</PricingCard.Period>
								{plan.original && (
									<PricingCard.OriginalPrice className="ml-auto">
										{plan.original}
									</PricingCard.OriginalPrice>
								)}
							</PricingCard.Price>
							<Button
								className={cn("w-full font-semibold")}
								variant={plan.variant as "outline" | "default"}
							>
								Get Started
							</Button>
						</PricingCard.Header>

						<PricingCard.Body>
							<PricingCard.Description>
								{plan.description}
							</PricingCard.Description>
							<PricingCard.List>
								{plan.features.map((item) => (
									<PricingCard.ListItem className="text-xs" key={item}>
										<IconPlaceholder
											aria-hidden="true"
											className="size-4 text-foreground"
											hugeicons="CheckmarkCircle04Icon"
											lucide="CheckCircle2"
											phosphor="CheckCircleIcon"
											remixicon="RiCheckboxCircleLine"
											tabler="IconCircleCheck"
										/>
										<span>{item}</span>
									</PricingCard.ListItem>
								))}
							</PricingCard.List>
						</PricingCard.Body>
					</PricingCard.Card>
				))}
			</div>
		</section>
	);
}

const plans = [
	{
		icon: (
			<IconPlaceholder
				hugeicons="UserMultipleIcon"
				lucide="Users"
				phosphor="UsersIcon"
				remixicon="RiGroupLine"
				tabler="IconUsers"
			/>
		),
		description: "Perfect for individuals",
		name: "Basic",
		price: "Free",
		variant: "outline",
		features: [
			"Automated Meeting Scheduling",
			"Basic Calendar Sync",
			"Daily Schedule Overview",
			"Email Reminders",
			"Task Management",
			"24/7 Customer Support",
			"Single User Access",
			"Basic Reporting",
			"Mobile App Access",
		],
	},
	{
		icon: (
			<IconPlaceholder
				hugeicons="Briefcase01Icon"
				lucide="Briefcase"
				phosphor="BriefcaseIcon"
				remixicon="RiBriefcaseLine"
				tabler="IconBriefcase"
			/>
		),
		description: "Ideal for small teams",
		name: "Pro",
		badge: "Popular",
		price: "$29",
		original: "$39",
		period: "/month",
		variant: "default",
		features: [
			"All Basic Plan Features",
			"Advanced Calendar Integrations",
			"Customizable Notifications",
			"Priority Support",
			"Analytics and Insights",
			"Group Scheduling",
			"Multiple User Roles",
			"Advanced Reporting",
			"Custom Branding Options",
		],
	},
	{
		icon: (
			<IconPlaceholder
				hugeicons="Building01Icon"
				lucide="Building"
				phosphor="BuildingsIcon"
				remixicon="RiBuilding2Line"
				tabler="IconBuilding"
			/>
		),
		name: "Enterprise",
		description: "Perfect for large scale companies",
		price: "$99",
		original: "$129",
		period: "/month",
		variant: "outline",
		features: [
			"All Pro Plan Features",
			"Dedicated Account Manager",
			"Custom Integrations",
			"Advanced Security Features",
			"Team Collaboration Tools",
			"Onboarding and Training",
			"Unlimited Users",
			"API Access with Higher Limits",
			"Advanced Audit Logs",
		],
	},
];