import React from 'react';
import { Microscope, Activity, ArrowRight, CheckCircle2, Shield } from 'lucide-react';
import { Link, useLocation } from 'react-router-dom';

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

  return (
    <section className="py-20 bg-gradient-to-b from-white to-gray-50">
      <div className="container mx-auto px-6">
        <div className="text-center mb-16">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-brand-orange/10 rounded-full mb-6">
            <Microscope className="text-brand-orange" size={32} />
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            {isEnglish ? 'Our laboratories' : 'Наши лаборатории'}
          </h2>
          <p className="text-gray-600 text-lg max-w-2xl mx-auto">
            {isEnglish
              ? 'State-of-the-art equipment and qualified specialists for comprehensive testing and research.'
              : 'Современное оборудование и квалифицированные специалисты для проведения комплексных исследований'}
          </p>
        </div>

        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-8">
          {/* Грунтовая лаборатория */}
          <div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-brand-orange">
            {/* Изображение с наложением */}
            <div className="relative h-64 overflow-hidden">
              <img 
                src="/media/images/services/soil-survey.png" 
                alt={isEnglish ? 'Soil testing laboratory' : 'Грунтовая лаборатория'}
                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                loading="lazy"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
              
              {/* Иконка */}
              <div className="absolute top-6 left-6">
                <div className="w-16 h-16 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center border-2 border-white/30">
                  <Microscope className="text-white" size={32} />
                </div>
              </div>
              
              {/* Заголовок на изображении */}
              <div className="absolute bottom-6 left-6 right-6">
                <h3 className="text-2xl font-bold text-white mb-2">
                  {isEnglish ? 'Soil testing laboratory' : 'Грунтовая лаборатория'}
                </h3>
                <p className="text-white/90 text-sm">
                  {isEnglish
                    ? 'Testing of physical, mechanical and chemical soil properties.'
                    : 'Исследования физических, механических и химических свойств'}
                </p>
              </div>
            </div>

            {/* Контент карточки */}
            <div className="p-8">
              <div className="space-y-4 mb-8">
                <div className="flex items-start gap-3">
                  <CheckCircle2 className="text-brand-orange flex-shrink-0 mt-1" size={20} />
                  <div>
                    <p className="text-gray-700 font-medium">
                      {isEnglish ? 'Physical properties of soils' : 'Физические свойства грунтов'}
                    </p>
                    <p className="text-sm text-gray-500">
                      {isEnglish ? 'Moisture content, density, grain-size distribution.' : 'Влажность, плотность, гранулометрический состав'}
                    </p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <CheckCircle2 className="text-brand-orange flex-shrink-0 mt-1" size={20} />
                  <div>
                    <p className="text-gray-700 font-medium">
                      {isEnglish ? 'Mechanical characteristics' : 'Механические характеристики'}
                    </p>
                    <p className="text-sm text-gray-500">
                      {isEnglish ? 'Strength, deformability, compressibility.' : 'Прочность, деформируемость, сжимаемость'}
                    </p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <CheckCircle2 className="text-brand-orange flex-shrink-0 mt-1" size={20} />
                  <div>
                    <p className="text-gray-700 font-medium">
                      {isEnglish ? 'Chemical analysis' : 'Химический анализ'}
                    </p>
                    <p className="text-sm text-gray-500">
                      {isEnglish ? 'Soil aggressiveness, water analysis.' : 'Агрессивность грунтов, анализ воды'}
                    </p>
                  </div>
                </div>
              </div>

              {/* Кнопка */}
              <Link 
                to={`${prefix}/laboratories/soil`}
                className="flex items-center justify-center gap-2 w-full py-4 bg-gradient-to-r from-brand-orange to-orange-600 text-white font-bold rounded-xl hover:from-orange-600 hover:to-brand-orange transition-all duration-300 group/btn"
              >
                {isEnglish ? 'More about the laboratory' : 'Подробнее о лаборатории'}
                <ArrowRight className="group-hover/btn:translate-x-1 transition-transform" size={20} />
              </Link>
            </div>
          </div>

          {/* Радиационная лаборатория */}
          <div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-brand-orange">
            {/* Изображение с наложением */}
            <div className="relative h-64 overflow-hidden">
              <img 
                src="/media/images/services/engineering-surveys.png" 
                alt={isEnglish ? 'Radiation laboratory' : 'Радиационная лаборатория'}
                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                loading="lazy"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
              
              {/* Иконка */}
              <div className="absolute top-6 left-6">
                <div className="w-16 h-16 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center border-2 border-white/30">
                  <Activity className="text-white" size={32} />
                </div>
              </div>
              
              {/* Заголовок на изображении */}
              <div className="absolute bottom-6 left-6 right-6">
                <h3 className="text-2xl font-bold text-white mb-2">
                  {isEnglish ? 'Radiation laboratory' : 'Радиационная лаборатория'}
                </h3>
                <p className="text-white/90 text-sm">
                  {isEnglish
                    ? 'Professional radiation safety and exposure assessments.'
                    : 'Профессиональные исследования радиационной безопасности'}
                </p>
              </div>
            </div>

            {/* Контент карточки */}
            <div className="p-8">
              <div className="space-y-4 mb-8">
                <div className="flex items-start gap-3">
                  <Shield className="text-brand-orange flex-shrink-0 mt-1" size={20} />
                  <div>
                    <p className="text-gray-700 font-medium">
                      {isEnglish ? 'Radiation monitoring' : 'Радиационный контроль'}
                    </p>
                    <p className="text-sm text-gray-500">
                      {isEnglish ? 'Measurement of radon and gamma radiation levels.' : 'Измерение уровня радона и гамма-излучения'}
                    </p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <Shield className="text-brand-orange flex-shrink-0 mt-1" size={20} />
                  <div>
                    <p className="text-gray-700 font-medium">
                      {isEnglish ? 'Accredited laboratory' : 'Аккредитованная лаборатория'}
                    </p>
                    <p className="text-sm text-gray-500">
                      {isEnglish ? 'Technical competence and independence.' : 'Техническая компетентность и независимость'}
                    </p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <Shield className="text-brand-orange flex-shrink-0 mt-1" size={20} />
                  <div>
                    <p className="text-gray-700 font-medium">
                      {isEnglish ? 'Modern equipment' : 'Современное оборудование'}
                    </p>
                    <p className="text-sm text-gray-500">КАМЕРА-01, ДКГ-02У, ДРБП-03</p>
                  </div>
                </div>
              </div>

              {/* Кнопка */}
              <Link 
                to={`${prefix}/laboratories/radiation`}
                className="flex items-center justify-center gap-2 w-full py-4 bg-gradient-to-r from-brand-orange to-orange-600 text-white font-bold rounded-xl hover:from-orange-600 hover:to-brand-orange transition-all duration-300 group/btn"
              >
                {isEnglish ? 'More about the laboratory' : 'Подробнее о лаборатории'}
                <ArrowRight className="group-hover/btn:translate-x-1 transition-transform" size={20} />
              </Link>
            </div>
          </div>
        </div>

        {/* Дополнительная информация */}
        <div className="mt-16 max-w-4xl mx-auto">
          <div className="bg-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl p-8 md:p-12 text-center">
            <h3 className="text-2xl md:text-3xl font-bold mb-4">
              {isEnglish
                ? 'Need a consultation on laboratory testing?'
                : 'Нужна консультация по лабораторным исследованиям?'}
            </h3>
            <p className="text-gray-300 mb-6 max-w-2xl mx-auto">
              {isEnglish
                ? 'Our specialists will help you select the optimal set of tests for your project.'
                : 'Наши специалисты помогут подобрать оптимальный комплекс исследований для вашего проекта'}
            </p>
            <Link 
              to={`${prefix}/contacts`}
              className="inline-flex items-center gap-2 px-8 py-4 bg-brand-orange text-white font-bold rounded-xl hover:bg-orange-600 transition-colors"
            >
              {isEnglish ? 'Contact us' : 'Связаться с нами'}
              <ArrowRight size={20} />
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Laboratories;