// import { Calendar, BarChart2, Users, Share2, Lightbulb, Shield } from 'lucide-react'
// import calendar from '../images/calendar.png'
// import analytics from '../images/analytics.png'
// import auditory from '../images/auditory.png'
// import cross_platform from '../images/cross_platform.png'
// import ai_recomendation from '../images/ai_recomendation.png'
// import sequrity from '../images/sequrity.png'

// export default function Component() {
//   const features = [
//     {
//       icon: Calendar,
//       title: "Легкое планирование",
//       description: "Планируйте и составляйте расписание вашего контента для нескольких платформ с помощью нашего интуитивного календарного интерфейса.",
//       image: {
//         src: calendar,
//         alt: "Календарь с запланированными постами"
//       }
//     },
//     {
//       icon: BarChart2,
//       title: "Мощная аналитика",
//       description: "Получайте ценные идеи с помощью метрик производительности в реальном времени и действенных рекомендаций.",
//       image: {
//         src: analytics,
//         alt: "График аналитики социальных сетей"
//       }
//     },
//     {
//       icon: Users,
//       title: "Вовлечение аудитории",
//       description: "Взаимодействуйте с вашими подписчиками и выстраивайте значимые отношения с помощью централизованной панели управления.",
//       image: {
//         src: auditory,
//         alt: "Панель взаимодействия с аудиторией"
//       }
//     },
//     {
//       icon: Share2,
//       title: "Кросс-платформенные публикации",
//       description: "Легко публикуйте контент на нескольких платформах социальных сетей одним кликом.",
//       image: {
//         src: cross_platform,
//         alt: "Интерфейс публикации в социальные сети"
//       }
//     },
//     {
//       icon: Lightbulb,
//       title: "ИИ-рекомендации",
//       description: "Получайте интеллектуальные идеи для контента и советы по оптимизации для улучшения вашей работы в социальных сетях.",
//       image: {
//         src: ai_recomendation,
//         alt: "ИИ генерация рекомендаций"
//       }
//     },
//     {
//       icon: Shield,
//       title: "Безопасность и надежность",
//       description: "Будьте спокойны, зная, что ваши данные защищены мерами безопасности корпоративного уровня.",
//       image: {
//         src: sequrity,
//         alt: "Система безопасности и защиты данных"
//       }
//     }
//   ]

//   return (
//     <div className="my-6 bg-white py-8 px-4 sm:px-6 lg:px-8">
//       <div className="max-w-5xl mx-auto">
//         <h2 className="text-4xl font-extrabold text-green-600 text-center mb-6">
//           Усильте ваше присутствие в социальных сетях
//         </h2>
//         <p className="text-xl text-gray-700 text-center mb-14 font-bold">
//           Используйте встроенный функционал, для достижения ваших целей
//         </p>

//         <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
//           {features.map((feature, index) => (
//             <div key={index} className="bg-white rounded-lg p-6 shadow-lg shadow-green-100 transition-all duration-300 hover:shadow-xl hover:shadow-green-200">
//               <div className="flex items-center mb-4">
//                 <feature.icon className="h-8 w-8 text-green-600 mr-3" />
//                 <h3 className="text-xl font-semibold text-gray-900">{feature.title}</h3>
//               </div>
//               <p className="text-gray-600 mb-4">{feature.description}</p>
//               <div className="bg-white rounded-lg overflow-hidden">
//                 <div className="aspect-w-4 aspect-h-3">
//                   <img
//                     src={feature.image.src}
//                     alt={feature.image.alt}
//                     className="w-full h-full object-cover"
//                   />
//                 </div>
//               </div>
//             </div>
//           ))}
//         </div>
//       </div>
//     </div>
//   )
// }


import { Calendar, BarChart2, Users, Share2, Lightbulb, Shield } from 'lucide-react'
import calendar from '../images/calendar.png'
import analytics from '../images/analytics.png'
import auditory from '../images/socialike.png'
import cross_platform from '../images/cross_platform.png'
import ai_recomendation from '../images/ai_recomendation.png'
import sequrity from '../images/security.png'
import translations from '../translations.json'
import { useLanguage } from '../contexts/LanguageContext'

export default function Component() {
  const { language } = useLanguage();
  const t = translations.makeEasier[language];

  const features = [
    {
      icon: Calendar,
      title: t.features.planning.title,
      description: t.features.planning.description,
      image: {
        src: calendar,
        alt: t.features.planning.imageAlt
      }
    },
    {
      icon: BarChart2,
      title: t.features.analytics.title,
      description: t.features.analytics.description,
      image: {
        src: analytics,
        alt: t.features.analytics.imageAlt
      }
    },
    {
      icon: Users,
      title: t.features.audience.title,
      description: t.features.audience.description,
      image: {
        src: auditory,
        alt: t.features.audience.imageAlt
      }
    },
    {
      icon: Share2,
      title: t.features.crossPlatform.title,
      description: t.features.crossPlatform.description,
      image: {
        src: cross_platform,
        alt: t.features.crossPlatform.imageAlt
      }
    },
    {
      icon: Lightbulb,
      title: t.features.aiRecommendations.title,
      description: t.features.aiRecommendations.description,
      image: {
        src: ai_recomendation,
        alt: t.features.aiRecommendations.imageAlt
      }
    },
    {
      icon: Shield,
      title: t.features.security.title,
      description: t.features.security.description,
      image: {
        src: sequrity,
        alt: t.features.security.imageAlt
      }
    }
  ]

  return (
    <div id="usability-section" className="my-6 bg-white py-8 px-4 sm:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto">
        <h2 className="text-4xl font-extrabold text-green-600 text-center mb-6">
          {t.title}
        </h2>
        <p className="text-xl text-gray-700 text-center mb-14 font-bold">
          {t.subtitle}
        </p>

        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => (
            <div key={index} className="bg-white rounded-lg p-6 shadow-lg shadow-green-100 transition-all duration-300 hover:shadow-xl hover:shadow-green-200">
              <div className="flex items-center mb-4">
                <feature.icon className="h-8 w-8 text-green-600 mr-3" />
                <h3 className="text-xl font-semibold text-gray-900">{feature.title}</h3>
              </div>
              <p className="text-gray-600 mb-4">{feature.description}</p>
              <div className="bg-white rounded-lg overflow-hidden">
                <div className="aspect-w-4 aspect-h-3">
                  <img
                    src={feature.image.src}
                    alt={feature.image.alt}
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}