1"use client";
2
3import * as React from "react";
4import { CreditCard, Star, Zap } from "lucide-react";
5import { motion } from "framer-motion";
6import { Button } from "@/components/ui/button";
7import { cn } from "@/lib/utils";
8
9interface UpgradeRequiredPageProps {
10  title?: string;
11  description?: string;
12  features?: string[];
13  onUpgrade?: () => void;
14  className?: string;
15}
16
17const UpgradeRequiredPage = ({
18  title = "Premium Feature",
19  description = "Upgrade to access this feature and unlock more capabilities.",
20  features = [
21    "Advanced Analytics",
22    "Priority Support",
23    "Unlimited Access",
24    "Custom Integrations",
25  ],
26  onUpgrade,
27  className,
28}: UpgradeRequiredPageProps) => {
29  const [isHovered, setIsHovered] = React.useState(false);
30
31  return (
32    <div
33      className={cn(
34        "min-h-screen bg-background flex items-center justify-center p-4",
35        className
36      )}
37    >
38      <motion.div
39        initial={{ opacity: 0, y: 20 }}
40        animate={{ opacity: 1, y: 0 }}
41        transition={{ duration: 0.5 }}
42        className="max-w-lg w-full text-center space-y-8"
43      >
44        <motion.div
45          initial={{ scale: 0 }}
46          animate={{ scale: 1 }}
47          transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
48          className="mx-auto w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center relative"
49        >
50          <Zap className="w-10 h-10 text-primary" />
51          <motion.div
52            animate={{ rotate: 360 }}
53            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
54            className="absolute inset-0 border-2 border-primary/20 border-t-primary rounded-full"
55          />
56        </motion.div>
57
58        <div className="space-y-3">
59          <h1 className="text-3xl font-bold text-foreground">{title}</h1>
60          <p className="text-muted-foreground text-lg">{description}</p>
61        </div>
62
63        <div className="bg-muted/50 rounded-lg p-6 space-y-4">
64          <h3 className="font-semibold text-foreground flex items-center justify-center gap-2">
65            <Star className="w-5 h-5 text-yellow-500" />
66            What you'll get:
67          </h3>
68          <ul className="space-y-2">
69            {features.map((feature, index) => (
70              <motion.li
71                key={index}
72                initial={{ opacity: 0, x: -20 }}
73                animate={{ opacity: 1, x: 0 }}
74                transition={{ delay: 0.3 + index * 0.1 }}
75                className="flex items-center gap-3 text-sm text-muted-foreground"
76              >
77                <div className="w-2 h-2 bg-primary rounded-full" />
78                {feature}
79              </motion.li>
80            ))}
81          </ul>
82        </div>
83
84        <div className="space-y-3">
85          <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
86            <Button
87              onClick={onUpgrade}
88              className="w-full h-12 text-base font-semibold"
89              onMouseEnter={() => setIsHovered(true)}
90              onMouseLeave={() => setIsHovered(false)}
91            >
92              <CreditCard className="w-5 h-5 mr-2" />
93              Upgrade Now
94              <motion.div animate={{ x: isHovered ? 5 : 0 }} className="ml-2">
95                →
96              </motion.div>
97            </Button>
98          </motion.div>
99
100          <Button variant="ghost" className="w-full">
101            Learn More
102          </Button>
103        </div>
104
105        <div className="text-xs text-muted-foreground">
106          30-day money-back guarantee • Cancel anytime
107        </div>
108      </motion.div>
109    </div>
110  );
111};
112
113function ConfidentialAccessDemo() {
114  return (
115    <div className="min-h-screen bg-background">
116      <UpgradeRequiredPage
117        onUpgrade={() => alert("Redirecting to upgrade...")}
118      />
119    </div>
120  );
121}
122
123export default ConfidentialAccessDemo;