import React from 'react';
import { useLocation } from 'react-router-dom';
import { BENEFITS } from '../constants';

const Benefits: React.FC = () => {
  const location = useLocation();
  const isEnglish = location.pathname.startsWith('/en');

  const descriptions = BENEFITS.map((item) => {
    if (!isEnglish) return item.description;
    switch (item.title) {
      case 'Надежность':
        return 'A reliable company ranked among the top 10 in Russia.';
      case 'Опыт':
        return 'Experienced engineers with 10+ years of hands-on practice.';
      case 'Поддержка':
        return 'Direct communication and support from our specialists 24/7.';
      case 'Условия':
        return 'Tailored proposals and flexible terms of cooperation.';
      default:
        return item.description;
    }
  });

  return (
    <div className="py-24 bg-white">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          
          <div className="lg:col-span-4">
            <span className="text-sm text-gray-500 uppercase tracking-widest mb-2 block">
              {isEnglish ? 'WHO WE WORK WITH' : 'Для кого мы работаем'}
            </span>
            <h2 className="text-4xl font-bold text-gray-900 mb-6">
              {isEnglish
                ? 'For business and public sector clients'
                : 'Для бизнеса и государственных заказчиков'}
            </h2>
            <p className="text-gray-500 text-sm">
              {isEnglish
                ? 'We help developers, industrial companies and public authorities solve complex engineering challenges and take responsibility for the final result.'
                : 'Мы работаем с девелоперами, промышленными компаниями и государственными организациями, беря на себя сложные инженерные задачи и ответственность за результат.'}
            </p>
          </div>

          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
            {BENEFITS.map((item, index) => (
              <div key={index} className="flex flex-col items-start gap-4">
                <div className="w-12 h-12 rounded-full bg-brand-orange/20 flex items-center justify-center text-brand-orange">
                  <item.icon size={24} />
                </div>
                <p className="text-gray-700 leading-relaxed font-medium">
                  {descriptions[index]}
                </p>
              </div>
            ))}
          </div>

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

export default Benefits;