// import React from 'react';
// import { Check } from "lucide-react";
// import { Link } from 'react-router-dom';

// const PricingPlans = () => {
//   const plans = [
//     {
//       title: "Базовый",
//       description: "Для личных целей и маленьких проектов",
//       price: "990 ₽",
//       features: [
//         "Публикация постов и историй",
//         "Предпросмотр публикаций",
//         "Базовая аналитика",
//         "Работа в команде",
//       ],
//       popular: false,
//     },
//     {
//       title: "Премиальный",
//       description: "Идеально для вас",
//       price: "1090 ₽",
//       features: [
//         "Все функции Стандартного тарифа, а также:",
//         "Типограф",
//         "Мониторинг комментариев",
//         "Аналитика охватов, постов, аудитории",
//       ],
//       popular: true,
//     },
//     {
//       title: "Продвинутый",
//       description: "Для большой работы",
//       price: "1190 ₽",
//       features: [
//         "Все функции Премиального тарифа, а также:",
//         "AI помощник",
//         "Мониторинг сообщений",
//         "Репостер",
//         "Вотермарки",
//       ],
//       popular: false,
//     },
//   ];

//   return (
//     <section className="w-full py-12 bg-white">
//       <div className="container px-4 md:px-6 mx-auto">
//         <div className="flex flex-col items-center justify-center space-y-4 text-center">
//           <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-green-600 mb-4">Тарифный план</h2>
//           <Link
//               to="/pricing"
//               className='text-lg font-medium transition-colors duration-200'
//             >
//               Узнать больше про тарифный план
//             </Link>
//         </div>
//         <div className="grid lg:grid-cols-3 gap-8 mt-8 md:mt-12 max-w-6xl mx-auto">
//           {plans.map((plan) => (
//             <div 
//               key={plan.title} 
//               className={`relative flex flex-col justify-between p-6 rounded-lg shadow-md ${
//                 plan.popular ? 'border-2 border-green-500 shadow-lg scale-105' : 'border border-gray-200'
//               } transition-all duration-200 hover:shadow-lg bg-white`}
//             >
//               {plan.popular && (
//                 <div className="absolute top-0 right-0 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
//                   Популярный
//                 </div>
//               )}
//               <div>
//                 <h3 className="text-2xl font-bold mb-2">{plan.title}</h3>
//                 <p className="text-sm text-gray-500 mb-4">{plan.description}</p>
//                 <div className="flex items-baseline mb-6">
//                   <span className="text-4xl font-bold">{plan.price}</span>
//                   <span className="text-gray-500 ml-2">/в месяц</span>
//                 </div>
//                 <ul className="space-y-3 mb-6">
//                   {plan.features.map((feature) => (
//                     <li key={feature} className="flex items-start">
//                       <Check className="h-5 w-5 text-green-500 shrink-0 mr-2" />
//                       <span className="text-gray-700 text-sm">{feature}</span>
//                     </li>
//                   ))}
//                 </ul>
//               </div>
//               <button 
//                 className={`w-full py-2 px-4 rounded-md text-lg font-semibold transition-colors ${
//                   plan.popular 
//                     ? 'bg-green-500 text-white hover:bg-green-600' 
//                     : 'bg-white text-green-500 border border-green-500 hover:bg-green-50'
//                 }`}
//               >
//                 Приобрести
//               </button>
//             </div>
//           ))}
//         </div>
//       </div>
//     </section>
//   );
// };

// export default PricingPlans;


import React from 'react';
import { Check } from "lucide-react";
import { Link } from 'react-router-dom';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';
import { CustomLink } from './CustomLink';

const PricingPlans = () => {
  const { language } = useLanguage();
  const t = translations.priceList[language];

  return (
    <section className="w-full py-12 bg-white">
      <div className="container px-4 md:px-6 mx-auto">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-green-600 mb-4">
            {t.title}
          </h2>
          <CustomLink
            to="/pricing"
            className="text-lg font-medium transition-colors duration-200"
          >
            {t.learnMore}
          </CustomLink>
        </div>

        <div className="grid lg:grid-cols-3 gap-8 mt-8 md:mt-12 max-w-6xl mx-auto">
          {t.plans.map((plan) => (
            <div 
              key={plan.title} 
              className={`relative flex flex-col justify-between p-6 rounded-lg shadow-md ${
                plan.popular ? 'border-2 border-green-500 shadow-lg scale-105' : 'border border-gray-200'
              } transition-all duration-200 hover:shadow-lg bg-white`}
            >
              {plan.popular && (
                <div className="absolute top-0 right-0 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
                  {plan.popularLabel}
                </div>
              )}
              <div>
                <h3 className="text-2xl font-bold mb-2">{plan.title}</h3>
                <p className="text-sm text-gray-500 mb-4">{plan.description}</p>
                <div className="flex items-baseline mb-6">
                  <span className="text-4xl font-bold">{plan.price}</span>
                  <span className="text-gray-500 ml-2">{plan.period}</span>
                </div>
                <ul className="space-y-3 mb-6">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-start">
                      <Check className="h-5 w-5 text-green-500 shrink-0 mr-2" />
                      <span className="text-gray-700 text-sm">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <a
                href='http://app.qwickpost.com/'
                className={`w-full py-2 px-4 rounded-md text-lg text-center font-semibold transition-colors ${
                  plan.popular 
                    ? 'bg-green-500 text-white hover:bg-green-600' 
                    : 'bg-white text-green-500 border border-green-500 hover:bg-green-50'
                }`}
              >
                {plan.buttonText}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default PricingPlans;