Pricing Table Five

1"use client";
2 
3import { useState, useId } from "react";
4import { Button } from "@/components/ui/button";
5import { Card, CardContent } from "@/components/ui/card";
6import { Badge } from "@/components/ui/badge";
7import { Label } from "@/components/ui/label";
8import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
9import { Check, Phone } from "lucide-react";
10import { type Plan } from "@/lib/billingsdk-config";
11import { cn } from "@/lib/utils";
12import { cva, type VariantProps } from "class-variance-authority";
13import { AnimatePresence, motion } from "motion/react";
14 
15const sectionVariants = cva("py-32 relative overflow-hidden", {
16  variants: {
17    size: {
18      small: "py-12",
19      medium: "py-20",
20      large: "py-32",
21    },
22    theme: {
23      minimal: "bg-background",
24      classic: "bg-gradient-to-b from-background to-muted/20",
25    },
26  },
27  defaultVariants: {
28    size: "medium",
29    theme: "minimal",
30  },
31});
32 
33const titleVariants = cva("font-bold mb-4 text-foreground", {
34  variants: {
35    size: {
36      small: "text-3xl lg:text-4xl",
37      medium: "text-4xl lg:text-5xl",
38      large: "text-4xl lg:text-6xl",
39    },
40    theme: {
41      minimal: "",
42      classic:
43        "bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent",
44    },
45  },
46  defaultVariants: {
47    size: "medium",
48    theme: "minimal",
49  },
50});
51 
52const descriptionVariants = cva(
53  "text-muted-foreground max-w-3xl mx-auto mb-8",
54  {
55    variants: {
56      size: {
57        small: "text-base lg:text-lg",
58        medium: "text-lg lg:text-xl",
59        large: "lg:text-xl",
60      },
61    },
62    defaultVariants: {
63      size: "medium",
64    },
65  },
66);
67 
68const toggleVariants = cva(
69  "flex h-11 w-fit shrink-0 items-center rounded-md p-1 text-lg",
70  {
71    variants: {
72      theme: {
73        minimal: "bg-muted",
74        classic:
75          "bg-muted/50 backdrop-blur-sm border border-border/50 shadow-lg",
76      },
77    },
78    defaultVariants: {
79      theme: "minimal",
80    },
81  },
82);
83 
84const planCardVariants = cva(
85  "relative border transition-all duration-300 rounded-lg",
86  {
87    variants: {
88      size: {
89        small: "p-4",
90        medium: "p-5",
91        large: "p-6",
92      },
93      theme: {
94        minimal: "bg-card border-border hover:bg-muted/30 shadow-sm",
95        classic:
96          "bg-card border-border/50 hover:shadow-xl hover:border-border backdrop-blur-sm shadow-md",
97      },
98      highlight: {
99        true: "",
100        false: "",
101      },
102    },
103// … truncated