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

// const PricingPage = () => {
//   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 (
//     <div className="min-h-screen bg-white">
//       <div className="container px-4 md:px-6 mx-auto pt-16">
//         {/* Navigation back to home */}
//         <Link 
//           to="/" 
//           className="inline-flex items-center text-green-600 hover:text-green-700 mb-8"
//         >
//           <svg 
//             className="w-5 h-5 mr-2" 
//             fill="none" 
//             stroke="currentColor" 
//             viewBox="0 0 24 24"
//           >
//             <path 
//               strokeLinecap="round" 
//               strokeLinejoin="round" 
//               strokeWidth={2} 
//               d="M15 19l-7-7 7-7" 
//             />
//           </svg>
//           Вернуться на главную
//         </Link>

//         {/* Header Section */}
//         <div className="flex flex-col items-center justify-center space-y-4 text-center mb-12">
//           <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl text-green-600">
//             Тарифный план
//           </h1>
//           <p className="max-w-[700px] text-gray-600 md:text-xl/relaxed">
//             Выберите подходящий тариф для вашего бизнеса
//           </p>
//         </div>

//         {/* Pricing Cards */}
//         <div className="grid lg:grid-cols-3 gap-8 mt-8 md:mt-12 max-w-6xl mx-auto pb-16">
//           {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>

//         <PricingFeatures />

//         <div className="text-center pb-16">
//           <h2 className="text-2xl font-bold text-gray-900 mb-4">
//             Остались вопросы?
//           </h2>
//           <p className="text-gray-600 mb-6">
//             Свяжитесь с нашей командой поддержки, и мы поможем выбрать оптимальный тариф для вас
//           </p>
//           <a
//             href="#"
//             className="text-green-600 hover:text-green-700 font-medium"
//           >
//             Связаться с поддержкой →
//           </a>
//         </div>

//       </div>
//       <Footer />
//     </div>
//   );
// };

// export default PricingPage;


import React from 'react';
import { Check } from "lucide-react";
import { Link } from 'react-router-dom';
import PricingFeatures from './PricingFeatures';
import Footer from './Footer';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';
import DynamicPricing from './DynamicPricing';
// import Header from './Header.js'

const PricingPage = () => {
  const { language } = useLanguage();
  const t = translations.pricingPage[language];

  return (
    <div className="min-h-screen bg-white">
      {/* <Header /> */}
      <div className="container px-4 md:px-6 mx-auto pt-16">
        {/* Navigation back to home */}
        <Link 
          to="/" 
          className="inline-flex items-center text-green-600 hover:text-green-700 mb-8"
        >
          <svg 
            className="w-5 h-5 mr-2" 
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path 
              strokeLinecap="round" 
              strokeLinejoin="round" 
              strokeWidth={2} 
              d="M15 19l-7-7 7-7" 
            />
          </svg>
          {t.navigation.backToHome}
        </Link>

        {/* <div className="flex flex-col items-center justify-center space-y-4 text-center mb-12">
          <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl text-green-600">
            {t.header.title}
          </h1>
          <p className="max-w-[700px] text-gray-600 md:text-xl/relaxed">
            {t.header.subtitle}
          </p>
        </div>

        <div className="grid lg:grid-cols-3 gap-8 mt-8 md:mt-12 max-w-6xl mx-auto pb-16">
          {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>
              <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'
                }`}
              >
                {plan.buttonText}
              </button>
            </div>
          ))}
        </div> */}

        
        <DynamicPricing />

        <PricingFeatures />

        <div className="text-center pb-16">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">
            {t.supportSection.title}
          </h2>
          <p className="text-gray-600 mb-6">
            {t.supportSection.description}
          </p>
          <a
            href="/#contacts-section"
            className="text-green-600 hover:text-green-700 font-medium"
          >
            {t.supportSection.contactButton}
          </a>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default PricingPage;