import React from 'react';
import PageHeader from '../components/PageHeader';
import { Phone, Mail, MapPin, Clock, Send, MessageCircle } from 'lucide-react';
import { useLocation } from 'react-router-dom';

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

  const title = isEnglish ? 'Contacts' : 'Контакты';
  const description = isEnglish
    ? 'We are always available and ready to answer any questions you may have.'
    : 'Мы всегда на связи и готовы ответить на любые ваши вопросы.';

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title={title} 
        description={description}
        image="/media/images/headers/header-kontakri.png"
      >
        {/* Кнопки мессенджеров сразу под надписью \"Мы всегда на связи\" в хедере */}
        <div className="flex flex-wrap justify-center gap-4 mt-4">
          {/* Скрытая кнопка MAX — оставлена в коде на будущее */}
          {false && (
            <a
              href="https://wa.me/79273444557"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-[#5b2cff] to-[#8b5dff] text-white font-semibold hover:from-[#4b23d6] hover:to-[#7446e0] transition-colors shadow-lg"
            >
              <MessageCircle size={20} />
              <span>MAX</span>
            </a>
          )}
          <a
            href="https://t.me/Edgar_MER"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-[#229ED9] text-white font-semibold hover:bg-[#1b80b3] transition-colors shadow-lg"
          >
            <Send size={20} />
            <span>Telegram</span>
          </a>
        </div>
      </PageHeader>

      <div className="container mx-auto px-6 py-20">

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20">
            <div className="bg-brand-light p-8 rounded-2xl">
                <Phone className="text-brand-orange w-8 h-8 mb-4" />
                <h3 className="font-bold text-lg mb-2">
                  {isEnglish ? 'Phone' : 'Телефон'}
                </h3>
                <a href="tel:83472927370" className="text-gray-600 hover:text-brand-orange transition-colors">
                  8 (347) 292 73 70
                </a>
            </div>
            <div className="bg-brand-light p-8 rounded-2xl">
                <Mail className="text-brand-orange w-8 h-8 mb-4" />
                <h3 className="font-bold text-lg mb-2">Email</h3>
                <a href="mailto:gw@geowektor.ru" className="text-gray-600 hover:text-brand-orange transition-colors">
                  gw@geowektor.ru
                </a>
            </div>
            <div className="bg-brand-light p-8 rounded-2xl">
                <MapPin className="text-brand-orange w-8 h-8 mb-4" />
                <h3 className="font-bold text-lg mb-2">
                  {isEnglish ? 'Office' : 'Офис'}
                </h3>
                <p className="text-gray-600">
                  {isEnglish ? '450001, Republic of Bashkortostan, Ufa,' : '450001, РБ, г. Уфа,'}
                </p>
                <p className="text-gray-600">
                  {isEnglish ? '19/1 Komsomolskaya St.' : 'ул. Комсомольская 19/1'}
                </p>
            </div>
            <div className="bg-brand-light p-8 rounded-2xl">
                <Clock className="text-brand-orange w-8 h-8 mb-4" />
                <h3 className="font-bold text-lg mb-2">
                  {isEnglish ? 'Working hours' : 'Режим работы'}
                </h3>
                <p className="text-gray-600">
                  {isEnglish ? 'Mon–Fri: 09:00–18:00' : 'Пн-Пт: 09:00 - 18:00'}
                </p>
                <p className="text-gray-600">
                  {isEnglish ? 'Sat–Sun: Closed' : 'Сб-Вс: Выходной'}
                </p>
            </div>
        </div>

        {/* Telegram QR-код */}
        <div className="mb-20 bg-gradient-to-br from-brand-orange/10 to-brand-orange/5 rounded-3xl p-12">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center max-w-5xl mx-auto">
            <div>
              <div className="flex items-center gap-3 mb-6">
                <Send className="w-10 h-10 text-brand-orange" />
                <h2 className="text-3xl font-bold text-brand-dark">
                  {isEnglish ? 'We are on Telegram' : 'Мы в Telegram'}
                </h2>
              </div>
              <p className="text-gray-600 text-lg mb-6 leading-relaxed">
                {isEnglish
                  ? 'Subscribe to our Telegram channel to stay up to date with company news, current projects and special offers.'
                  : 'Подписывайтесь на наш Telegram-канал, чтобы быть в курсе новостей компании, актуальных проектов и специальных предложений.'}
              </p>
              <div className="space-y-3">
                <p className="text-gray-700">
                  {isEnglish
                    ? '📱 Scan the QR code with your phone camera'
                    : '📱 Отсканируйте QR-код камерой телефона'}
                </p>
                <p className="text-gray-700">
                  {isEnglish ? '💬 Or follow the link: ' : '💬 Или перейдите по ссылке: '}
                  <a
                    href="https://t.me/ooo_geo_wektor"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-brand-orange hover:underline font-semibold"
                  >
                    @ooo_geo_wektor
                  </a>
                </p>
              </div>
            </div>
            
            <div className="flex justify-center">
              <div className="bg-white p-8 rounded-3xl shadow-xl border-4 border-brand-orange/20 hover:border-brand-orange/40 transition-all duration-300 hover:scale-105">
                <img 
                  src="/media/qr-code.png" 
                  alt="QR-код для перехода в Telegram канал ГеоВектор" 
                  className="w-64 h-64 object-contain"
                />
                <p className="text-center mt-4 text-sm text-gray-600 font-medium">
                  {isEnglish ? 'Point your camera at the QR code' : 'Наведите камеру на QR-код'}
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Яндекс карта */}
        <div className="w-full h-[400px] bg-gray-200 rounded-3xl overflow-hidden relative">
             <iframe 
                src="https://yandex.ru/map-widget/v1/?text=ГеоВектор%20Уфа%20Комсомольская%2019%2F1&z=17&l=map" 
                width="100%" 
                height="100%" 
                frameBorder="0"
                allowFullScreen={true} 
                style={{ position: 'relative', border: 0 }}
                title="Яндекс карта - ГеоВектор, ул. Комсомольская 19/1, Уфа"
            ></iframe>
        </div>
      </div>
    </div>
  );
};

export default ContactsPage;