import React from 'react';
import PageHeader from '../components/PageHeader';
import { FileText, Download, ExternalLink } from 'lucide-react';

const TechnicalTasksPage: React.FC = () => {
  const technicalTasks = [
    {
      id: 1,
      title: 'ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА ПРОИЗВОДСТВО ИНЖЕНЕРНЫХ ИЗЫСКАНИЙ',
      pdfUrl: '/media/tz/tekhnicheskoe_zadanie_na_proizvodstvo_inzhenernyh_izyskaniy.pdf',
      wordUrl: '/media/tz/tekhnicheskoe_zadanie_na_proizvodstvo_inzhenernyh_izyskaniy.doc'
    },
    {
      id: 2,
      title: 'ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА ПРОИЗВОДСТВО ОБСЛЕДОВАНИЯ ЗДАНИЙ И СООРУЖЕНИЙ',
      pdfUrl: '/media/tz/tekhnicheskoe_zadanie_na_proizvodstvo_obsledovaniya_zdanij_i_sooruzheniy.pdf',
      wordUrl: '/media/tz/tekhnicheskoe_zadanie_na_proizvodstvo_obsledovaniya_zdanij_i_sooruzheniy.doc'
    },
    {
      id: 3,
      title: 'ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА ПРОИЗВОДСТВО ИНЖЕНЕРНО-ЭКОЛОГИЧЕСКИХ ИЗЫСКАНИЙ',
      pdfUrl: '/media/tz/tehnicheskoe_zadanie_na_proizvodstvo_inzhenerno_ekologicheskih_iziskaniy.pdf',
      wordUrl: '/media/tz/tehnicheskoe_zadanie_na_proizvodstvo_inzhenerno_ekologicheskih_iziskaniy.doc'
    },
    {
      id: 4,
      title: 'ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА ПРОИЗВОДСТВО ИНЖЕНЕРНО-ГИДРОЛОГИЧЕСКИХ ИЗЫСКАНИЙ',
      pdfUrl: '/media/tz/tehnicheskoe_zadanie_na_proizvodstvo_inzhenerno_gidrologicheskih_iziskaniy.pdf',
      wordUrl: '/media/tz/tehnicheskoe_zadanie_na_proizvodstvo_inzhenerno_gidrologicheskih_iziskaniy.doc'
    },
    {
      id: 5,
      title: 'ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА ПРОИЗВОДСТВО ИНЖЕНЕРНО-ГЕОЛОГИЧЕСКИХ ИЗЫСКАНИЙ',
      pdfUrl: '/media/tz/tehnicheskoe_zadanie_na_proizvodstvo_inzhenerno_geologicheskih_iziskaniy.pdf',
      wordUrl: '/media/tz/tehnicheskoe_zadanie_na_proizvodstvo_inzhenerno_geologicheskih_iziskaniy.doc'
    },
    {
      id: 6,
      title: 'ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА ПРОИЗВОДСТВО ИНЖЕНЕРНО-ГЕОДЕЗИЧЕСКИХ ИЗЫСКАНИЙ',
      pdfUrl: '/media/tz/tehnicheskoe_zadanie_na_proizvodstvo_inzhenerno_geodezicheskih_iziskaniy.pdf',
      wordUrl: '/media/tz/tehnicheskoe_zadanie_na_proizvodstvo_inzhenerno_geodezicheskih_iziskaniy.doc'
    },
    {
      id: 7,
      title: 'ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА ВЫПОЛНЕНИЕ ПРОЕКТНЫХ РАБОТ',
      pdfUrl: '/media/tz/tehnicheskoe_zadanie_na_vipolnenie_proektnih_rabot.pdf',
      wordUrl: '/media/tz/tehnicheskoe_zadanie_na_vipolnenie_proektnih_rabot.doc'
    }
  ];

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title="Технические задания" 
        description="Примеры технических заданий для различных видов работ"
        image="/media/images/services/technical-assignments.png"
      />

      <div className="container mx-auto px-6 py-20">
        <div className="max-w-6xl mx-auto">
          <div className="mb-12 bg-gray-50 rounded-2xl p-8">
            <p className="text-gray-700 leading-relaxed text-center">
              На этой странице вы можете ознакомиться с примерами технических заданий для различных видов работ. 
              Документы доступны для просмотра и скачивания в форматах PDF и Word.
            </p>
          </div>

          <div className="space-y-8">
            {technicalTasks.map((task) => (
              <div 
                key={task.id}
                className="border-2 border-gray-200 rounded-2xl overflow-hidden hover:border-brand-orange transition-all duration-300"
              >
                {/* Заголовок */}
                <div className="bg-brand-orange text-white px-8 py-6">
                  <h2 className="text-xl font-bold uppercase">
                    {task.title}
                  </h2>
                </div>

                {/* Кнопки действий */}
                <div className="bg-white p-6">
                  <div className="flex flex-col sm:flex-row gap-4">
                    {/* Кнопка PDF */}
                    <a
                      href={task.pdfUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center justify-center gap-3 px-6 py-4 bg-white border-2 border-gray-300 rounded-lg hover:border-brand-orange hover:bg-gray-50 transition-all group flex-1"
                    >
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-red-100 rounded flex items-center justify-center group-hover:bg-red-200 transition-colors">
                          <FileText className="text-red-600" size={20} />
                        </div>
                        <div className="text-left">
                          <div className="text-sm font-semibold text-gray-900">Открыть документ</div>
                          <div className="text-xs text-gray-500">(pdf)</div>
                        </div>
                      </div>
                      <ExternalLink className="text-brand-orange ml-auto" size={20} />
                    </a>

                    {/* Кнопка Word */}
                    <a
                      href={task.wordUrl}
                      download
                      className="flex items-center justify-center gap-3 px-6 py-4 bg-white border-2 border-gray-300 rounded-lg hover:border-brand-orange hover:bg-gray-50 transition-all group flex-1"
                    >
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-blue-100 rounded flex items-center justify-center group-hover:bg-blue-200 transition-colors">
                          <Download className="text-blue-600" size={20} />
                        </div>
                        <div className="text-left">
                          <div className="text-sm font-semibold text-gray-900">Скачать файл</div>
                          <div className="text-xs text-gray-500">(word)</div>
                        </div>
                      </div>
                      <Download className="text-brand-orange ml-auto" size={20} />
                    </a>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Информационный блок */}
          <div className="mt-12 bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-2xl p-8 md:p-12">
            <h3 className="text-2xl font-bold mb-4">Нужна помощь с техническим заданием?</h3>
            <p className="leading-relaxed mb-6">
              Наши специалисты помогут вам составить техническое задание с учетом специфики вашего проекта 
              и всех необходимых нормативных требований.
            </p>
            <a 
              href="#/contacts" 
              className="inline-block px-8 py-4 bg-white text-brand-orange font-bold rounded-lg hover:bg-gray-100 transition-colors"
            >
              Получить консультацию
            </a>
          </div>

          {/* Дополнительная информация */}
          <div className="mt-8 bg-gray-50 rounded-xl p-6">
            <div className="flex items-start gap-4">
              <FileText className="text-brand-orange flex-shrink-0 mt-1" size={24} />
              <div>
                <h4 className="font-bold text-gray-900 mb-2">Важно знать</h4>
                <p className="text-sm text-gray-600 leading-relaxed">
                  Представленные технические задания являются примерными образцами. Для вашего проекта 
                  техническое задание должно быть адаптировано под конкретные условия и требования объекта.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TechnicalTasksPage;