1"use client";
2
3import { Check } from "lucide-react";
4import { useState } from "react";
5
6export const FlexiblePricing = () => {
7  const [isAnnual, setIsAnnual] = useState(false);
8
9  const plans = [
10    {
11      name: "Free Plan",
12      monthlyPrice: 0,
13      annualPrice: 0,
14      description: "Perfect for individuals just getting started with secure, simple, reliable storage",
15      buttonText: "Get started for free",
16      buttonStyle: "bg-gray-200 hover:bg-gray-300 text-gray-900",
17      features: [
18        "50GB Storage Space",
19        "Cross Platform Sync",
20        "Basic File sharing",
21        "Dedicated \\ support",
22        "Upto 5 Connected Devices"
23      ]
24    },
25    {
26      name: "Pro Plan",
27      monthlyPrice: 19,
28      annualPrice: 15, // 20% off
29      description: "Built for professionals who need more space and control.",
30      buttonText: "Upgrade to pro",
31      buttonStyle: "bg-indigo-600 hover:bg-indigo-700 text-white",
32      popular: true,
33      features: [
34        "1 TB cloud storage",
35        "Automated Backups",
36        "AI-Powered malware detection",
37        "File version History",
38        "Upto 15 connected devices"
39      ]
40    },
41    {
42      name: "Team Plan",
43      monthlyPrice: 49,
44      annualPrice: 39, // 20% off
45      description: "Designed for teams and businesses that need to scale.",
46      buttonText: "Upgrade to team",
47      buttonStyle: "bg-gray-200 hover:bg-gray-300 text-gray-900",
48      features: [
49        "Unlimited Storage Space",
50        "Team roles and admin control",
51        "App Integrations",
52        "Advanced Analytics & Reports",
53        "Upto 30 Connected Devices"
54      ]
55    }
56  ];
57
58  return (
59    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white py-20 px-6">
60      <div className="max-w-7xl mx-auto">
61        <div className="text-center mb-16">
62          <h1 className="text-5xl font-bold text-gray-600 mb-6">
63            Flexible Pricing for all
64          </h1>
65          <p className="text-gray-600 text-lg max-w-2xl mx-auto mb-8">
66            Different plans that fits your needs, affordable and backed<br />
67            with special features.
68          </p>
69
70          {/* Toggle */}
71          <div className="inline-flex items-center bg-gray-100 rounded-full p-1 mb-3 relative">
72            <div
73              className={`absolute bg-white rounded-full shadow-sm transition-all duration-300 ease-in-out ${
74                isAnnual ? "left-[calc(50%)] w-[calc(50%-4px)]" : "left-1 w-[calc(50%-4px)]"
75              }`}
76              style={{ top: "4px", bottom: "4px" }}
77            />
78            <button
79              onClick={() => setIsAnnual(false)}
80              className={`px-8 py-2.5 rounded-full font-medium transition-all relative z-10 flex-1 ${
81                !isAnnual
82                  ? "text-gray-900"
83                  : "text-gray-600 hover:text-gray-900"
84              }`}
85            >
86              Monthly
87            </button>
88            <button
89              onClick={() => setIsAnnual(true)}
90              className={`px-8 py-2.5 rounded-full font-medium transition-all relative z-10 flex-1 ${
91                isAnnual
92                  ? "text-gray-900"
93                  : "text-gray-600 hover:text-gray-900"
94              }`}
95            >
96              Annual
97            </button>
98          </div>
99          <p className="text-indigo-600 text-sm font-medium">
100            -20% off on annual payments
101          </p>
102        </div>
103
104        {/* Pricing Cards */}
105        <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
106          {plans.map((plan, index) => (
107            <div
108              key={index}
109              className={`bg-white rounded-3xl p-8 flex flex-col relative border-2 ${
110                plan.popular
111                  ? "bg-gradient-to-b from-indigo-50 to-white border-indigo-200"
112                  : "border-gray-200"
113              }`}
114            >
115              {/* Most Popular Badge */}
116              {plan.popular && (
117                <div className="absolute -top-3 right-8">
118                  <span className="bg-indigo-600 text-white px-4 py-1.5 rounded-full text-xs font-semibold">
119                    Most popular
120                  </span>
121                </div>
122              )}
123
124              <div className="space-y-6 flex-1">
125                <div>
126                  <h3 className="text-lg font-semibold text-gray-800 mb-4">
127                    {plan.name}
128                  </h3>
129
130                  {/* Price */}
131                  <div className="mb-4">
132                    <span className="text-5xl font-bold text-gray-900">
133                      ${isAnnual ? plan.annualPrice : plan.monthlyPrice}
134                    </span>
135                    <span className="text-gray-600 text-lg ml-2">/ per month</span>
136                  </div>
137
138                  <p className="text-gray-600 text-sm leading-relaxed">
139                    {plan.description}
140                  </p>
141                </div>
142
143                <button className={`w-full font-medium py-3.5 px-6 rounded-xl transition-colors ${plan.buttonStyle}`}>
144                  {plan.buttonText}
145                </button>
146
147                {/* Features */}
148                <div className="pt-4">
149                  <p className="text-xs uppercase font-semibold text-gray-500 mb-4">
150                    {plan.name === "Free Plan" ? "FREE" : plan.name === "Pro Plan" ? "EVERYTHING IN FREE" : "EVERYTHING IN PRO"} PLAN INCLUDES:
151                  </p>
152                  <ul className="space-y-3">
153                    {plan.features.map((feature, idx) => (
154                      <li key={idx} className="flex items-start gap-3">
155                        <div className="w-5 h-5 rounded-full bg-gray-900 flex items-center justify-center flex-shrink-0 mt-0.5">
156                          <Check className="w-3 h-3 text-white stroke-[3]" />
157                        </div>
158                        <span className="text-gray-700 text-sm">{feature}</span>
159                      </li>
160                    ))}
161                  </ul>
162                </div>
163              </div>
164            </div>
165          ))}
166        </div>
167      </div>
168    </div>
169  );
170};
171