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

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

  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={isEnglish ? 'Design' : 'Проектирование'} 
        description={
          isEnglish
            ? 'Comprehensive design solutions for projects of any complexity.'
            : 'Комплексные проектные решения для объектов любой сложности'
        }
        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">
              {isEnglish
                ? 'Our specialists have extensive experience in designing facilities in the Republic of Bashkortostan and other regions of Russia.'
                : 'Специалисты нашей организации обладают значительным опытом в сфере проектирования объектов в Республике Башкортостан и других регионах РФ.'}
            </p>
            <p className="text-gray-600 leading-relaxed mb-6">
              {isEnglish ? (
                <>
                  <strong>Designing construction facilities</strong> is a demanding and complex process that directly
                  influences the construction phase and successful commissioning of the facility.
                </>
              ) : (
                <>
                  <strong>Проектирование строительных объектов</strong> – ответственный и сложный процесс, 
                  влияющий на проведение строительства объекта и его успешное введение в эксплуатацию.
                </>
              )}
            </p>
            <p className="text-gray-600 leading-relaxed">
              {isEnglish
                ? 'At every stage of design we use modern engineering and technical solutions, which allows us to achieve excellent results regardless of project complexity. Our team works with up-to-date design regulations and finds optimal solutions that meet both regulatory requirements and the client’s expectations.'
                : 'На всех стадиях проектирования мы используем современные проектные и технические решения, что позволяет нам получать отличные результаты работ независимо от сложности объекта. Наши специалисты работают с актуальной законодательной базой в сфере проектирования и способны находить оптимальные решения с учетом нормативных требований и пожеланий заказчика.'}
            </p>
          </div>

          <div className="bg-brand-orange text-white rounded-2xl p-8 md:p-12">
            <p className="text-lg leading-relaxed mb-4">
              {isEnglish
                ? 'The need for certain types of surveys, their scope and composition is determined after analysing the technical assignment and depends on the type and responsibility level of the facility, design stage and site conditions.'
                : 'Необходимость проведения определенных видов изысканий, их объем и состав определяются после анализа технического задания и зависят от вида, уровня ответственности, назначения сооружений, стадии проектирования, условий участка и степени их изученности.'}
            </p>
            <p className="leading-relaxed">
              {isEnglish
                ? 'Engineering surveys include data analysis, assessment of potential consequences of project implementation, obtaining sanitary and epidemiological approvals and preparing technical reports as required by current regulations. Our specialists perform surveys for both new and reconstruction projects of any type.'
                : 'Проведение инженерных изысканий подразумевает анализ данных, оценку возможных последствий реализации проекта, получение санитарно-эпидемиологических заключений и составление технических отчетов, состав которых определяется действующими нормативными документами. Наши специалисты профессионально выполняют изыскания для строящихся или реконструируемых объектов любых типов.'}
            </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">
            {isEnglish
              ? 'Comprehensive design services'
              : 'Предоставление комплексных услуг по проектированию'}
          </h2>
          <p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
            {isEnglish
              ? 'GeoVector LLC provides design services for the following types of facilities:'
              : 'ООО «ГеоВектор» осуществляет проектирование следующих объектов'}
          </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">
                  {isEnglish
                    ? 'For each project we take into account architectural and planning requirements and applicable fire safety standards, with special attention to the design of reliable internal and external engineering networks.'
                    : 'В каждом случае учитываются требования к архитектурно-планировочным решениям объекта и соответствующие нормы пожарной безопасности. Значительное внимание уделяется также проектированию надежных систем внутренних и наружных инженерных коммуникаций.'}
                </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">
                  {isEnglish
                    ? 'Before starting design work we agree with the client on the key project requirements, including room programme and engineering systems. The design process always accounts for the facility’s specific operating conditions and regulatory constraints.'
                    : 'Перед выполнением работ по проектированию совместно с заказчиком определяются основные требования к проекту, в том числе состав помещений и наполнение зданий инженерным оборудованием. Проектировочные работы выполняются с учетом требований, предъявляемых к определенному объекту, особенностей и условий его эксплуатации.'}
                </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">
            {isEnglish
              ? 'Design of sections for integrated projects'
              : 'Выполнение разделов комплексных проектов'}
          </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">
            {isEnglish
              ? 'Development of specialised sections'
              : 'Разработка специальных разделов'}
          </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">
              {isEnglish ? 'Why clients choose us' : 'Почему выбирают нас'}
            </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">
                    {isEnglish ? 'Modern solutions' : 'Современные решения'}
                  </h3>
                  <p className="text-gray-300 text-sm leading-relaxed">
                    {isEnglish
                      ? 'We rely on advanced design and engineering solutions at every stage of the project.'
                      : 'Используем передовые проектные и технические решения на всех стадиях работы'}
                  </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">
                    {isEnglish ? 'Up-to-date regulations' : 'Актуальная база'}
                  </h3>
                  <p className="text-gray-300 text-sm leading-relaxed">
                    {isEnglish
                      ? 'We work strictly within the current regulatory framework in the field of design.'
                      : 'Работаем с актуальной законодательной базой в сфере проектирования'}
                  </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">
                    {isEnglish ? 'Regional experience' : 'Опыт в регионе'}
                  </h3>
                  <p className="text-gray-300 text-sm leading-relaxed">
                    {isEnglish
                      ? 'Extensive experience in the Republic of Bashkortostan and other Russian regions.'
                      : 'Значительный опыт проектирования в Республике Башкортостан и других регионах РФ'}
                  </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">
                    {isEnglish ? 'Individual approach' : 'Индивидуальный подход'}
                  </h3>
                  <p className="text-gray-300 text-sm leading-relaxed">
                    {isEnglish
                      ? 'We find optimal solutions that balance regulations and the client’s goals.'
                      : 'Находим оптимальные решения с учетом нормативов и пожеланий заказчика'}
                  </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">
                {isEnglish ? 'Ready to discuss your project?' : 'Готовы обсудить ваш проект?'}
              </p>
              <a 
                href={`#${prefix}/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"
              >
                {isEnglish ? 'Request a consultation' : 'Получить консультацию'}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DesignPage;