"use client" import { useState } from "react" import { motion } from "framer-motion" import { Check, CreditCard, Download, BarChart3, Zap } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Progress } from "@/components/ui/progress" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { cn } from "@/lib/utils" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const plans = [ { name: "Starter", price: "$19", desc: "Perfect for getting started", features: ["5 projects", "10GB storage", "Basic analytics", "Email support"], popular: false, }, { name: "Pro", price: "$49", desc: "Best for growing teams", features: ["Unlimited projects", "100GB storage", "Advanced analytics", "Priority support", "Custom domains"], popular: true, }, { name: "Enterprise", price: "$149", desc: "For large organizations", features: ["Everything in Pro", "Unlimited storage", "Dedicated support", "SSO & SAML", "Custom integrations", "SLA guarantee"], popular: false, }, ] const usageStats = [ { label: "Projects", used: 8, total: 10, unit: "projects" }, { label: "Storage", used: 42, total: 100, unit: "GB" }, { label: "API Calls", used: 12500, total: 50000, unit: "calls" }, ] const invoices = [ { id: "INV-2026-06", date: "Jun 1, 2026", amount: 49.00, status: "Paid" }, { id: "INV-2026-05", date: "May 1, 2026", amount: 49.00, status: "Paid" }, { id: "INV-2026-04", date: "Apr 1, 2026", amount: 49.00, status: "Paid" }, { id: "INV-2026-03", date: "Mar 1, 2026", amount: 19.00, status: "Paid" }, ] export default function Subscription() { const [currentPlan, setCurrentPlan] = useState("Pro") return (

Subscription

Manage your plan and billing.

{currentPlan} Plan Current Plan You are on the {currentPlan} plan.

$49 /month

{usageStats.map((stat) => (

{stat.label} {stat.used.toLocaleString()} / {stat.total.toLocaleString()} {stat.unit}

))}

Change Plan Invoices {plans.map((plan) => ( {plan.popular && (