import React from 'react';
import PageHeader from '../components/PageHeader';
import { CheckCircle2, AlertTriangle, Target, ClipboardCheck, Search, TrendingDown, Activity } from 'lucide-react';

const SoilSurveyPage: React.FC = () => {
  const workTypes = [
    {
      icon: AlertTriangle,
      title: 'Проходка котлованов и траншей',
      description: 'Прокладка подземных коммуникаций, пешеходных и транспортных тоннелей ниже глубины заложения существующих фундаментов, особенно с применением водопонижения'
    },
    {
      icon: TrendingDown,
      title: 'Строительство новых зданий',
      description: 'Возведение объектов, вызывающих дополнительные напряжения, перераспределение напряжений и перемещения грунта в активной зоне фундаментов существующих зданий'
    },
    {
      icon: Activity,
      title: 'Устройство стен в грунте',
      description: 'Забивка шпунта или свай вблизи существующих зданий с передачей на их основание динамических нагрузок'
    },
    {
      icon: Target,
      title: 'Динамические воздействия',
      description: 'От авто- и железнодорожного транспорта, линий метрополитена, оборудования, устанавливаемого в сооружениях и промышленных установках'
    }
  ];

  const mainTasks = [
    'Возможности надстройки, реконструкции зданий и сооружений с увеличением временных и постоянных нагрузок на фундаменты',
    'Установления причин деформаций и разработки мер для предотвращения их дальнейшего развития, а также восстановления условий нормальной эксплуатации зданий и сооружений',
    'Определения состояния грунтов основания, возможности и условий достройки зданий и сооружений после длительной консервации их строительства',
    'Определения состояния мест примыкания зданий-пристроек к существующим и разработки мер по обеспечению их устойчивости',
    'Выяснения причин затапливания и подтапливания подвалов и других подземных сооружений'
  ];

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title="Обследование грунтов" 
        description="Оценка состояния грунтов оснований зданий и сооружений"
        image="/media/images/headers/header-obsledovanie-gruntov.png"
      />

      <div className="container mx-auto px-6 py-20">
        {/* Основное описание */}
        <div className="max-w-5xl mx-auto mb-20">
          <div className="bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-2xl p-8 md:p-12 mb-12">
            <h2 className="text-3xl font-bold mb-6">
              Обследование состояния грунтов основания зданий и сооружений
            </h2>
            <p className="text-lg leading-relaxed">
              Обследование состояния грунтов оснований зданий и сооружений выполняются для оценки возможных 
              негативных последствий от реконструкции существующего здания, а также от воздействия на него нового 
              строительства (реконструкции, расширения) на прилегающих территориях и, при необходимости, получение 
              данных для разработки мероприятий по обеспечению эксплуатационной надежности существующей застройки.
            </p>
          </div>

          <div className="bg-gray-50 rounded-2xl p-8 md:p-12">
            <div className="flex items-start gap-4 mb-6">
              <Search className="text-brand-orange flex-shrink-0" size={32} />
              <h3 className="text-2xl font-bold text-gray-900">
                Когда необходимо обследование
              </h3>
            </div>
            <p className="text-gray-700 leading-relaxed mb-6">
              Обследование грунтов оснований существующих зданий необходимо производить, когда в прилегающей 
              к ним зоне производятся следующие виды работ (или возможны какие-то негативные воздействия):
            </p>
          </div>
        </div>

        {/* Виды работ */}
        <div className="max-w-6xl mx-auto mb-20">
          <h2 className="text-3xl font-bold text-gray-900 mb-12 text-center">
            Виды работ, требующие обследования грунтов
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {workTypes.map((work, index) => (
              <div 
                key={index}
                className="bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-brand-orange transition-all duration-300 hover:shadow-xl"
              >
                <div className="flex items-start gap-4 mb-4">
                  <div className="flex-shrink-0 w-14 h-14 bg-brand-orange/10 text-brand-orange rounded-xl flex items-center justify-center">
                    <work.icon size={28} />
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 leading-tight pt-2">
                    {work.title}
                  </h3>
                </div>
                <p className="text-gray-600 leading-relaxed text-sm">
                  {work.description}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* Основные задачи */}
        <div className="max-w-6xl mx-auto mb-20">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-3 bg-brand-orange text-white px-8 py-4 rounded-full mb-6">
              <ClipboardCheck size={32} />
              <span className="text-xl font-bold">ОСНОВНЫЕ ЗАДАЧИ ОБСЛЕДОВАНИЯ</span>
            </div>
          </div>

          <div className="bg-gray-50 rounded-2xl p-8 md:p-10 mb-8">
            <p className="text-gray-700 leading-relaxed mb-8">
              При обследовании необходимо определять изменения инженерно-геологических условий за период 
              строительства и эксплуатации предприятий, зданий и сооружений, включая изменения рельефа, 
              геологического строения, гидрогеологических условий, состава, состояния и свойств грунтов, 
              активности инженерно-геологических процессов, с целью получения данных для решения основных задач:
            </p>

            <div className="space-y-4">
              {mainTasks.map((task, index) => (
                <div 
                  key={index}
                  className="flex items-start gap-3 bg-white rounded-lg p-5 hover:shadow-md transition-shadow"
                >
                  <div className="flex-shrink-0 w-8 h-8 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-sm">
                    {index + 1}
                  </div>
                  <p className="text-gray-700 leading-relaxed pt-0.5">{task}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Методология */}
        <div className="max-w-6xl mx-auto mb-20">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
            Методология обследования
          </h2>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white rounded-2xl p-8 shadow-lg border-t-4 border-brand-orange">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center">
                  <Search size={24} />
                </div>
                <h3 className="text-xl font-bold text-gray-900">
                  Использование материалов изысканий
                </h3>
              </div>
              <p className="text-gray-600 leading-relaxed text-sm">
                При наличии материалов изысканий прошлых лет их использование возможно с учетом п. 5.2 СП 11-105-97, 
                часть I. В случаях, когда материалы отсутствуют или при анализе оцениваются как недостаточные, 
                сомнительные, устаревшие, обследование следует выполнять в составе и в объемах, обоснованных 
                в программе изысканий.
              </p>
            </div>

            <div className="bg-white rounded-2xl p-8 shadow-lg border-t-4 border-brand-orange">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center">
                  <Activity size={24} />
                </div>
                <h3 className="text-xl font-bold text-gray-900">
                  Стационарные наблюдения
                </h3>
              </div>
              <p className="text-gray-600 leading-relaxed text-sm">
                Обследование осуществляется на основе стационарных наблюдений за геофизическими параметрами среды 
                (скоростью упругих волн, электрическим сопротивлением, температурой и др.), изменение которых позволяет 
                судить об осадке оснований, фильтрации и других процессах. Выполняются повторные систематические 
                наблюдения на одной и той же базе.
              </p>
            </div>
          </div>
        </div>

        {/* Дополнительные услуги */}
        <div className="max-w-5xl mx-auto mb-20">
          <div className="bg-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl p-8 md:p-12">
            <div className="flex items-start gap-6">
              <div className="flex-shrink-0">
                <CheckCircle2 size={48} className="text-brand-orange" />
              </div>
              <div>
                <h3 className="text-2xl font-bold mb-4">Дополнительные исследования</h3>
                <p className="text-gray-300 leading-relaxed">
                  При обследовании оснований зданий и сооружений может выполняться определение глубины заложения 
                  фундаментов и оценки их состояния. Это позволяет получить полную картину состояния объекта 
                  и разработать комплекс мероприятий по обеспечению его безопасной эксплуатации.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Преимущества */}
        <div className="max-w-6xl mx-auto">
          <div className="bg-gray-50 rounded-2xl p-8 md:p-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
              Почему важно обследование грунтов
            </h2>
            
            <div className="grid md:grid-cols-3 gap-6">
              <div className="bg-white rounded-xl p-6 text-center">
                <div className="inline-flex w-16 h-16 bg-brand-orange/10 text-brand-orange rounded-full items-center justify-center mb-4">
                  <AlertTriangle size={32} />
                </div>
                <h3 className="font-bold text-lg mb-3 text-gray-900">Предотвращение аварий</h3>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Своевременное выявление проблем позволяет избежать деформаций и разрушений зданий
                </p>
              </div>

              <div className="bg-white rounded-xl p-6 text-center">
                <div className="inline-flex w-16 h-16 bg-brand-orange/10 text-brand-orange rounded-full items-center justify-center mb-4">
                  <Target size={32} />
                </div>
                <h3 className="font-bold text-lg mb-3 text-gray-900">Точная диагностика</h3>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Определение причин деформаций и разработка эффективных мер по их устранению
                </p>
              </div>

              <div className="bg-white rounded-xl p-6 text-center">
                <div className="inline-flex w-16 h-16 bg-brand-orange/10 text-brand-orange rounded-full items-center justify-center mb-4">
                  <CheckCircle2 size={32} />
                </div>
                <h3 className="font-bold text-lg mb-3 text-gray-900">Безопасность</h3>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Обеспечение эксплуатационной надежности существующей и новой застройки
                </p>
              </div>
            </div>
          </div>

          {/* Призыв к действию */}
          <div className="mt-12 text-center">
            <div className="bg-white rounded-2xl p-8 shadow-lg">
              <p className="text-gray-700 mb-6 text-lg">
                Нужна консультация по обследованию грунтов?
              </p>
              <a 
                href="#/contacts" 
                className="inline-block px-10 py-4 bg-brand-orange text-white font-bold rounded-lg hover:bg-orange-600 transition-colors text-lg shadow-lg hover:shadow-xl"
              >
                Связаться с нами
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SoilSurveyPage;