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

const LandSurveyPage: React.FC = () => {
  const services = [
    {
      icon: Landmark,
      title: 'Рекультивация нарушенных земель',
      description: 'Восстановление земель после промышленной деятельности и приведение их в состояние, пригодное для дальнейшего использования'
    },
    {
      icon: FileText,
      title: 'Подготовка материалов к актам выбора земельного участка лесного фонда',
      description: 'Комплексная подготовка документации и согласование с надзорными инстанциями для выбора участков лесного фонда'
    },
    {
      icon: Map,
      title: 'Градостроительный план земельного участка',
      description: 'Разработка градостроительного плана с указанием всех необходимых параметров и ограничений использования территории'
    },
    {
      icon: ClipboardList,
      title: 'Проект планировки и проект межевания территории',
      description: 'Разработка проектов планировки и межевания для комплексного освоения территорий и организации рационального землепользования'
    },
    {
      icon: Navigation,
      title: 'Получение технических условий',
      description: 'Получение технических условий на подключение к инженерным сетям и дальнейшее согласование в соответствующих организациях'
    }
  ];

  const cadastralWorks = [
    {
      title: 'Согласование границ земельных участков',
      description: 'Проведение работ по установлению и согласованию границ земельных участков с заинтересованными лицами и смежными землепользователями'
    },
    {
      title: 'Определение координат и границ межевых знаков',
      description: 'Геодезические измерения и закрепление межевых знаков на местности с использованием современного оборудования'
    },
    {
      title: 'Определение площади земельного участка',
      description: 'Точный расчет площади земельного участка по полученным координатам межевых знаков с применением современных методик'
    },
    {
      title: 'Формирование пакета документов',
      description: 'Подготовка полного пакета документов и последующая сдача землеустроительного дела (межевой план) в соответствующие государственные органы'
    }
  ];

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title="Землеустроительные и кадастровые работы" 
        description="Комплекс услуг по межеванию, кадастровому учету и землеустройству"
        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">
            Основные виды работ
          </h2>
          <p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
            Профессиональное выполнение землеустроительных и кадастровых работ любой сложности
          </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">КАДАСТРОВЫЕ РАБОТЫ</span>
            </div>
            <p className="text-gray-600 max-w-3xl mx-auto">
              Комплексное выполнение работ по межеванию земельных участков и подготовке документации для государственного кадастрового учета
            </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">
            Этапы выполнения работ
          </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">Получение заявки и выезд на объект</h3>
                  <p className="text-gray-600 text-sm">Первичное обследование территории и определение объема работ</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">Геодезические измерения</h3>
                  <p className="text-gray-600 text-sm">Проведение измерений и закрепление границ межевыми знаками</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">Согласование границ</h3>
                  <p className="text-gray-600 text-sm">Согласование установленных границ со смежными землепользователями</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">Подготовка документации</h3>
                  <p className="text-gray-600 text-sm">Формирование межевого плана и полного пакета документов</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">Сдача в государственные органы</h3>
                  <p className="text-gray-600 text-sm">Передача документов в Росреестр для постановки на кадастровый учет</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">
              Наши преимущества
            </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">Полное сопровождение</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">
                  <Navigation 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">
                  <FileText 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 LandSurveyPage;