"use client"; import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Check, ArrowRight, Layers, Box, LayoutGrid } from "lucide-react"; const currencies = [ { code: "USD", symbol: "$", rate: 1 }, { code: "EUR", symbol: "€", rate: 0.92 }, { code: "GBP", symbol: "£", rate: 0.79 }, ]; const plans = [ { name: "Basic", description: "For individuals starting their journey.", basePrice: 19, icon: Box, features: ["1 User Account", "10 Active Projects", "Community Support", "Basic Analytics"], popular: false, }, { name: "Standard", description: "For professionals needing more power.", basePrice: 49, icon: Layers, features: ["5 User Accounts", "Unlimited Projects", "Priority Email Support", "Advanced Analytics"], popular: true, }, { name: "Premium", description: "For teams with demanding workflows.", basePrice: 99, icon: LayoutGrid, features: ["Unlimited Users", "Unlimited Projects", "24/7 Phone Support", "Custom Reporting"], popular: false, } ]; export default function SimpleCurrencySwitcher() { const [activeCurrency, setActiveCurrency] = useState(currencies[0]); return (

Simple, transparent pricing

{currencies.map((currency) => ( ))}

{plans.map((plan) => { const calculatedPrice = Math.round(plan.basePrice * activeCurrency.rate); const Icon = plan.icon; return (

{plan.popular && (

Best Choice

)}

{plan.name}

{plan.description}

{activeCurrency.symbol} {calculatedPrice} /mo

{feature}

); })}

); }