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

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

  // Exclude Technical Tasks and show first 3 actual services
  const actualServices = SERVICES.filter(service => service.title !== 'Технические задания');
  const displayedServices = actualServices.slice(0, 3);

  // Helper function to get service detail page URL
  const getServiceUrl = (title: string) => {
    const urlMap: { [key: string]: string } = {
      'Инженерные изыскания': '/services/surveying',
      'Проектирование': '/services/design',
      'Обследование грунтов': '/services/soil-survey',
      'Обследование здания': '/services/building-survey',
      'Землестроительный и Кадастровые работы': '/services/land-survey'
    };
    return urlMap[title] || null;
  };

  return (
    <div className="py-20 bg-gray-50" id="services">
      <div className="container mx-auto px-6">
        <div className="flex justify-between items-end mb-12">
          <h2 className="text-4xl font-bold text-gray-900">
            {isEnglish ? 'Services' : 'Услуги'}
          </h2>
          <Link
            to={`${prefix}/services`}
            className="flex items-center gap-2 text-sm font-medium hover:text-brand-orange transition-colors"
          >
            {isEnglish ? 'Show all' : 'Показать все'} <ArrowRight size={16} />
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {displayedServices.map((service, idx) => {
            const detailUrl = getServiceUrl(service.title);

            const title =
              isEnglish
                ? (() => {
                    switch (service.title) {
                      case 'Инженерные изыскания':
                        return 'Engineering surveys';
                      case 'Проектирование':
                        return 'Design';
                      case 'Обследование грунтов':
                        return 'Soil investigation';
                      case 'Обследование здания':
                        return 'Building survey';
                      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 with 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 elements and recommendations for strengthening.';
                      default:
                        return service.description;
                    }
                  })()
                : service.description;

            return (
              <div 
                key={idx} 
                className="group relative h-[500px] rounded-2xl overflow-hidden cursor-pointer shadow-lg"
              >
                <img 
                  src={service.image} 
                  alt={title} 
                  className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  loading="lazy"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
                
                <div className="absolute bottom-0 left-0 p-8 w-full">
                  <h3 className="text-2xl font-bold text-white mb-3">{title}</h3>
                  <p className="text-gray-300 text-sm mb-6 line-clamp-3 opacity-90">
                    {description}
                  </p>
                  
                  <div className="flex flex-col gap-3">
                    {detailUrl && (
                      <Link 
                        to={`${prefix}${detailUrl}`} 
                        className="inline-flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-5 py-2.5 rounded-lg hover:bg-orange-600 transition-colors"
                      >
                        {isEnglish ? 'Learn more' : 'Подробнее'} <ArrowRight size={18} />
                      </Link>
                    )}
                    <Link 
                      to={`${prefix}/contacts`} 
                      className="flex items-center gap-2 text-brand-orange text-sm font-medium group-hover:gap-4 transition-all"
                    >
                      {isEnglish ? 'Request a quote' : 'Рассчитать стоимость'} <ArrowRight size={16} />
                    </Link>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Services;