Pricing Table Four

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