// import firstimage from '../images/foursteps/login.png'
// import secondimage from '../images/foursteps/iphoneves.jpg'
// import thirdimage from '../images/foursteps/analyzeandoptimize.jpg'
// import fourthimage from '../images/foursteps/telefonvruke.jpg'
// import React, { useRef, useEffect, useState } from 'react'
// import { motion, AnimatePresence } from 'framer-motion'

// export default function FourSteps() {
//   const [activeStep, setActiveStep] = useState(0)
//   const timeoutRef = useRef(null)

//   const steps = [
//     {
//       title: "Подключите свой аккаунт",
//       description: "Планируйте, создавайте и публикуйте ваш контент для всех социальных сетей из одного места.",
//       image: firstimage,
//       icon: () => (
//         <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
//         </svg>
//       )
//     },
//     {
//       title: "Планируйте свой контент",
//       description: "Используйте наш интуитивно понятный календарь, чтобы планировать публикации и визуализировать свою контент-стратегию.",
//       image: secondimage,
//       icon: () => (
//         <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
//         </svg>
//       )
//     },
//     {
//       title: "Анализируйте и оптимизируйте",
//       description: "Отслеживайте свою производительность с помощью аналитики в реальном времени и получайте предложения по улучшению на основе ИИ.",
//       image: thirdimage,
//       icon: () => (
//         <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
//         </svg>
//       )
//     },
//     {
//       title: "Вовлекайтесь и развивайтесь",
//       description: "Взаимодействуйте со своей аудиторией и наблюдайте, как процветает ваше присутствие в социальных сетях.",
//       image: fourthimage,
//       icon: () => (
//         <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
//         </svg>
//       )
//     }
//   ]

//   useEffect(() => {
//     timeoutRef.current = window.setTimeout(() => {
//       setActiveStep((prevStep) => (prevStep + 1) % steps.length)
//     }, 5000)

//     return () => {
//       if (timeoutRef.current !== null) {
//         window.clearTimeout(timeoutRef.current)
//       }
//     }
//   }, [activeStep])

//   return (
//     <div className="bg-white py-16 overflow-hidden">
//       <div className="max-w-6xl mx-auto px-4">
//         <div className="mb-12">
//           <h2 className="text-3xl font-extrabold text-green-600 mb-4">
//             Работайте с легкостью
//           </h2>
//           <p className="text-lg text-gray-600">
//             Напрямую взаимодействуйте с площадками через удобный интерфейс
//           </p>
//         </div>

//         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
//           <div className="space-y-4">
//             {steps.map((step, index) => (
//               <motion.div
//                 key={index}
//                 initial={{ opacity: 0, y: 20 }}
//                 animate={{ opacity: 1, y: 0 }}
//                 transition={{ duration: 0.5, delay: index * 0.1 }}
//                 className={`transform transition-all duration-300 ${
//                   activeStep === index 
//                     ? 'scale-102 bg-white shadow-md border-green-500' 
//                     : 'hover:bg-white hover:shadow-sm'
//                 } rounded-xl border p-6 cursor-pointer`}
//                 onClick={() => setActiveStep(index)}
//               >
//                 <div className="flex items-start space-x-4">
//                   <div className={`flex-shrink-0 p-3 rounded-lg ${
//                     activeStep === index ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-500'
//                   }`}>
//                     {step.icon()}
//                   </div>
//                   <div className="flex-1">
//                     <h3 className={`text-lg font-semibold mb-2 ${
//                       activeStep === index ? 'text-green-600' : 'text-gray-900'
//                     }`}>
//                       {step.title}
//                     </h3>
//                     <p className="text-gray-600 text-sm leading-relaxed">
//                       {step.description}
//                     </p>
//                   </div>
//                 </div>
//               </motion.div>
//             ))}
//           </div>

//           <div className="relative h-[400px] flex items-center justify-center overflow-hidden">
//             <AnimatePresence initial={false}>
//               <motion.img
//                 key={activeStep}
//                 src={steps[activeStep].image}
//                 alt={steps[activeStep].title}
//                 initial={{ opacity: 0, x: 300 }}
//                 animate={{ opacity: 1, x: 0 }}
//                 exit={{ opacity: 0, x: -300 }}
//                 transition={{ type: "spring", stiffness: 300, damping: 30 }}
//                 className="w-full h-full object-contain rounded-lg absolute"
//               />
//             </AnimatePresence>
//           </div>
//         </div>
//       </div>
//     </div>
//   )
// }



import firstimage from '../images/foursteps/login.png'
import secondimage from '../images/foursteps/platform.png'
import thirdimage from '../images/foursteps/analytics_steps.png'
import fourthimage from '../images/foursteps/forfun.png'
import React, { useRef, useEffect, useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import translations from '../translations.json'
import { useLanguage } from '../contexts/LanguageContext'

export default function FourSteps() {
  const [activeStep, setActiveStep] = useState(0);
  const timeoutRef = useRef(null);
  const { language } = useLanguage();
  const t = translations.fourSteps[language];

  const images = [firstimage, secondimage, thirdimage, fourthimage];
  
  const icons = [
    () => (
      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
    () => (
      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
    ),
    () => (
      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
      </svg>
    ),
    () => (
      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
      </svg>
    )
  ];

  const steps = t.steps.map((step, index) => ({
    ...step,
    image: images[index],
    icon: icons[index]
  }));

  useEffect(() => {
    timeoutRef.current = window.setTimeout(() => {
      setActiveStep((prevStep) => (prevStep + 1) % steps.length);
    }, 5000);

    return () => {
      if (timeoutRef.current !== null) {
        window.clearTimeout(timeoutRef.current);
      }
    };
  }, [activeStep, steps.length]);

  return (
    <div className="bg-white py-16 overflow-hidden">
      <div className="max-w-6xl mx-auto px-4">
        <div className="mb-12">
          <h2 className="text-3xl font-extrabold text-green-600 mb-4">
            {t.title}
          </h2>
          <p className="text-lg text-gray-600">
            {t.subtitle}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          <div className="space-y-4">
            {steps.map((step, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className={`transform transition-all duration-300 ${
                  activeStep === index 
                    ? 'scale-102 bg-white shadow-md border-green-500' 
                    : 'hover:bg-white hover:shadow-sm'
                } rounded-xl border p-6 cursor-pointer`}
                onClick={() => setActiveStep(index)}
              >
                <div className="flex items-start space-x-4">
                  <div className={`flex-shrink-0 p-3 rounded-lg ${
                    activeStep === index ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-500'
                  }`}>
                    {step.icon()}
                  </div>
                  <div className="flex-1">
                    <h3 className={`text-lg font-semibold mb-2 ${
                      activeStep === index ? 'text-green-600' : 'text-gray-900'
                    }`}>
                      {step.title}
                    </h3>
                    <p className="text-gray-600 text-sm leading-relaxed">
                      {step.description}
                    </p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          <div className="relative h-[400px] flex items-center justify-center overflow-hidden">
            <AnimatePresence initial={false}>
              <motion.img
                key={activeStep}
                src={steps[activeStep].image}
                alt={steps[activeStep].imageAlt}
                initial={{ opacity: 0, x: 300 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -300 }}
                transition={{ type: "spring", stiffness: 300, damping: 30 }}
                className="w-full h-full object-contain rounded-lg absolute"
              />
            </AnimatePresence>
          </div>
        </div>
      </div>
    </div>
  );
}