import React from 'react';
import PageHeader from '../components/PageHeader';
import { Building2, ClipboardCheck, Wrench, CheckCircle2, Shield, FileSearch, Award } from 'lucide-react';

const BuildingSurveyPage: React.FC = () => {
  const equipment = [
    { name: 'Дальномер лазерный', model: 'Leica DISTO D2', manufacturer: 'UL Japan', year: '06.2007', serial: '-/200049511' },
    { name: 'Измеритель прочности ударно-импульсный (бетон)', model: 'ОНИКС-2,5', manufacturer: 'НПП «Интерприбор», г. Челябинск', year: '09.2016', serial: '538/2000205' },
    { name: 'Ультразвуковой толщиномер (сталь)', model: 'ТУ-1', manufacturer: 'НПП «Интерприбор», г. Челябинск', year: '09.2016', serial: '273/' },
    { name: 'Ультразвуковой толщиномер (сталь)', model: 'ТЭМП-4', manufacturer: 'ООО НПП «Технотест», г. Москва', year: '02.2016', serial: '2000206' },
    { name: 'Прибор обнаружения стержней арматуры и измерения защитного слоя бетона (наведенным э/магнитным полем)', model: 'PROFOSCOPE', manufacturer: 'Proceq SA, Шверценбах, Швейцария', year: '2018', serial: '400757/' },
    { name: 'Измеритель времени и скорости распространения ультразвука для определения дефектов, прочности, плотности, модуля деформации бетона', model: 'Пульсар-2М', manufacturer: 'НПП «Интерприбор», г. Челябинск', year: '05.2018', serial: 'зав. 738/-' },
    { name: 'Измеритель прочности бетона ударно-импульсный', model: 'ИПС-МГ4', manufacturer: 'ООО СКБ Стройприбор', year: '07.2017', serial: '12548/20004989' },
    { name: 'Токовые клещи. Измерение переменного тока, напряжения, сопротивления, проверки изоляции', model: 'TEK DT-266', manufacturer: '—', year: '—', serial: '—' },
    { name: 'Дефектоскоп ультразвуковой УД2В-П, предназначен для контроля продукции на наличие дефектов типа нарушение сплошности и однородности материалов, полуфабрикатов, готовых изделий и сварных соединений', model: 'УД2В-П', manufacturer: '—', year: '—', serial: '—' },
    { name: 'Насос опрессовочный ручной для трубопроводов систем водо, теплоснабжения', model: 'МЕГЕОН 98025', manufacturer: '—', year: '—', serial: '—' }
  ];

  const services = [
    {
      icon: Building2,
      title: 'Обследование конструкций',
      description: 'Детальная оценка технического состояния несущих и ограждающих конструкций зданий и сооружений'
    },
    {
      icon: FileSearch,
      title: 'Выявление дефектов',
      description: 'Обнаружение скрытых дефектов, трещин, деформаций и других повреждений конструктивных элементов'
    },
    {
      icon: Shield,
      title: 'Оценка безопасности',
      description: 'Определение несущей способности конструкций и оценка возможности дальнейшей эксплуатации здания'
    },
    {
      icon: Award,
      title: 'Разработка рекомендаций',
      description: 'Подготовка технического заключения с рекомендациями по усилению или ремонту конструкций'
    }
  ];

  const advantages = [
    'Инженерные изыскания для строящихся и реконструируемых объектов',
    'Разработка проектной документации любой сложности',
    'Проведение капитального ремонта и перепланировки',
    'Разработка генеральных планов',
    'Выполнение строительных и электромонтажных работ',
    'Проектирование инженерных сетей'
  ];

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title="Обследование технического состояния здания" 
        description="Профессиональная диагностика и оценка состояния строительных конструкций"
        image="/media/images/headers/header-observing-buildings.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">
            <p className="text-lg leading-relaxed">
              Проектно-изыскательская строительная компания <strong>ООО «ГеоВектор»</strong> оказывает комплексные 
              услуги по подготовке, разработке и реализации строительных проектов. Мы осуществляем инженерные 
              изыскания и разрабатываем проектную документацию для строящихся или реконструируемых объектов, 
              проведения капитального ремонта и перепланировки, разрабатываем генеральные планы, выполняем любые 
              строительные, электромонтажные работы и проектируем инженерные сети.
            </p>
          </div>
        </div>

        {/* Услуги обследования */}
        <div className="max-w-6xl mx-auto mb-20">
          <h2 className="text-3xl font-bold text-gray-900 mb-4 text-center">
            Виды обследований
          </h2>
          <p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
            Комплексный подход к оценке технического состояния зданий и сооружений
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {services.map((service, 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 text-white rounded-xl flex items-center justify-center">
                    <service.icon size={28} />
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 leading-tight pt-2">
                    {service.title}
                  </h3>
                </div>
                <p className="text-gray-600 leading-relaxed">
                  {service.description}
                </p>
              </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="bg-gray-50 rounded-2xl p-8 md:p-10">
            <div className="grid md:grid-cols-2 gap-4">
              {advantages.map((advantage, index) => (
                <div 
                  key={index}
                  className="flex items-start gap-3 bg-white rounded-lg p-5 hover:shadow-md transition-shadow"
                >
                  <CheckCircle2 className="flex-shrink-0 text-brand-orange mt-0.5" size={20} />
                  <span className="text-gray-700 leading-relaxed">{advantage}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Оборудование */}
        <div className="max-w-7xl 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-4">
              <Wrench size={32} />
              <span className="text-xl font-bold">ОБОРУДОВАНИЕ ДЛЯ ОБСЛЕДОВАНИЯ</span>
            </div>
            <p className="text-gray-600 max-w-3xl mx-auto">
              Современное высокоточное оборудование ведущих мировых производителей
            </p>
          </div>

          <div className="overflow-x-auto shadow-lg rounded-2xl">
            <table className="w-full bg-white">
              <thead>
                <tr className="bg-brand-orange text-white">
                  <th className="px-6 py-4 text-left font-bold">Назначение прибора</th>
                  <th className="px-6 py-4 text-left font-bold">Марка прибора</th>
                  <th className="px-6 py-4 text-left font-bold">Изготовитель</th>
                  <th className="px-6 py-4 text-center font-bold">Год изгот.</th>
                  <th className="px-6 py-4 text-center font-bold">Зав. / инв. номер</th>
                </tr>
              </thead>
              <tbody>
                {equipment.map((item, index) => (
                  <tr 
                    key={index}
                    className={`border-b border-gray-200 hover:bg-gray-50 transition-colors ${
                      index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
                    }`}
                  >
                    <td className="px-6 py-4 text-gray-700 leading-relaxed">
                      {item.name}
                    </td>
                    <td className="px-6 py-4 font-semibold text-gray-900">
                      {item.model}
                    </td>
                    <td className="px-6 py-4 text-gray-700 text-sm">
                      {item.manufacturer}
                    </td>
                    <td className="px-6 py-4 text-center text-gray-700">
                      {item.year}
                    </td>
                    <td className="px-6 py-4 text-center text-gray-700 text-sm">
                      {item.serial}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

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

              <div className="text-center">
                <div className="inline-flex w-16 h-16 bg-brand-orange rounded-xl items-center justify-center mb-4">
                  <Award size={32} />
                </div>
                <h3 className="font-bold text-lg mb-3">Опытные специалисты</h3>
                <p className="text-gray-300 text-sm leading-relaxed">
                  Квалифицированные инженеры с многолетним опытом обследований
                </p>
              </div>

              <div className="text-center">
                <div className="inline-flex w-16 h-16 bg-brand-orange rounded-xl items-center justify-center mb-4">
                  <Shield size={32} />
                </div>
                <h3 className="font-bold text-lg mb-3">Надежные результаты</h3>
                <p className="text-gray-300 text-sm leading-relaxed">
                  Точные данные и обоснованные рекомендации по результатам обследования
                </p>
              </div>
            </div>
          </div>

          {/* Призыв к действию */}
          <div className="text-center">
            <div className="bg-gray-50 rounded-2xl p-8">
              <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 BuildingSurveyPage;