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

const Laboratories: React.FC = () => {
  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">
            Наши лаборатории
          </h2>
          <p className="text-gray-600 text-lg max-w-2xl mx-auto">
            Современное оборудование и квалифицированные специалисты для проведения 
            комплексных исследований
          </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="Грунтовая лаборатория"
                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">
                  Грунтовая лаборатория
                </h3>
                <p className="text-white/90 text-sm">
                  Исследования физических, механических и химических свойств
                </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">Физические свойства грунтов</p>
                    <p className="text-sm text-gray-500">Влажность, плотность, гранулометрический состав</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">Механические характеристики</p>
                    <p className="text-sm text-gray-500">Прочность, деформируемость, сжимаемость</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">Химический анализ</p>
                    <p className="text-sm text-gray-500">Агрессивность грунтов, анализ воды</p>
                  </div>
                </div>
              </div>

              {/* Кнопка */}
              <Link 
                to="/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"
              >
                Подробнее о лаборатории
                <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="Радиационная лаборатория"
                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">
                  Радиационная лаборатория
                </h3>
                <p className="text-white/90 text-sm">
                  Профессиональные исследования радиационной безопасности
                </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">Радиационный контроль</p>
                    <p className="text-sm text-gray-500">Измерение уровня радона и гамма-излучения</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">Аккредитованная лаборатория</p>
                    <p className="text-sm text-gray-500">Техническая компетентность и независимость</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">Современное оборудование</p>
                    <p className="text-sm text-gray-500">КАМЕРА-01, ДКГ-02У, ДРБП-03</p>
                  </div>
                </div>
              </div>

              {/* Кнопка */}
              <Link 
                to="/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"
              >
                Подробнее о лаборатории
                <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">
              Нужна консультация по лабораторным исследованиям?
            </h3>
            <p className="text-gray-300 mb-6 max-w-2xl mx-auto">
              Наши специалисты помогут подобрать оптимальный комплекс исследований для вашего проекта
            </p>
            <Link 
              to="/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"
            >
              Связаться с нами
              <ArrowRight size={20} />
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Laboratories;