// components/Pricing.tsx
'use client';
import { motion } from 'framer-motion';
import { Check } from 'lucide-react';

const plans = [
  { name: 'پایه', price: '۴۹۹,۰۰۰', features: ['۲۰ گیگابایت فضای NVMe', 'پهنای باند نامحدود', 'پشتیبانی تیکت'], popular: false },
  { name: 'حرفه‌ای', price: '۱,۴۹۹,۰۰۰', features: ['۵۰ گیگابایت فضای NVMe', 'پهنای باند نامحدود', 'پشتیبانی ویژه ۲۴/۷', 'گواهی SSL رایگان'], popular: true },
  { name: 'سازمانی', price: '۳,۹۹۰,۰۰۰', features: ['فضای ذخیره‌سازی نامحدود', 'سرور اختصاصی مجازی', 'مدیریت کامل سرور', 'پشتیبان‌گیری روزانه'], popular: false },
];

export default function Pricing() {
  return (
    <section className="py-20 px-8 max-w-7xl mx-auto">
      <div className="text-center mb-16">
        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">پلن‌های قیمت‌گذاری</h2>
        <p className="text-gray-500 dark:text-gray-400">مناسب‌ترین پلن را برای کسب‌وکار خود انتخاب کنید.</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {plans.map((plan, i) => (
          <motion.div 
            key={i}
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ delay: i * 0.1 }}
            viewport={{ once: true }}
            className={`relative p-8 rounded-2xl border ${plan.popular ? 'border-teal-500 bg-teal-500/5 dark:bg-teal-500/10' : 'border-gray-200 dark:border-gray-800 bg-white dark:bg-[#111827]'}`}
          >
            {plan.popular && <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-teal-500 text-white px-3 py-1 rounded-full text-xs font-bold">پیشنهاد ویژه</span>}
            <h3 className="text-xl font-bold text-gray-900 dark:text-white text-center mb-4">{plan.name}</h3>
            <div className="text-center mb-8">
              <span className="text-3xl font-bold text-gray-900 dark:text-white">{plan.price}</span>
              <span className="text-gray-500 text-sm"> / ماهانه</span>
            </div>
            <ul className="space-y-4 mb-8 text-right">
              {plan.features.map((feat, j) => (
                <li key={j} className="flex items-center justify-end gap-2 text-gray-600 dark:text-gray-300">
                  <span>{feat}</span>
                  <Check size={16} className="text-teal-500" />
                </li>
              ))}
            </ul>
            <button className={`w-full py-3 rounded-lg font-medium transition ${plan.popular ? 'bg-teal-500 text-white hover:bg-teal-600' : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700'}`}>
              انتخاب پلن
            </button>
          </motion.div>
        ))}
      </div>
    </section>
  );
}
