import React from 'react';
import { Send, MapPin, Mail, Phone } from 'lucide-react';
import { Link } from 'react-router-dom';

const Footer: React.FC = () => {
  return (
    <footer className="bg-[#1a0f0f] text-white py-20 rounded-t-[3rem] mt-auto" id="contacts">
      <div className="container mx-auto px-6">
        <div className="flex flex-col lg:flex-row gap-20">
          
          {/* Contacts Section with Accent */}
          <div className="lg:w-1/2">
            <h2 className="text-4xl font-bold mb-8 text-brand-orange">Свяжитесь с нами</h2>
            <p className="text-gray-300 text-lg mb-10 max-w-md">
              Готовы ответить на ваши вопросы и предложить лучшие решения для вашего проекта
            </p>

            <div className="space-y-6 max-w-md">
              <a 
                href="tel:83472927370" 
                className="flex items-start gap-4 p-6 bg-brand-orange/10 border border-brand-orange/30 rounded-2xl hover:bg-brand-orange hover:scale-105 transition-all duration-300 group"
              >
                <Phone size={28} className="text-brand-orange group-hover:text-white flex-shrink-0" />
                <div>
                  <p className="text-xs text-gray-400 mb-1 group-hover:text-white/80">Телефон</p>
                  <p className="text-xl font-bold text-white">8 (347) 292 73 70</p>
                  <p className="text-sm text-gray-400 mt-1 group-hover:text-white/70">Звоните с 9:00 до 18:00</p>
                </div>
              </a>

              <a 
                href="mailto:gw@geowektor.ru" 
                className="flex items-start gap-4 p-6 bg-brand-orange/10 border border-brand-orange/30 rounded-2xl hover:bg-brand-orange hover:scale-105 transition-all duration-300 group"
              >
                <Mail size={28} className="text-brand-orange group-hover:text-white flex-shrink-0" />
                <div>
                  <p className="text-xs text-gray-400 mb-1 group-hover:text-white/80">Email</p>
                  <p className="text-xl font-bold text-white">gw@geowektor.ru</p>
                  <p className="text-sm text-gray-400 mt-1 group-hover:text-white/70">Ответим в течение часа</p>
                </div>
              </a>

              <div className="flex items-start gap-4 p-6 bg-brand-orange/10 border border-brand-orange/30 rounded-2xl">
                <MapPin size={28} className="text-brand-orange flex-shrink-0" />
                <div>
                  <p className="text-xs text-gray-400 mb-1">Адрес</p>
                  <p className="text-lg font-bold text-white">450001, РБ, г. Уфа</p>
                  <p className="text-white/90">ул. Комсомольская 19/1</p>
                </div>
              </div>
            </div>
          </div>

          {/* Links & Social Section */}
          <div className="lg:w-1/2 grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Основная навигация */}
            <div>
              <h4 className="font-bold mb-6 text-lg">Компания</h4>
              <ul className="space-y-3 text-sm text-gray-400">
                <li><Link to="/" className="hover:text-brand-orange transition-colors">Главная</Link></li>
                <li><Link to="/about" className="hover:text-brand-orange transition-colors">О компании</Link></li>
                <li><Link to="/projects" className="hover:text-brand-orange transition-colors">Проекты</Link></li>
                <li><Link to="/fleet" className="hover:text-brand-orange transition-colors">Автопарк</Link></li>
                <li><Link to="/certificates" className="hover:text-brand-orange transition-colors">Сертификаты</Link></li>
                <li><Link to="/contacts" className="hover:text-brand-orange transition-colors">Контакты</Link></li>
              </ul>
            </div>

            {/* Услуги */}
            <div>
              <h4 className="font-bold mb-6 text-lg">Услуги</h4>
              <ul className="space-y-3 text-sm text-gray-400">
                <li><Link to="/services" className="hover:text-brand-orange transition-colors">Все услуги</Link></li>
                <li><Link to="/services/surveying" className="hover:text-brand-orange transition-colors">Инженерные изыскания</Link></li>
                <li><Link to="/services/design" className="hover:text-brand-orange transition-colors">Проектирование</Link></li>
                <li><Link to="/services/construction" className="hover:text-brand-orange transition-colors">Строительство</Link></li>
                <li><Link to="/services/soil-survey" className="hover:text-brand-orange transition-colors">Обследование грунтов</Link></li>
                <li><Link to="/services/building-survey" className="hover:text-brand-orange transition-colors">Обследование зданий</Link></li>
                <li><Link to="/services/land-survey" className="hover:text-brand-orange transition-colors">Кадастровые работы</Link></li>
              </ul>
            </div>

            {/* Лаборатории и соцсети */}
            <div>
              <h4 className="font-bold mb-6 text-lg">Лаборатории</h4>
              <ul className="space-y-3 text-sm text-gray-400 mb-8">
                <li><Link to="/laboratories/soil" className="hover:text-brand-orange transition-colors">Грунтовая лаборатория</Link></li>
                <li><Link to="/laboratories/radiation" className="hover:text-brand-orange transition-colors">Радиационная лаборатория</Link></li>
              </ul>

              <h4 className="font-bold mb-4 text-lg">Мы в интернете</h4>
              <div className="flex gap-4 mb-8">
                <a 
                  href="https://t.me/ooo_geo_wektor" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="w-12 h-12 rounded-full bg-brand-orange flex items-center justify-center text-white cursor-pointer hover:bg-white hover:text-brand-orange transition-all transform hover:scale-110"
                  title="Telegram"
                >
                  <Send size={22} />
                </a>
                <a 
                  href="https://vk.com/geowektor_ru" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="w-12 h-12 rounded-full bg-brand-orange flex items-center justify-center text-white cursor-pointer hover:bg-white hover:text-brand-orange transition-all transform hover:scale-110"
                  title="VK"
                >
                  <div className="font-bold text-sm">Vk</div>
                </a>
              </div>
              
              <div className="space-y-3 text-sm">
                <Link 
                  to="/privacy-policy" 
                  className="text-gray-400 hover:text-brand-orange transition-colors block"
                >
                  Политика конфиденциальности
                </Link>
              </div>
              
              <div className="mt-8 text-xs text-gray-600">
                 ©2025 ООО «ГеоВектор».<br />
                 Все права защищены.
              </div>
            </div>
          </div>

        </div>
      </div>
    </footer>
  );
};

export default Footer;