import React from 'react';
import PageHeader from '../components/PageHeader';
import { SERVICES } from '../constants';
import { ArrowRight } from 'lucide-react';
import { Link, useLocation } from 'react-router-dom';

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

  const pageTitle = isEnglish ? 'Our services' : 'Наши услуги';
  const pageDescription = isEnglish
    ? 'A full range of engineering and construction services – from surveys to turnkey delivery.'
    : 'Полный спектр инженерных и строительных работ любой сложности. От изысканий до сдачи объекта под ключ.';

  // Отфильтровываем технические задания и строительство из основных услуг
  const mainServices = SERVICES.filter(
    service => service.title !== 'Технические задания' && service.title !== 'Строительство'
  );
  const technicalTasksService = SERVICES.find(service => service.title === 'Технические задания');

  return (
    <div className="bg-gray-50 pb-20">
      <PageHeader 
        title={pageTitle}
        description={pageDescription}
        image="/media/images/headers/header-services.png"
      />
      
      <div className="container mx-auto px-6 py-20">
        {/* Блок с техническими заданиями */}
        {technicalTasksService && (
          <div className="mb-16 max-w-4xl mx-auto">
            <div className="bg-white rounded-2xl shadow-lg overflow-hidden border-2 border-gray-200">
              <div className="p-8 md:p-10">
                <div className="flex items-start gap-6">
                  <div className="flex-shrink-0">
                    <div className="w-16 h-16 bg-brand-orange/10 rounded-xl flex items-center justify-center">
                      <svg className="w-8 h-8 text-brand-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                      </svg>
                    </div>
                  </div>
                  
                  <div className="flex-1">
                    <h3 className="text-2xl font-bold text-gray-900 mb-3">
                      {isEnglish ? 'Technical assignment templates' : 'Образцы технических заданий'}
                    </h3>
                    <p className="text-gray-600 leading-relaxed mb-6">
                      {isEnglish
                        ? 'Ready-made templates and examples of technical assignments for different types of engineering work. The documents are available for download and can be adapted to your project.'
                        : 'Готовые шаблоны и примеры технических заданий для различных видов инженерных работ. Документы доступны для скачивания и могут быть адаптированы под ваш проект.'}
                    </p>
                    
                    <Link 
                      to={`${prefix}/services/technical-tasks`} 
                      className="inline-flex items-center gap-2 px-6 py-3 bg-brand-orange text-white font-bold rounded-lg hover:bg-orange-600 transition-colors"
                    >
                      {isEnglish ? 'View templates' : 'Посмотреть образцы'} <ArrowRight size={20} />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {mainServices.map((service, idx) => {
            const title =
              isEnglish
                ? (() => {
                    switch (service.title) {
                      case 'Инженерные изыскания':
                        return 'Engineering surveys';
                      case 'Проектирование':
                        return 'Design';
                      case 'Обследование грунтов':
                        return 'Soil investigation';
                      case 'Обследование здания':
                        return 'Building survey';
                      case 'Землестроительный и Кадастровые работы':
                        return 'Land management and cadastral works';
                      default:
                        return service.title;
                    }
                  })()
                : service.title;

            const description =
              isEnglish
                ? (() => {
                    switch (service.title) {
                      case 'Инженерные изыскания':
                        return 'Comprehensive investigation of construction site conditions: engineering-geodetic, geological, hydrometeorological and environmental surveys.';
                      case 'Проектирование':
                        return 'Development of design and working documentation for civil and industrial facilities, including architectural and structural solutions.';
                      case 'Обследование грунтов':
                        return 'Laboratory and field testing of soils. Determination of physical and mechanical properties for designing foundations and subgrades.';
                      case 'Обследование здания':
                        return 'Technical inspection of buildings and structures. Assessment of load-bearing structures, detection of defects and development of strengthening recommendations.';
                      case 'Землестроительный и Кадастровые работы':
                        return 'Land surveying, preparation of technical plans and inspection reports, registration of real estate in the state cadastre.';
                      default:
                        return service.description;
                    }
                  })()
                : service.description;

            return (
            <div 
              key={idx} 
              className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 flex flex-col h-full"
            >
              <div className="h-64 overflow-hidden">
                <img 
                  src={service.image} 
                  alt={title} 
                  className="w-full h-full object-cover transition-transform duration-700 hover:scale-110"
                />
              </div>
              
              <div className="p-8 flex-grow flex flex-col">
                <h3 className="text-2xl font-bold text-gray-900 mb-4">{title}</h3>
                <p className="text-gray-600 text-sm mb-6 flex-grow leading-relaxed">
                  {description}
                </p>
                <div className="flex flex-col gap-3 mt-auto">
                  {service.title === 'Инженерные изыскания' && (
                    <Link 
                      to={`${prefix}/services/surveying`} 
                      className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
                    >
                      {isEnglish ? 'Learn more' : 'Подробнее'} <ArrowRight size={18} />
                    </Link>
                  )}
                  {service.title === 'Проектирование' && (
                    <Link 
                      to={`${prefix}/services/design`} 
                      className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
                    >
                      {isEnglish ? 'Learn more' : 'Подробнее'} <ArrowRight size={18} />
                    </Link>
                  )}
                  {service.title === 'Обследование грунтов' && (
                    <Link 
                      to={`${prefix}/services/soil-survey`} 
                      className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
                    >
                      {isEnglish ? 'Learn more' : 'Подробнее'} <ArrowRight size={18} />
                    </Link>
                  )}
                  {service.title === 'Обследование здания' && (
                    <Link 
                      to={`${prefix}/services/building-survey`} 
                      className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
                    >
                      {isEnglish ? 'Learn more' : 'Подробнее'} <ArrowRight size={18} />
                    </Link>
                  )}
                  {service.title === 'Землестроительный и Кадастровые работы' && (
                    <Link 
                      to={`${prefix}/services/land-survey`} 
                      className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
                    >
                      {isEnglish ? 'Learn more' : 'Подробнее'} <ArrowRight size={18} />
                    </Link>
                  )}
                  <Link 
                    to={`${prefix}/contacts`} 
                    className={`flex items-center ${(service.title === 'Инженерные изыскания' || service.title === 'Проектирование' || service.title === 'Обследование грунтов' || service.title === 'Обследование здания' || service.title === 'Землестроительный и Кадастровые работы') ? 'justify-center' : 'gap-2'} text-brand-orange font-medium hover:gap-4 transition-all`}
                  >
                    {isEnglish ? 'Request this service' : 'Заказать услугу'} <ArrowRight size={16} />
                  </Link>
                </div>
              </div>
            </div>
          )})}
        </div>
      </div>
    </div>
  );
};

export default ServicesPage;