1"use client"
2
3import { useState } from "react"
4import { Calendar } from "lucide-react"
5import { Label } from "@/components/ui/label"
6import { Switch } from "@/components/ui/switch"
7
8export function MinimalPricingCards() {
9    const [lightFastDelivery, setLightFastDelivery] = useState(false)
10    const [darkFastDelivery, setDarkFastDelivery] = useState(false)
11
12    const LightCheckIcon = ({ className }: { className?: string }) => (
13        <svg
14            className={className}
15            width="16"
16            height="16"
17            viewBox="0 0 16 16"
18            fill="none"
19            xmlns="http://www.w3.org/2000/svg"
20        >
21            <circle cx="8" cy="8" r="8" fill="#111827" />
22            <path
23                d="M5.5 8.5L7 10L11 6"
24                stroke="white"
25                strokeWidth="1.2"
26                strokeLinecap="round"
27                strokeLinejoin="round"
28            />
29        </svg>
30    )
31
32    const FireIcon = ({ className }: { className?: string }) => (
33        <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
34            <defs>
35                <linearGradient id="fireGradient" x1="50%" y1="0%" x2="50%" y2="100%">
36                    <stop offset="0%" stopColor="#FFD000">
37                        <animate attributeName="stopColor" values="#FFD000; #FF8C00; #FFD000" dur="2s" repeatCount="indefinite"></animate>
38                    </stop>
39                    <stop offset="100%" stopColor="#FF4500">
40                        <animate attributeName="stopColor" values="#FF4500; #DC143C; #FF4500" dur="2s" repeatCount="indefinite"></animate>
41                    </stop>
42                </linearGradient>
43            </defs>
44            <g fill="none">
45                <path d="M7 16.5C7.00033 14.015 10.3333 9 12 9C13.6667 9 16.9997 14.015 17 16.5C17 18.9853 14.7614 21 12 21C9.23858 21 7 18.9853 7 16.5Z" fill="url(#fireGradient)"></path>
46                <path d="M12.3555 1.17975C12.6333 1.22007 12.8835 1.42661 13.3828 1.8399C14.5704 2.8229 15.6975 3.87361 16.7432 5.01569C17.7733 6.14079 18.827 7.46472 19.627 8.88092C20.4224 10.2894 21.0058 11.8567 21.0059 13.4503C21.0058 18.9618 16.2992 22 12.0059 22.0001C7.71247 22.0001 3.00593 18.9618 3.00586 13.4503C3.00601 11.6543 3.31206 9.81195 3.64062 7.99908C3.79551 7.14453 3.87278 6.71677 4.0918 6.49615C4.28495 6.30176 4.54241 6.19717 4.81641 6.20123C5.1273 6.20598 5.47988 6.45692 6.18457 6.95807L8.20117 8.39166L10.9971 2.40631C11.2819 1.79667 11.4252 1.49135 11.6592 1.336C11.8588 1.20356 12.1184 1.1454 12.3555 1.17975ZM12 11.0001C10.8333 11.0001 8.50023 14.7613 8.5 16.6251C8.50004 18.4372 9.98124 19.9144 11.8398 19.9952C11.8929 19.998 11.9463 20.0001 12 20.0001C12.0534 20.0001 12.1065 19.9979 12.1592 19.9952C14.0182 19.9149 15.5 18.4375 15.5 16.6251C15.4998 14.7613 13.1667 11.0001 12 11.0001Z" fill="url(#fireGradient)"></path>
47            </g>
48        </svg>
49    )
50
51    const DarkCheckIcon = ({ className }: { className?: string }) => (
52        <svg
53            className={className}
54            width="16"
55            height="16"
56            viewBox="0 0 16 16"
57            fill="none"
58            xmlns="http://www.w3.org/2000/svg"
59        >
60            <circle cx="8" cy="8" r="7.5" stroke="#4B5563" />
61            <path
62                d="M5.5 8.5L7 10L11 6"
63                stroke="white"
64                strokeWidth="1.2"
65                strokeLinecap="round"
66                strokeLinejoin="round"
67            />
68        </svg>
69    )
70
71    const features = [
72        "2 Premium Design Concepts",
73        "Custom, High-Performance Code",
74        "Guaranteed On-Time Delivery",
75        "Dedicated Project Support",
76        "Engaging Animations Included",
77    ]
78
79    return (
80        <div className="w-full py-30 px-5">
81            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-[820px] mx-auto">
82                {/* Light Card */}
83                <div className="bg-gray-100 rounded-3xl p-2 shadow-[0_12px_50px_-15px_rgba(0,0,0,0.1)] border border-gray-200/60 flex flex-col">
84                    <div className="bg-white rounded-2xl p-8 mb-2">
85                        <h2 className="text-3xl font-bold text-gray-900 mb-2 tracking-tight">
86                            Noob
87                        </h2>
88                        <p className="text-gray-500 text-base leading-relaxed mb-8">
89                            A stunning landing page to convert your visitors into customers.
90                        </p>
91                        <div className="flex items-baseline mb-8">
92                            <span className="text-5xl font-bold text-gray-900 tracking-tighter">
93                                £1499
94                            </span>
95                            <span className="text-gray-400 text-lg ml-1">/project</span>
96
97                        </div>
98                        <button className="w-full bg-[#111827] text-white py-4 rounded-xl font-semibold text-base hover:opacity-90 transition-opacity duration-200 flex items-center justify-center gap-2.5 shadow-[0_4px_20px_-5px_rgba(0,0,0,0.2)]">
99                            Book a Discovery Call
100                            <Calendar className="w-5 h-5 text-gray-400" />
101                        </button>
102                    </div>
103                    <div className="bg-gray-100 px-6 pb-6 pt-4 flex-grow flex flex-col">
104                        <div className="grid grid-cols-2 gap-y-4 gap-x-4 mb-auto">
105                            {features.map((feature) => (
106                                <div key={feature} className="flex items-center gap-3">
107                                    <LightCheckIcon className="w-4 h-4 flex-shrink-0" />
108                                    <span className="text-gray-700 text-sm font-medium">
109                                        {feature}
110                                    </span>
111                                </div>
112                            ))}
113                        </div>
114                        <div className="mt-8 flex items-center space-x-2">
115                            <Switch
116                                id="light-fast-delivery"
117                                checked={lightFastDelivery}
118                                onCheckedChange={setLightFastDelivery}
119                            />
120                            <Label htmlFor="light-fast-delivery" className="text-sm text-gray-500">
121                                Fast delivery (5 days)
122                            </Label>
123                        </div>
124                    </div>
125                </div>
126
127                {/* Dark Card */}
128                <div className="bg-[#262626] rounded-3xl p-2 shadow-[0_12px_50px_-15px_rgba(0,0,0,0.25)] flex flex-col">
129                    <div className="bg-[#2C2C2E] rounded-2xl p-8 mb-2">
130                        <h2 className="text-3xl font-bold text-white mb-2 tracking-tight">
131                            Prro <FireIcon className="inline-block w-6 h-6 ml-2 -mt-1" />
132                        </h2>
133                        <p className="text-gray-400 text-base leading-relaxed mb-8">
134                            A stunning landing page to convert your visitors into customers.
135                        </p>
136                        <div className="flex items-baseline mb-8">
137                            <span className="text-5xl font-bold text-white tracking-tighter">
138                                £1499
139                            </span>
140                            <span className="text-gray-500 text-lg ml-1">/project</span>
141                        </div>
142                        <button className="w-full bg-white text-gray-900 py-4 rounded-xl font-semibold text-base hover:opacity-90 transition-opacity duration-200 flex items-center justify-center gap-2.5 shadow-[0_4px_20px_-5px_rgba(255,255,255,0.2)]">
143                            Book a Discovery Call
144                            <Calendar className="w-5 h-5 text-gray-500" />
145                        </button>
146                    </div>
147                    <div className="flex-grow flex flex-col px-6 pb-6 pt-4">
148                        <div className="grid grid-cols-2 gap-y-4 gap-x-4 mb-auto">
149                            {features.map((feature) => (
150                                <div key={feature} className="flex items-center gap-3">
151                                    <DarkCheckIcon className="w-4 h-4 flex-shrink-0" />
152                                    <span className="text-gray-300 text-sm font-medium">
153                                        {feature}
154                                    </span>
155                                </div>
156                            ))}
157                        </div>
158                        <div className="mt-8 flex items-center space-x-2">
159                            <Switch
160                                id="dark-fast-delivery"
161                                checked={darkFastDelivery}
162                                onCheckedChange={setDarkFastDelivery}
163                            />
164                            <Label htmlFor="dark-fast-delivery" className="text-sm text-gray-400">
165                                Fast delivery (5 days)
166                            </Label>
167                        </div>
168                    </div>
169                </div>
170            </div>
171        </div>
172    )
173}