// import React, { useState } from 'react'
// import { motion, AnimatePresence } from 'framer-motion'
// import { ChevronDown } from 'lucide-react'

// const faqData = [
//   {
//     question: 'Что такое qWickPost?',
//     answer: 'qWickPost - это платформа для упрощения вашего социального маркетинга. Она позволяет планировать, создавать и публиковать контент для всех социальных сетей из одного места.'
//   },
//   {
//     question: 'Как qWickPost экономит мое время?',
//     answer: 'qWickPost автоматизирует процесс публикации в различных социальных сетях, позволяя вам создавать и планировать контент заранее. Это значительно сокращает время, затрачиваемое на управление вашими социальными медиа.'
//   },
//   {
//     question: 'С какими социальными сетями работает qWickPost?',
//     answer: 'qWickPost поддерживает все основные социальные платформы, включая Facebook, Instagram, X (Twitter), LinkedIn и другие. Мы постоянно расширяем список поддерживаемых платформ.'
//   },
//   {
//     question: 'Есть ли у qWickPost бесплатный пробный период?',
//     answer: 'Да, для вас имеется бесплатный пробный период в 7 дней, чтобы вы могли оценить все возможности qWickPost без каких-либо обязательств.'
//   }
// ]

// const FAQItem = ({ question, answer }) => {
//   const [isOpen, setIsOpen] = useState(false)

//   return (
//     <motion.div 
//       initial={false}
//       animate={{ backgroundColor: isOpen ? 'rgb(250 251 252)' : 'white' }}
//       className="border border-green-100 rounded-lg shadow-sm mb-4 overflow-hidden"
//     >
//       <button
//         className="flex justify-between items-center w-full text-left p-6 focus:outline-none"
//         onClick={() => setIsOpen(!isOpen)}
//       >
//         <span className="text-lg font-medium text-gray-900">{question}</span>
//         <ChevronDown 
//           className={`w-5 h-5 text-gray-500 transform transition-transform duration-200 ${
//             isOpen ? 'rotate-180' : ''
//           }`} 
//         />
//       </button>
//       <AnimatePresence initial={false}>
//         {isOpen && (
//           <motion.div
//             initial={{ height: 0, opacity: 0 }}
//             animate={{ height: 'auto', opacity: 1 }}
//             exit={{ height: 0, opacity: 0 }}
//             transition={{ duration: 0.3 }}
//           >
//             <div className="px-6 pb-6 text-gray-600 leading-relaxed">
//               {answer}
//             </div>
//           </motion.div>
//         )}
//       </AnimatePresence>
//     </motion.div>
//   )
// }

// export default function Questions() {
//   return (
//     <section className="py-16 bg-white mb-9">
//       <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
//         <div className="text-center mb-12">
//           <h2 className="text-3xl font-bold text-gray-900 mb-4">
//             Часто задаваемые вопросы
//           </h2>
//           <p className="text-lg text-gray-600">
//             Найдите ответы на популярные вопросы о qWickPost
//           </p>
//         </div>
//         <div className="space-y-4">
//           {faqData.map((faq, index) => (
//             <FAQItem key={index} question={faq.question} answer={faq.answer} />
//           ))}
//         </div>
//       </div>
//     </section>
//   )
// }


import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronDown } from 'lucide-react';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';

const FAQItem = ({ question, answer }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <motion.div 
      initial={false}
      animate={{ backgroundColor: isOpen ? 'rgb(250 251 252)' : 'white' }}
      className="border border-green-100 rounded-lg shadow-sm mb-4 overflow-hidden"
    >
      <button
        className="flex justify-between items-center w-full text-left p-6 focus:outline-none"
        onClick={() => setIsOpen(!isOpen)}
      >
        <span className="text-lg font-medium text-gray-900">{question}</span>
        <ChevronDown 
          className={`w-5 h-5 text-gray-500 transform transition-transform duration-200 ${
            isOpen ? 'rotate-180' : ''
          }`} 
        />
      </button>
      <AnimatePresence initial={false}>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
          >
            <div className="px-6 pb-6 text-gray-600 leading-relaxed">
              {answer}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
};

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

  return (
    <section className="py-16 bg-white mb-9">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">
            {t.title}
          </h2>
          <p className="text-lg text-gray-600">
            {t.subtitle}
          </p>
        </div>
        <div className="space-y-4">
          {t.faq.map((faq, index) => (
            <FAQItem 
              key={index} 
              question={faq.question} 
              answer={faq.answer} 
            />
          ))}
        </div>
      </div>
    </section>
  );
}