import React from 'react';
import PageHeader from '../components/PageHeader';
import { CheckCircle2, Map, FileText, MapPin, Landmark, ClipboardList, Navigation } from 'lucide-react';
import { useLocation } from 'react-router-dom';

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

  const services = [
    {
      icon: Landmark,
      title: isEnglish ? 'Reclamation of disturbed lands' : 'Рекультивация нарушенных земель',
      description: isEnglish
        ? 'Restoration of land affected by industrial activities and bringing it into a condition suitable for further use.'
        : 'Восстановление земель после промышленной деятельности и приведение их в состояние, пригодное для дальнейшего использования'
    },
    {
      icon: FileText,
      title: isEnglish
        ? 'Preparation of documentation for selecting forest land plots'
        : 'Подготовка материалов к актам выбора земельного участка лесного фонда',
      description: isEnglish
        ? 'Comprehensive preparation of documentation and coordination with supervisory authorities for selecting forest fund land plots.'
        : 'Комплексная подготовка документации и согласование с надзорными инстанциями для выбора участков лесного фонда'
    },
    {
      icon: Map,
      title: isEnglish
        ? 'Urban development plan of a land plot'
        : 'Градостроительный план земельного участка',
      description: isEnglish
        ? 'Development of an urban development plan indicating all required parameters and land‑use restrictions for the territory.'
        : 'Разработка градостроительного плана с указанием всех необходимых параметров и ограничений использования территории'
    },
    {
      icon: ClipboardList,
      title: isEnglish
        ? 'Planning and subdivision (demarcation) projects'
        : 'Проект планировки и проект межевания территории',
      description: isEnglish
        ? 'Development of planning and subdivision projects for integrated development of territories and rational land use.'
        : 'Разработка проектов планировки и межевания для комплексного освоения территорий и организации рационального землепользования'
    },
    {
      icon: Navigation,
      title: isEnglish ? 'Obtaining technical specifications' : 'Получение технических условий',
      description: isEnglish
        ? 'Obtaining technical conditions for connection to engineering networks and further coordination with the relevant utility providers.'
        : 'Получение технических условий на подключение к инженерным сетям и дальнейшее согласование в соответствующих организациях'
    }
  ];

  const cadastralWorks = [
    {
      title: isEnglish
        ? 'Boundary agreement for land plots'
        : 'Согласование границ земельных участков',
      description: isEnglish
        ? 'Carrying out works to establish and agree land plot boundaries with interested parties and adjoining land users.'
        : 'Проведение работ по установлению и согласованию границ земельных участков с заинтересованными лицами и смежными землепользователями'
    },
    {
      title: isEnglish
        ? 'Determining coordinates and boundaries of boundary markers'
        : 'Определение координат и границ межевых знаков',
      description: isEnglish
        ? 'Geodetic measurements and setting boundary markers in the field using modern surveying equipment.'
        : 'Геодезические измерения и закрепление межевых знаков на местности с использованием современного оборудования'
    },
    {
      title: isEnglish
        ? 'Determining the land plot area'
        : 'Определение площади земельного участка',
      description: isEnglish
        ? 'Accurate calculation of the land plot area based on boundary marker coordinates using modern methods.'
        : 'Точный расчет площади земельного участка по полученным координатам межевых знаков с применением современных методик'
    },
    {
      title: isEnglish
        ? 'Document package preparation'
        : 'Формирование пакета документов',
      description: isEnglish
        ? 'Preparation of the full set of documents and subsequent submission of the land management file (cadastral plan) to the relevant state authorities.'
        : 'Подготовка полного пакета документов и последующая сдача землеустроительного дела (межевой план) в соответствующие государственные органы'
    }
  ];

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title={isEnglish ? 'Land management and cadastral works' : 'Землеустроительные и кадастровые работы'} 
        description={
          isEnglish
            ? 'A comprehensive range of services in land surveying, cadastral registration and land management.'
            : 'Комплекс услуг по межеванию, кадастровому учету и землеустройству'
        }
        image="/media/images/headers/header-zemlestroit-kadastr-jobs.png"
      />

      <div className="container mx-auto px-6 py-20">
        {/* Основные услуги */}
        <div className="max-w-6xl mx-auto mb-20">
          <h2 className="text-3xl font-bold text-gray-900 mb-4 text-center">
            {isEnglish ? 'Main types of works' : 'Основные виды работ'}
          </h2>
          <p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
            {isEnglish
              ? 'Professional execution of land management and cadastral works of any complexity.'
              : 'Профессиональное выполнение землеустроительных и кадастровых работ любой сложности'}
          </p>

          <div className="space-y-6">
            {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-6">
                  <div className="flex-shrink-0 w-16 h-16 bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-xl flex items-center justify-center">
                    <service.icon size={32} />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-bold text-gray-900 mb-3">
                      {service.title}
                    </h3>
                    <p className="text-gray-600 leading-relaxed">
                      {service.description}
                    </p>
                  </div>
                </div>
              </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-4">
              <MapPin size={32} />
              <span className="text-xl font-bold">
                {isEnglish ? 'CADASTRAL WORKS' : 'КАДАСТРОВЫЕ РАБОТЫ'}
              </span>
            </div>
            <p className="text-gray-600 max-w-3xl mx-auto">
              {isEnglish
                ? 'Comprehensive execution of boundary survey works and preparation of documentation for state cadastral registration.'
                : 'Комплексное выполнение работ по межеванию земельных участков и подготовке документации для государственного кадастрового учета'}
            </p>
          </div>

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

        {/* Этапы работы */}
        <div className="max-w-6xl mx-auto mb-20">
          <h2 className="text-3xl font-bold text-gray-900 mb-12 text-center">
            {isEnglish ? 'Work stages' : 'Этапы выполнения работ'}
          </h2>

          <div className="relative">
            <div className="absolute left-8 top-0 bottom-0 w-1 bg-brand-orange hidden md:block"></div>
            
            <div className="space-y-8">
              <div className="flex gap-6 relative">
                <div className="flex-shrink-0 w-16 h-16 bg-brand-orange text-white rounded-full flex items-center justify-center font-bold text-2xl z-10">
                  1
                </div>
                <div className="flex-1 bg-white rounded-xl p-6 shadow-md">
                  <h3 className="text-lg font-bold text-gray-900 mb-2">
                    {isEnglish ? 'Receiving the request and site visit' : 'Получение заявки и выезд на объект'}
                  </h3>
                  <p className="text-gray-600 text-sm">
                    {isEnglish
                      ? 'Initial site survey and defining the scope of work.'
                      : 'Первичное обследование территории и определение объема работ'}
                  </p>
                </div>
              </div>

              <div className="flex gap-6 relative">
                <div className="flex-shrink-0 w-16 h-16 bg-brand-orange text-white rounded-full flex items-center justify-center font-bold text-2xl z-10">
                  2
                </div>
                <div className="flex-1 bg-white rounded-xl p-6 shadow-md">
                  <h3 className="text-lg font-bold text-gray-900 mb-2">
                    {isEnglish ? 'Geodetic measurements' : 'Геодезические измерения'}
                  </h3>
                  <p className="text-gray-600 text-sm">
                    {isEnglish
                      ? 'Carrying out field measurements and setting boundaries with boundary markers.'
                      : 'Проведение измерений и закрепление границ межевыми знаками'}
                  </p>
                </div>
              </div>

              <div className="flex gap-6 relative">
                <div className="flex-shrink-0 w-16 h-16 bg-brand-orange text-white rounded-full flex items-center justify-center font-bold text-2xl z-10">
                  3
                </div>
                <div className="flex-1 bg-white rounded-xl p-6 shadow-md">
                  <h3 className="text-lg font-bold text-gray-900 mb-2">
                    {isEnglish ? 'Boundary agreement' : 'Согласование границ'}
                  </h3>
                  <p className="text-gray-600 text-sm">
                    {isEnglish
                      ? 'Agreeing established boundaries with adjoining land users.'
                      : 'Согласование установленных границ со смежными землепользователями'}
                  </p>
                </div>
              </div>

              <div className="flex gap-6 relative">
                <div className="flex-shrink-0 w-16 h-16 bg-brand-orange text-white rounded-full flex items-center justify-center font-bold text-2xl z-10">
                  4
                </div>
                <div className="flex-1 bg-white rounded-xl p-6 shadow-md">
                  <h3 className="text-lg font-bold text-gray-900 mb-2">
                    {isEnglish ? 'Documentation preparation' : 'Подготовка документации'}
                  </h3>
                  <p className="text-gray-600 text-sm">
                    {isEnglish
                      ? 'Preparation of the cadastral (boundary) plan and the complete document package.'
                      : 'Формирование межевого плана и полного пакета документов'}
                  </p>
                </div>
              </div>

              <div className="flex gap-6 relative">
                <div className="flex-shrink-0 w-16 h-16 bg-brand-orange text-white rounded-full flex items-center justify-center font-bold text-2xl z-10">
                  5
                </div>
                <div className="flex-1 bg-white rounded-xl p-6 shadow-md">
                  <h3 className="text-lg font-bold text-gray-900 mb-2">
                    {isEnglish ? 'Submission to state authorities' : 'Сдача в государственные органы'}
                  </h3>
                  <p className="text-gray-600 text-sm">
                    {isEnglish
                      ? 'Submitting documents to Rosreestr for state cadastral registration.'
                      : 'Передача документов в Росреестр для постановки на кадастровый учет'}
                  </p>
                </div>
              </div>
            </div>
          </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">
              {isEnglish ? 'Our advantages' : 'Наши преимущества'}
            </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">
                  <CheckCircle2 size={32} />
                </div>
                <h3 className="font-bold text-lg mb-3">
                  {isEnglish ? 'End‑to‑end support' : 'Полное сопровождение'}
                </h3>
                <p className="text-gray-300 text-sm leading-relaxed">
                  {isEnglish
                    ? 'From field measurements to obtaining the registration certificate.'
                    : 'От измерений на местности до получения свидетельства о регистрации'}
                </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">
                  <Navigation size={32} />
                </div>
                <h3 className="font-bold text-lg mb-3">
                  {isEnglish ? 'Measurement accuracy' : 'Точность измерений'}
                </h3>
                <p className="text-gray-300 text-sm leading-relaxed">
                  {isEnglish
                    ? 'Use of modern high‑precision geodetic equipment.'
                    : 'Использование современного геодезического оборудования высокой точности'}
                </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">
                  <FileText size={32} />
                </div>
                <h3 className="font-bold text-lg mb-3">
                  {isEnglish ? 'Legal compliance' : 'Юридическая чистота'}
                </h3>
                <p className="text-gray-300 text-sm leading-relaxed">
                  {isEnglish
                    ? 'Proper preparation of all documents in strict accordance with current legislation.'
                    : 'Грамотное оформление всех документов в соответствии с законодательством'}
                </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">
                {isEnglish
                  ? 'Do you need land management or cadastral services?'
                  : 'Нужны землеустроительные или кадастровые работы?'}
              </p>
              <a 
                href={`#${isEnglish ? '/en/contacts' : '/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 ? 'Order a service' : 'Заказать услугу'}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LandSurveyPage;