// import React from 'react';
// import mac from '../images/maciphone.png';

// const Udobno = () => {
//   return (
//     <div>
//       <div className="container mx-auto px-4 py-24">
//         <div className="flex flex-col md:flex-row items-center justify-between gap-12">
//           {/* Текстовый контент */}
//           <div className="flex-1 max-w-xl">
//             <h2 className=" text-4xl font-extrabold text-green-600 mb-8 leading-tight">
//               Управляйте контентом в браузере или в приложении
//             </h2>
//             <p className="text-xl font-bold text-gray-700 leading-relaxed space-y-4">
//               Полный доступ к функционалу сервиса из любой точки мира. 
//               Работайте через удобный веб-интерфейс или используйте 
//               нативное приложение.
//             </p>
//           </div>
          
//           {/* Изображение */}
//           <div className="flex-1 relative">
//             <div className="relative transform hover:scale-105 transition-transform duration-300">
//               <div className="absolute inset-0 opacity-10 rounded-2xl"></div>
//               <img 
//                 src={mac} 
//                 alt="Интерфейс qWick на различных устройствах"
//                 className="relative z-10 max-w-full h-auto rounded-2xl"
//               />
//             </div>
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default Udobno;

import React from 'react';
import mac from '../images/maciphone.png';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';

const Udobno = () => {
  const { language } = useLanguage();
  const t = translations.udobno[language];

  return (
    <div>
      <div className="container mx-auto px-4 py-24">
        <div className="flex flex-col md:flex-row items-center justify-between gap-12">
          {/* Text content */}
          <div className="flex-1 max-w-xl">
            <h2 className="text-4xl font-extrabold text-green-600 mb-8 leading-tight">
              {t.title}
            </h2>
            <p className="text-xl font-bold text-gray-700 leading-relaxed space-y-4">
              {t.description}
            </p>
          </div>
          
          {/* Image */}
          <div className="flex-1 relative">
            <div className="relative transform hover:scale-105 transition-transform duration-300">
              <div className="absolute inset-0 opacity-10 rounded-2xl"></div>
              <img 
                src={mac} 
                alt={t.imageAlt}
                className="relative z-10 max-w-full h-auto rounded-2xl"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Udobno;