import React from 'react';
import PageHeader from '../components/PageHeader';
import { CheckCircle2, Building, Factory, ShoppingCart, Network, Wrench, Target, Award, Users, TrendingUp } from 'lucide-react';
import { useLocation } from 'react-router-dom';

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

  const capabilities = [
    { icon: Building, title: 'Строительство административных, жилых и офисных зданий' },
    { icon: Factory, title: 'Строительство промышленных комплексов' },
    { icon: ShoppingCart, title: 'Строительство торговых и складских комплексов' },
    { icon: Network, title: 'Строительство систем коммуникаций' },
    { icon: Wrench, title: 'Капитальный ремонт и реконструкция строительных объектов' }
  ];

  const factors = [
    {
      icon: Target,
      title: 'Современные материалы',
      description: 'Применение современных отделочных и строительных материалов для обеспечения высоких эксплуатационных характеристик объекта'
    },
    {
      icon: Award,
      title: 'Нормы безопасности',
      description: 'Тщательное следование нормам безопасности, установленным для определенного типа сооружения, обязательный учет требований градостроительных организаций'
    },
    {
      icon: TrendingUp,
      title: 'Инженерные системы',
      description: 'Создание современных и эффективных инженерных систем для надежного и удобного управления зданием'
    }
  ];

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

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

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title={isEnglish ? 'Construction' : 'Строительство'} 
        description={
          isEnglish
            ? 'Full range of construction and installation works of any complexity.'
            : 'Полный комплекс строительных и монтажных работ любой сложности'
        }
        image="/media/images/headers/header-building.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">
            <p className="text-xl leading-relaxed mb-4 font-semibold">
              {isEnglish
                ? 'Construction of buildings and facilities is one of the core business areas of GeoVector LLC.'
                : 'Строительство зданий и сооружений – одно из приоритетных направлений работы ООО «ГеоВектор».'
              }
            </p>
            <p className="text-lg leading-relaxed">
              {isEnglish
                ? 'Our services cover the full cycle of construction and installation works.'
                : 'Наши услуги включают выполнение полного комплекса строительных и монтажных работ.'}
            </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 ? 'Our capabilities' : 'Возможности нашей компании'}
          </h2>
          <p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
            {isEnglish
              ? 'We offer both standard construction solutions and fully tailored designs.'
              : 'Мы предлагаем не только типовые строительные решения, но также индивидуальные разработки'}
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {capabilities.map((capability, index) => (
              <div 
                key={index}
                className="bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-brand-orange hover:shadow-lg transition-all duration-300 group"
              >
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                    <capability.icon size={24} />
                  </div>
                  <p className="text-gray-700 leading-relaxed font-medium pt-2">
                    {capability.title}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Преимущества комплексного подхода */}
        <div className="max-w-6xl mx-auto mb-20">
          <div className="bg-gray-50 rounded-2xl p-8 md:p-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-6 text-center">
              {isEnglish
                ? 'Benefits of an integrated construction approach'
                : 'Преимущества комплексного подхода к строительству'}
            </h2>
            
            <div className="space-y-6">
              <p className="text-lg text-gray-700 leading-relaxed">
                {isEnglish
                  ? 'Use of modern technologies at all stages of construction and high professionalism of our architects, structural engineers and designers guarantee timely and high-quality delivery of any project.'
                  : 'Применение современных технических средств на всех этапах строительства, высокий профессионализм архитекторов, инженеров-строителей и дизайнеров выступают гарантией своевременного и качественного выполнения любого заказа.'}
              </p>
              
              <div className="bg-white rounded-xl p-6 border-l-4 border-brand-orange">
                <p className="text-gray-700 leading-relaxed">
                  {isEnglish
                    ? 'Over the years we have implemented numerous projects, including construction and reconstruction works in the Republic of Bashkortostan and other regions of Russia.'
                    : 'За время деятельности компания реализовала значительное число проектов, включая возведение и реконструкцию объектов, находящихся в Республике Башкортостан и других регионах страны.'}
                </p>
              </div>
            </div>
          </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
              ? 'Key factors we consider during construction'
              : 'Важнейшие факторы при выполнении строительства'}
          </h2>
          <p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
            {isEnglish
              ? 'During construction we consider all major factors that affect the efficiency and usability of the future facility.'
              : 'В процессе выполнения строительства мы учитываем все важнейшие факторы, влияющие на эффективность будущего использования здания'}
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {factors.map((factor, index) => (
              <div 
                key={index}
                className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border-t-4 border-brand-orange"
              >
                <div className="flex justify-center mb-6">
                  <div className="w-16 h-16 bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-2xl flex items-center justify-center">
                    <factor.icon size={32} />
                  </div>
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-4 text-center">
                  {factor.title}
                </h3>
                <p className="text-gray-600 leading-relaxed text-sm text-center">
                  {factor.description}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* Комплексный подход */}
        <div className="max-w-6xl 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">
                <Users size={48} className="text-brand-orange" />
              </div>
              <div>
                <h3 className="text-2xl font-bold mb-4">
                  {isEnglish
                    ? 'Design and construction as a single process'
                    : 'Проектирование и строительство – единый процесс'}
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  {isEnglish
                    ? 'Design and construction are tightly connected processes, each requiring careful control. We can support you at every stage – from initial design to finishing works and commissioning of the facility.'
                    : 'Проектирование и строительство объектов – взаимосвязанные процессы, каждый из которых требует тщательного контроля. Наша компания может предложить заказчикам не только непосредственное проведение строительных работ, но и профессиональные услуги на всех стадиях выполнения заказа – от проектирования до отделочных работ и ввода готового объекта в эксплуатацию.'}
                </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">
            {isEnglish
              ? 'Execution of sections for complex 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-gray-50 rounded-2xl p-8 md:p-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
              {isEnglish ? 'Why clients choose us' : 'Почему выбирают нас'}
            </h2>
            
            <div className="grid md:grid-cols-2 gap-6 mb-8">
              <div className="flex gap-4 bg-white rounded-xl p-6 shadow-sm">
                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-xl">
                  1
                </div>
                <div>
                  <h3 className="font-bold text-lg mb-2 text-gray-900">
                    {isEnglish ? 'Integrated approach' : 'Комплексный подход'}
                  </h3>
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {isEnglish
                      ? 'From design to commissioning of the facility.'
                      : 'От проектирования до ввода объекта в эксплуатацию'}
                  </p>
                </div>
              </div>

              <div className="flex gap-4 bg-white rounded-xl p-6 shadow-sm">
                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-xl">
                  2
                </div>
                <div>
                  <h3 className="font-bold text-lg mb-2 text-gray-900">
                    {isEnglish ? 'Modern technologies' : 'Современные технологии'}
                  </h3>
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {isEnglish
                      ? 'Use of advanced technologies at all stages.'
                      : 'Применение передовых технических средств на всех этапах'}
                  </p>
                </div>
              </div>

              <div className="flex gap-4 bg-white rounded-xl p-6 shadow-sm">
                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-xl">
                  3
                </div>
                <div>
                  <h3 className="font-bold text-lg mb-2 text-gray-900">
                    {isEnglish ? 'Professional team' : 'Профессиональная команда'}
                  </h3>
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {isEnglish
                      ? 'High professionalism of architects, engineers and designers.'
                      : 'Высокий профессионализм архитекторов, инженеров и дизайнеров'}
                  </p>
                </div>
              </div>

              <div className="flex gap-4 bg-white rounded-xl p-6 shadow-sm">
                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-xl">
                  4
                </div>
                <div>
                  <h3 className="font-bold text-lg mb-2 text-gray-900">
                    {isEnglish ? 'Individual approach' : 'Индивидуальный подход'}
                  </h3>
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {isEnglish
                      ? 'Standard and fully customised construction solutions.'
                      : 'Типовые и индивидуальные строительные решения'}
                  </p>
                </div>
              </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">
                {isEnglish
                  ? 'Ready to start construction of your facility?'
                  : 'Готовы начать строительство вашего объекта?'}
              </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 ? 'Discuss the project' : 'Обсудить проект'}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConstructionPage;