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

const ContactsPage: React.FC = () => {
  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title="Контакты" 
        description="Мы всегда на связи и готовы ответить на любые ваши вопросы."
        image="/media/images/headers/header-kontakri.png"
      />

      <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">Телефон</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">Офис</h3>
                <p className="text-gray-600">450001, РБ, г. Уфа,</p>
                <p className="text-gray-600">ул. Комсомольская 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">Режим работы</h3>
                <p className="text-gray-600">Пн-Пт: 09:00 - 18:00</p>
                <p className="text-gray-600">Сб-Вс: Выходной</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">Мы в Telegram</h2>
              </div>
              <p className="text-gray-600 text-lg mb-6 leading-relaxed">
                Подписывайтесь на наш Telegram-канал, чтобы быть в курсе новостей компании, актуальных проектов и специальных предложений.
              </p>
              <div className="space-y-3">
                <p className="text-gray-700">
                  📱 Отсканируйте QR-код камерой телефона
                </p>
                <p className="text-gray-700">
                  💬 Или перейдите по ссылке: <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">
                  Наведите камеру на 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;