import { Phone, Mail, MapPin, Clock } from 'lucide-react'

export function Contact() {
  return (
    <section className="py-4 bg-gray-50">
      <div className="max-w-[900px] mx-auto px-6">
        {/* Заголовок */}
        <div className="text-center mb-12">
          <h2 className="text-3xl lg:text-4xl text-gray-900 mb-3">Обсудим ваш проект</h2>
          <p className="text-gray-600">Оставьте заявку — перезвоним в течение часа</p>
        </div>

        {/* Форма */}
        <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
          <form className="space-y-5">
            <div className="grid md:grid-cols-2 gap-5">
              <div>
                <input
                  type="text"
                  id="name"
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
                  placeholder="Ваше имя"
                  required
                />
              </div>

              <div>
                <input
                  type="text"
                  id="company"
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
                  placeholder="Компания"
                />
              </div>
            </div>

            <div className="grid md:grid-cols-2 gap-5">
              <div>
                <input
                  type="email"
                  id="email"
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
                  placeholder="Email"
                  required
                />
              </div>

              <div>
                <input
                  type="tel"
                  id="phone"
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
                  placeholder="Телефон"
                  required
                />
              </div>
            </div>

            <div>
              <textarea
                id="message"
                rows={4}
                className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all resize-none"
                placeholder="Расскажите о вашем проекте"
              ></textarea>
            </div>

            <div className="flex flex-col sm:flex-row items-center gap-4">
              <button
                type="submit"
                className="w-full sm:w-auto px-8 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all"
              >
                Отправить заявку
              </button>
              <p className="text-sm text-gray-500">Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности</p>
            </div>
          </form>
        </div>

        {/* Контакты компактно */}
        <div className="mt-12 flex flex-wrap justify-center gap-8 text-sm text-gray-600">
          <a href="tel:+74951234567" className="flex items-center gap-2 hover:text-blue-600 transition-colors">
            <Phone className="w-4 h-4" />
            <span>+7 (495) 123-45-67</span>
          </a>
          <a href="mailto:info@softclick.ru" className="flex items-center gap-2 hover:text-blue-600 transition-colors">
            <Mail className="w-4 h-4" />
            <span>info@softclick.ru</span>
          </a>
          <div className="flex items-center gap-2">
            <MapPin className="w-4 h-4" />
            <span>Москва, Пресненская наб., 12</span>
          </div>
          <div className="flex items-center gap-2">
            <Clock className="w-4 h-4" />
            <span>Пн-Пт 9:00–18:00</span>
          </div>
        </div>
      </div>
    </section>
  )
}