import React, { useRef, useEffect, useState } from 'react';
import PageHeader from '../components/PageHeader';
import { CheckCircle2, Award, Users, Building2, Briefcase, Phone, Mail, Globe, FileText, ExternalLink, Star } from 'lucide-react';

const AboutPage: React.FC = () => {
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [startX, setStartX] = useState(0);
  const [scrollLeft, setScrollLeft] = useState(0);
  const [isHoveringCarousel, setIsHoveringCarousel] = useState(false);

  const clients = [
    { name: 'ООО «ТЕКСТРОЙПРОЕКТ»', color: 'from-blue-500 to-blue-600' },
    { name: 'ООО НПРП «Легаз»', color: 'from-green-500 to-green-600' },
    { name: 'ООО «Газпром трансгаз Уфа»', color: 'from-blue-600 to-blue-700' },
    { name: 'ОАО «ВИФКнефть»', color: 'from-indigo-500 to-indigo-600' },
    { name: 'ООО «Славнефть»', color: 'from-red-500 to-red-600' },
    { name: 'ПАО АНК «Башнефть»', color: 'from-emerald-500 to-emerald-600' },
    { name: 'ООО «ЛУКОЙЛ Уралнефтепродукт»', color: 'from-red-600 to-red-700' },
    { name: 'ООО «СИБУР ХОЛДИНГ»', color: 'from-purple-500 to-purple-600' },
    { name: 'ООО «Башкирская генерирующая компания»', color: 'from-amber-500 to-amber-600' },
    { name: 'ООО «ОБ-СЕТЭМ»', color: 'from-pink-500 to-pink-600' },
    { name: 'ООО «ОКЕМ Менеджмент»', color: 'from-teal-500 to-teal-600' },
    { name: 'ООО «УралСпецБурГаз»', color: 'from-orange-500 to-orange-600' },
    { name: 'ООО «Нефть Прикамья»', color: 'from-cyan-500 to-cyan-600' },
    { name: 'ООО «Кемаколор Проект Групп»', color: 'from-lime-500 to-lime-600' },
    { name: 'ООО «ВЕСТЕРОС»', color: 'from-rose-500 to-rose-600' },
    { name: 'АО «ВД «ГОРОД»', color: 'from-sky-500 to-sky-600' },
    { name: 'АО «Клининвестпром»', color: 'from-green-600 to-green-700' },
    { name: 'АО «Башавтодор»', color: 'from-violet-500 to-violet-600' },
    { name: 'ГУП РБ «УЖХ»', color: 'from-fuchsia-500 to-fuchsia-600' },
    { name: 'ООО «ПОСТРОЙМАГРУПП»', color: 'from-yellow-500 to-yellow-600' },
    { name: 'ООО «Парола Принедель»', color: 'from-teal-600 to-teal-700' },
    { name: 'ПАО «Газпром теплоэнергетика Уфа»', color: 'from-blue-700 to-blue-800' },
    { name: 'Администратор торговой системы оптового рынка электроэнергии', color: 'from-red-700 to-red-800' },
    { name: 'ООО «Башкирская нефть»', color: 'from-cyan-600 to-cyan-700' },
    { name: 'ООО ГК «Сибирия Менеджмент»', color: 'from-pink-600 to-pink-700' },
    { name: 'АО «ВЭСКО»', color: 'from-orange-600 to-orange-700' },
    { name: 'Муниципальное центр «ТЕХРЕСУРС»', color: 'from-slate-500 to-slate-600' },
    { name: 'АО «СОВЕТСТРОЙМАЖ»', color: 'from-lime-600 to-lime-700' },
    { name: 'ПАО «Саратовэнерго»', color: 'from-rose-600 to-rose-700' },
    { name: 'ООО БашНИИстрой', color: 'from-sky-600 to-sky-700' },
    { name: 'Проектное бюро АРТЭП', color: 'from-emerald-600 to-emerald-700' },
    { name: 'ООО «СовМ-МедиаСтрой»', color: 'from-violet-600 to-violet-700' },
    { name: 'ООО «УралспецБурГаз»', color: 'from-purple-600 to-purple-700' },
    { name: 'Компания «АльфаИнжиниринг»', color: 'from-amber-600 to-amber-700' },
    { name: 'Управляющая компания «DAMATE»', color: 'from-teal-700 to-teal-800' },
    { name: 'ЗАО «Strabag»', color: 'from-blue-800 to-blue-900' },
    { name: 'ПАО «Газпром Газэнергосети Салават»', color: 'from-red-800 to-red-900' },
    { name: 'ООО «АНТЭ+Стройсервис»', color: 'from-cyan-700 to-cyan-800' },
    { name: 'ООО ПКБ «Уралспектопромстандарт «Прокс»', color: 'from-pink-700 to-pink-800' }
  ];

  // Дублируем клиентов для бесшовной прокрутки
  const duplicatedClients = [...clients, ...clients];

  useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    let animationFrame: number;
    let scrollSpeed = 0.5;

    const animate = () => {
      if (!isDragging && container) {
        container.scrollLeft += scrollSpeed;
        
        // Бесшовная прокрутка: возврат к началу
        if (container.scrollLeft >= container.scrollWidth / 2) {
          container.scrollLeft = 0;
        }
      }
      animationFrame = requestAnimationFrame(animate);
    };

    animate();

    return () => cancelAnimationFrame(animationFrame);
  }, [isDragging]);

  // Обработчики для перетаскивания мышью
  const handleMouseDown = (e: React.MouseEvent) => {
    setIsDragging(true);
    setStartX(e.pageX - (scrollContainerRef.current?.offsetLeft || 0));
    setScrollLeft(scrollContainerRef.current?.scrollLeft || 0);
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging) return;
    e.preventDefault();
    const x = e.pageX - (scrollContainerRef.current?.offsetLeft || 0);
    const walk = (x - startX) * 2;
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollLeft = scrollLeft - walk;
    }
  };

  const handleScrollContainerMouseLeave = () => {
    setIsDragging(false);
  };

  // Обработчик для прокрутки колесом
  const handleWheel = (e: React.WheelEvent) => {
    // Не используем preventDefault для пассивных слушателей
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollLeft += e.deltaY;
    }
  };

  // Блокировка прокрутки страницы при наведении на карусель
  const handleCarouselMouseEnter = () => {
    setIsHoveringCarousel(true);
    document.body.style.overflow = 'hidden';
  };

  const handleCarouselMouseLeave = () => {
    setIsHoveringCarousel(false);
    document.body.style.overflow = 'auto';
  };

  // Очистка при размонтировании компонента
  useEffect(() => {
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, []);

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title="О компании" 
        description="ООО «ГеоВектор» — лидер в области инженерных изысканий и проектирования в Республике Башкортостан."
        image="/media/images/headers/header-about.png"
      />

      <div className="container mx-auto px-6 py-20">
        <div className="flex flex-col lg:flex-row gap-16 items-center">
              <div className="lg:w-1/2">
                  <img 
                    src="/media/images/about/office.png" 
                    alt="Наш офис" 
                    className="rounded-3xl shadow-2xl w-full"
                />
            </div>
            <div className="lg:w-1/2">
                <h2 className="text-3xl font-bold mb-6">История и Миссия</h2>
                <p className="text-gray-600 mb-6 leading-relaxed">
                    Компания «ГеоВектор» была основана в 2010 году группой инженеров-энтузиастов. За годы работы мы выросли из небольшого бюро в крупную строительно-проектную организацию. Наша миссия — создавать надежную основу для инфраструктуры будущего, используя передовые технологии и многолетний опыт.
                </p>
                <p className="text-gray-600 mb-8 leading-relaxed">
                    Мы гордимся тем, что наши проекты служат людям. Будь то жилые комплексы, промышленные объекты или энергетическая инфраструктура — мы всегда гарантируем качество и соблюдение сроков.
                </p>

                <div className="space-y-4">
                    <div className="flex items-center gap-4">
                        <div className="w-12 h-12 rounded-full bg-brand-light flex items-center justify-center text-brand-orange">
                            <CheckCircle2 />
                        </div>
                        <div>
                            <h4 className="font-bold">Лицензии и СРО</h4>
                            <p className="text-sm text-gray-500">Полный пакет разрешительной документации</p>
                        </div>
                    </div>
                    <div className="flex items-center gap-4">
                        <div className="w-12 h-12 rounded-full bg-brand-light flex items-center justify-center text-brand-orange">
                            <Award />
                        </div>
                        <div>
                            <h4 className="font-bold">Гарантия качества</h4>
                            <p className="text-sm text-gray-500">Многоуровневый контроль на всех этапах</p>
                        </div>
                    </div>
                    <div className="flex items-center gap-4">
                        <div className="w-12 h-12 rounded-full bg-brand-light flex items-center justify-center text-brand-orange">
                            <Users />
                        </div>
                        <div>
                            <h4 className="font-bold">Штат экспертов</h4>
                            <p className="text-sm text-gray-500">Более 50 квалифицированных инженеров</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>

      {/* Секция вакансий */}
      <div className="bg-gray-50 py-20">
        <div className="container mx-auto px-6">
          <div className="max-w-6xl mx-auto">
            {/* Заголовок */}
            <div className="text-center mb-12">
              <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                ГеоВектор приглашает к сотрудничеству!
              </h2>
              <p className="text-xl text-gray-700 flex items-center justify-center gap-2">
                <svg className="w-6 h-6 text-brand-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                г. Уфа, Комсомольская 19/1
              </p>
            </div>

            <div className="grid lg:grid-cols-2 gap-8 mb-12">
              {/* Левая колонка - Вакансии */}
              <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
                <div className="p-8">
                  <div className="flex items-center gap-3 mb-8">
                    <div className="w-14 h-14 bg-brand-orange/10 rounded-xl flex items-center justify-center">
                      <Briefcase className="text-brand-orange" size={28} />
                    </div>
                    <h3 className="text-2xl font-bold text-gray-900">Наши вакансии:</h3>
                  </div>

                  <div className="space-y-4">
                    <div className="group p-5 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:from-brand-orange/10 hover:to-brand-orange/20 transition-all border-l-4 border-brand-orange">
                      <div className="flex items-center gap-4">
                        <div className="w-4 h-4 bg-brand-orange rounded-full flex-shrink-0"></div>
                        <span className="text-lg font-bold text-gray-900">Инженер-геолог</span>
                      </div>
                    </div>
                    <div className="group p-5 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:from-brand-orange/10 hover:to-brand-orange/20 transition-all border-l-4 border-brand-orange">
                      <div className="flex items-center gap-4">
                        <div className="w-4 h-4 bg-brand-orange rounded-full flex-shrink-0"></div>
                        <span className="text-lg font-bold text-gray-900">Бухгалтер</span>
                      </div>
                    </div>
                  </div>
                </div>

                  <div className="relative h-64 overflow-hidden">
                    <img 
                      src="/media/images/about/team-work.png" 
                      alt="Работа в ГеоВектор"
                      className="w-full h-full object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
                </div>
              </div>

              {/* Правая колонка - Условия и требования */}
              <div className="space-y-6">
                {/* Условия */}
                <div className="bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-2xl p-8 shadow-xl">
                  <h3 className="text-2xl font-bold mb-6 flex items-center gap-2">
                    <CheckCircle2 size={28} />
                    Условия:
                  </h3>
                  <ul className="space-y-4">
                    <li className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-white rounded-full mt-2 flex-shrink-0"></div>
                      <span className="leading-relaxed">
                        Стабильная заработная плата (выплаты 2 раза в месяц)
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-white rounded-full mt-2 flex-shrink-0"></div>
                      <span className="leading-relaxed">
                        Оформление по ТК РФ, самозанятые или договор гражданско-правового характера
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-white rounded-full mt-2 flex-shrink-0"></div>
                      <span className="leading-relaxed">
                        Режим работы 5/2 с 09:00-18:00
                      </span>
                    </li>
                  </ul>
                </div>

                {/* Требования */}
                <div className="bg-white rounded-2xl p-8 shadow-xl border-2 border-gray-200">
                  <h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                    <Award className="text-brand-orange" size={28} />
                    Требования:
                  </h3>
                  <ul className="space-y-4">
                    <li className="flex items-start gap-3 text-gray-700">
                      <div className="w-2 h-2 bg-brand-orange rounded-full mt-2 flex-shrink-0"></div>
                      <span className="leading-relaxed">
                        Опыт работы не менее 1 года
                      </span>
                    </li>
                    <li className="flex items-start gap-3 text-gray-700">
                      <div className="w-2 h-2 bg-brand-orange rounded-full mt-2 flex-shrink-0"></div>
                      <span className="leading-relaxed">
                        Среднее или высшее профессиональное образование
                      </span>
                    </li>
                    <li className="flex items-start gap-3 text-gray-700">
                      <div className="w-2 h-2 bg-brand-orange rounded-full mt-2 flex-shrink-0"></div>
                      <span className="leading-relaxed">
                        Умение работать в коллективе, желание развиваться и совершенствовать свои навыки
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Контактная информация */}
            <div className="bg-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl p-8 md:p-12 shadow-2xl">
              <h3 className="text-2xl md:text-3xl font-bold mb-8 text-center">
                Все вопросы по телефону:
              </h3>
              
              <div className="grid md:grid-cols-3 gap-6 mb-8">
                <a 
                  href="tel:+79371560577" 
                  className="flex flex-col items-center gap-3 p-6 bg-white/10 rounded-xl hover:bg-white/20 transition-all hover:scale-105"
                >
                  <div className="w-14 h-14 bg-brand-orange/20 rounded-full flex items-center justify-center">
                    <Phone className="text-brand-orange" size={28} />
                  </div>
                  <div className="text-center">
                    <div className="text-sm text-gray-400 mb-1">Телефон</div>
                    <div className="font-bold text-lg">+7 (937) 156-05-77</div>
                  </div>
                </a>

                <div className="flex flex-col items-center gap-3 p-6 bg-white/10 rounded-xl">
                  <div className="w-14 h-14 bg-brand-orange/20 rounded-full flex items-center justify-center">
                    <Users className="text-brand-orange" size={28} />
                  </div>
                  <div className="text-center">
                    <div className="text-sm text-gray-400 mb-1">Контактное лицо</div>
                    <div className="font-bold text-lg">Елизавета Валерьевна</div>
                  </div>
                </div>

                <a 
                  href="mailto:kovaleva@geowektor.ru" 
                  className="flex flex-col items-center gap-3 p-6 bg-white/10 rounded-xl hover:bg-white/20 transition-all hover:scale-105"
                >
                  <div className="w-14 h-14 bg-brand-orange/20 rounded-full flex items-center justify-center">
                    <Mail className="text-brand-orange" size={28} />
                  </div>
                  <div className="text-center">
                    <div className="text-sm text-gray-400 mb-1">Email</div>
                    <div className="font-bold">kovaleva@geowektor.ru</div>
                  </div>
                </a>
              </div>

              <div className="text-center pt-6 border-t border-white/20">
                <a 
                  href="https://geowektor.ru" 
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-400 transition-colors text-lg font-semibold"
                >
                  <Globe size={24} />
                  geowektor.ru
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Секция с клиентами */}
      <div className="bg-gray-50 py-20 overflow-hidden">
        <div className="container mx-auto px-6 mb-12">
          <div className="text-center">
            <div className="inline-flex items-center justify-center w-16 h-16 bg-brand-orange/10 rounded-full mb-6">
              <Building2 className="text-brand-orange" size={32} />
            </div>
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Наши клиенты</h2>
            <p className="text-gray-600 text-lg max-w-2xl mx-auto">
              Более 200 компаний доверили нам свои проекты. Среди них крупнейшие предприятия нефтегазовой отрасли, 
              строительные холдинги и государственные организации.
            </p>
          </div>
        </div>

        <div 
          className="relative"
          onMouseEnter={handleCarouselMouseEnter}
          onMouseLeave={handleCarouselMouseLeave}
        >
          <div 
            ref={scrollContainerRef}
            onMouseDown={handleMouseDown}
            onMouseUp={handleMouseUp}
            onMouseMove={handleMouseMove}
            onMouseLeave={handleScrollContainerMouseLeave}
            onWheel={handleWheel}
            className={`flex gap-6 overflow-x-scroll scrollbar-hide ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
            style={{ 
              scrollbarWidth: 'none',
              msOverflowStyle: 'none',
              WebkitOverflowScrolling: 'touch'
            }}
          >
            {duplicatedClients.map((client, index) => (
              <div 
                key={index}
                className="flex-shrink-0 w-72 group"
                draggable={false}
              >
                <div className={`relative bg-gradient-to-br ${client.color} rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 overflow-hidden`}>
                  {/* Декоративные элементы */}
                  <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16"></div>
                  <div className="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full -ml-12 -mb-12"></div>
                  
                  {/* Иконка здания */}
                  <div className="relative flex items-center justify-center mb-6">
                    <div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                      <Building2 className="text-white" size={32} />
                    </div>
                  </div>
                  
                  {/* Название компании */}
                  <div className="relative">
                    <p className="text-center text-white font-bold text-lg leading-tight min-h-[60px] flex items-center justify-center">
                      {client.name}
                    </p>
                  </div>
                  
                  {/* Нижний декоративный элемент */}
                  <div className="mt-6 h-1 bg-white/30 rounded-full"></div>
                </div>
              </div>
            ))}
          </div>

          {/* Градиенты по краям */}
          <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-gray-50 to-transparent pointer-events-none"></div>
          <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-gray-50 to-transparent pointer-events-none"></div>
        </div>

        <div className="text-center mt-8">
          <p className="text-sm text-gray-500 italic">
            💡 Используйте мышь или колесо прокрутки для навигации
          </p>
        </div>
      </div>

      {/* Секция отзывов */}
      <div className="bg-white py-20">
        <div className="container mx-auto px-6">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-brand-orange/10 rounded-full mb-6">
                <Star className="text-brand-orange" size={32} />
              </div>
              <h2 className="text-4xl font-bold text-gray-900 mb-4">Отзывы</h2>
              <p className="text-gray-600 text-lg max-w-2xl mx-auto">
                Благодарственные письма от наших партнеров и клиентов
              </p>
            </div>

            <div className="space-y-6">
              {/* Отзыв 1 */}
              <div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                <div className="bg-brand-orange p-6">
                  <h3 className="text-xl font-bold text-white uppercase">
                    ОТЗЫВ ДАЛЬТЕХПРОМ - ВЫПОЛНЕНИЕ ОБСЛЕДОВАТЕЛЬНЫХ РАБОТ
                  </h3>
                </div>
                <div className="p-6">
                  <a 
                    href="/media/feedback/1.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
                  >
                    <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>
                    <span className="font-semibold">Открыть документ (pdf)</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              </div>

              {/* Отзыв 2 */}
              <div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                <div className="bg-brand-orange p-6">
                  <h3 className="text-xl font-bold text-white uppercase">
                    ОТЗЫВ ПЕГАЗ - КОМПЛЕКС ИНЖЕНЕРНЫХ ИЗЫСКАНИЙ
                  </h3>
                </div>
                <div className="p-6">
                  <a 
                    href="/media/feedback/2.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
                  >
                    <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>
                    <span className="font-semibold">Открыть документ (pdf)</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              </div>

              {/* Отзыв 3 */}
              <div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                <div className="bg-brand-orange p-6">
                  <h3 className="text-xl font-bold text-white uppercase">
                    ОТЗЫВ БАШКИРЭНЕРГО - МОНТАЖ КТСО, ЭН
                  </h3>
                </div>
                <div className="p-6">
                  <a 
                    href="/media/feedback/3.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
                  >
                    <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>
                    <span className="font-semibold">Открыть документ (pdf)</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              </div>

              {/* Отзыв 4 */}
              <div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                <div className="bg-brand-orange p-6">
                  <h3 className="text-xl font-bold text-white uppercase">
                    ОТЗЫВ БАШКИРЭНЕРГО - РЕКОНСТРУКЦИЯ ОБЪЕКТА "ТЕХУКРЕПЛЕННОСТЬ БАЗЫ ПО СЭС"
                  </h3>
                </div>
                <div className="p-6">
                  <a 
                    href="/media/feedback/4.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
                  >
                    <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>
                    <span className="font-semibold">Открыть документ (pdf)</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              </div>

              {/* Отзыв 5 */}
              <div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                <div className="bg-brand-orange p-6">
                  <h3 className="text-xl font-bold text-white uppercase">
                    ОТЗЫВ ПБ ОНГМ - ЗЕМЛЕУСТРОИТЕЛЬНЫЕ И КАДАСТРОВЫЕ РАБОТЫ
                  </h3>
                </div>
                <div className="p-6">
                  <a 
                    href="/media/feedback/5.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
                  >
                    <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>
                    <span className="font-semibold">Открыть документ (pdf)</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              </div>

              {/* Отзыв 6 */}
              <div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                <div className="bg-brand-orange p-6">
                  <h3 className="text-xl font-bold text-white uppercase">
                    ОТЗЫВ ПБ ОНГМ - СТРОИТЕЛЬСТВО АВТОМОБИЛЬНОЙ ДОРОГИ
                  </h3>
                </div>
                <div className="p-6">
                  <a 
                    href="/media/feedback/6.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
                  >
                    <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>
                    <span className="font-semibold">Открыть документ (pdf)</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              </div>

              {/* Отзыв 7 */}
              <div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                <div className="bg-brand-orange p-6">
                  <h3 className="text-xl font-bold text-white uppercase">
                    ОТЗЫВ ЛУКОЙЛ-УРАЛНЕФТЕПРОДУКТ
                  </h3>
                </div>
                <div className="p-6">
                  <a 
                    href="/media/feedback/7.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
                  >
                    <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>
                    <span className="font-semibold">Открыть документ (pdf)</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              </div>

              {/* Отзыв 8 */}
              <div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                <div className="bg-brand-orange p-6">
                  <h3 className="text-xl font-bold text-white uppercase">
                    ОТЗЫВ ЭЛЛАДА - КОМПЛЕКС ИНЖЕНЕРНЫХ ИЗЫСКАНИЙ
                  </h3>
                </div>
                <div className="p-6">
                  <a 
                    href="/media/feedback/8.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
                  >
                    <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>
                    <span className="font-semibold">Открыть документ (pdf)</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AboutPage;