import React from 'react';
import PageHeader from '../components/PageHeader';
import { CheckCircle2, Building2, Factory, Construction, Shield, Lightbulb, FileCheck } from 'lucide-react';

const DesignPage: React.FC = () => {
  const objectTypes = [
    {
      icon: Building2,
      title: 'Проектирование наземных объектов',
      description: 'Жилые, общественные и административные здания с полным комплексом инженерных систем'
    },
    {
      icon: Factory,
      title: 'Проектирование предприятий топливно-энергетического комплекса',
      description: 'Объекты нефтегазовой отрасли, энергетические комплексы и промышленные сооружения'
    },
    {
      icon: Construction,
      title: 'Проектирование объектов транспортных и защитных сооружений',
      description: 'Дороги, мосты, тоннели и специальные защитные конструкции'
    }
  ];

  const projectSections = [
    'АСУ ТП объектов добычи, подготовки, переработки нефти и газа',
    'Системы измерения количества и показателей качества нефти, нефтепродуктов и газа',
    'Системы обнаружения утечек',
    'Системы электрохимзащиты',
    'Электроснабжение (внешнее и внутреннее)',
    'Пожарная автоматика',
    'Системы охранной и пожарной сигнализации, видеонаблюдение',
    'Водоснабжение и канализация (внешняя и внутренняя)',
    'Молниезащита и заземление',
    'Линии и системы связи'
  ];

  const specialSections = [
    'Мероприятия по гражданской обороне и чрезвычайным ситуациям',
    'Мероприятия по охране окружающей среды (ООС и ОВОС)',
    'Мероприятия по обеспечению пожарной безопасности'
  ];

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title="Проектирование" 
        description="Комплексные проектные решения для объектов любой сложности"
        image="/media/images/headers/header-projectirovanie.png"
      />

      <div className="container mx-auto px-6 py-20">
        {/* Вступительный блок */}
        <div className="max-w-5xl mx-auto mb-20">
          <div className="bg-gray-50 rounded-2xl p-8 md:p-12 mb-12">
            <p className="text-lg text-gray-700 leading-relaxed mb-6">
              Специалисты нашей организации обладают значительным опытом в сфере проектирования объектов 
              в Республике Башкортостан и других регионах РФ.
            </p>
            <p className="text-gray-600 leading-relaxed mb-6">
              <strong>Проектирование строительных объектов</strong> – ответственный и сложный процесс, 
              влияющий на проведение строительства объекта и его успешное введение в эксплуатацию.
            </p>
            <p className="text-gray-600 leading-relaxed">
              На всех стадиях проектирования мы используем современные проектные и технические решения, 
              что позволяет нам получать отличные результаты работ независимо от сложности объекта. 
              Наши специалисты работают с актуальной законодательной базой в сфере проектирования 
              и способны находить оптимальные решения с учетом нормативных требований и пожеланий заказчика.
            </p>
          </div>

          <div className="bg-brand-orange text-white rounded-2xl p-8 md:p-12">
            <p className="text-lg leading-relaxed mb-4">
              Необходимость проведения определенных видов изысканий, их объем и состав определяются после 
              анализа технического задания и зависят от вида, уровня ответственности, назначения сооружений, 
              стадии проектирования, условий участка и степени их изученности.
            </p>
            <p className="leading-relaxed">
              Проведение инженерных изысканий подразумевает анализ данных, оценку возможных последствий 
              реализации проекта, получение санитарно-эпидемиологических заключений и составление технических 
              отчетов, состав которых определяется действующими нормативными документами. Наши специалисты 
              профессионально выполняют изыскания для строящихся или реконструируемых объектов любых типов.
            </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-3 gap-8 mb-12">
            {objectTypes.map((type, 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 text-center"
              >
                <div className="inline-flex w-20 h-20 bg-brand-orange text-white rounded-2xl items-center justify-center mb-6">
                  <type.icon size={40} />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-4 leading-tight">
                  {type.title}
                </h3>
                <p className="text-gray-600 leading-relaxed text-sm">
                  {type.description}
                </p>
              </div>
            ))}
          </div>

          {/* Дополнительная информация */}
          <div className="grid md:grid-cols-2 gap-6">
            <div className="bg-gray-50 rounded-xl p-6">
              <div className="flex items-start gap-3">
                <Shield className="text-brand-orange flex-shrink-0 mt-1" size={24} />
                <p className="text-gray-700 leading-relaxed text-sm">
                  В каждом случае учитываются требования к архитектурно-планировочным решениям объекта 
                  и соответствующие нормы пожарной безопасности. Значительное внимание уделяется также 
                  проектированию надежных систем внутренних и наружных инженерных коммуникаций.
                </p>
              </div>
            </div>

            <div className="bg-gray-50 rounded-xl p-6">
              <div className="flex items-start gap-3">
                <Lightbulb className="text-brand-orange flex-shrink-0 mt-1" size={24} />
                <p className="text-gray-700 leading-relaxed text-sm">
                  Перед выполнением работ по проектированию совместно с заказчиком определяются основные 
                  требования к проекту, в том числе состав помещений и наполнение зданий инженерным 
                  оборудованием. Проектировочные работы выполняются с учетом требований, предъявляемых 
                  к определенному объекту, особенностей и условий его эксплуатации.
                </p>
              </div>
            </div>
          </div>

          <div className="mt-6 bg-blue-50 border-l-4 border-blue-500 rounded-r-xl p-6">
            <div className="flex items-start gap-3">
              <FileCheck className="text-blue-600 flex-shrink-0 mt-1" size={24} />
              <p className="text-gray-700 leading-relaxed text-sm">
                <strong>Наша компания предоставляет услуги</strong> по предпроектной подготовке, необходимой 
                для оформления земельных участков, а также созданию проектно-сметных документов и согласованию 
                документации в контролирующих службах.
              </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">
              {projectSections.map((section, index) => (
                <div 
                  key={index}
                  className="flex items-start gap-3 bg-white rounded-lg p-4 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">{section}</span>
                </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-3 gap-6">
            {specialSections.map((section, index) => (
              <div 
                key={index}
                className="bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-2xl p-8 hover:shadow-xl transition-all hover:scale-105"
              >
                <div className="flex items-center justify-center w-14 h-14 bg-white/20 rounded-xl mb-4 mx-auto">
                  <CheckCircle2 size={28} />
                </div>
                <p className="text-center font-semibold leading-relaxed">
                  {section}
                </p>
              </div>
            ))}
          </div>
        </div>

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

              <div className="flex gap-4">
                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange rounded-lg flex items-center justify-center font-bold text-xl">
                  2
                </div>
                <div>
                  <h3 className="font-bold text-lg mb-2">Актуальная база</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">
                    Работаем с актуальной законодательной базой в сфере проектирования
                  </p>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange rounded-lg flex items-center justify-center font-bold text-xl">
                  3
                </div>
                <div>
                  <h3 className="font-bold text-lg mb-2">Опыт в регионе</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">
                    Значительный опыт проектирования в Республике Башкортостан и других регионах РФ
                  </p>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange rounded-lg flex items-center justify-center font-bold text-xl">
                  4
                </div>
                <div>
                  <h3 className="font-bold text-lg mb-2">Индивидуальный подход</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">
                    Находим оптимальные решения с учетом нормативов и пожеланий заказчика
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Призыв к действию */}
          <div className="mt-12 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 DesignPage;