"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { motion } from "framer-motion"
import { Check, Mail, MapPin, Phone, ArrowRight, Send, Clock, ChevronRight } from "lucide-react"
import { useInView } from "react-intersection-observer"
import Image from "next/image"
import Link from "next/link"

export default function ContactPage() {
  const [formSubmitted, setFormSubmitted] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    subject: "general",
    message: "",
  })
  const [ref1, inView1] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [ref2, inView2] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [mapRef, mapInView] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [faqRef, faqInView] = useInView({ triggerOnce: true, threshold: 0.2 })

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleRadioChange = (value: string) => {
    setFormData((prev) => ({ ...prev, subject: value }))
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Here you would normally send the form data to your backend
    console.log("Form submitted:", formData)
    setFormSubmitted(true)
    // Reset form after submission
    setFormData({
      name: "",
      email: "",
      phone: "",
      subject: "general",
      message: "",
    })
    // Reset submission status after 5 seconds
    setTimeout(() => setFormSubmitted(false), 5000)
  }

  // Анимационные варианты
  const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
  }

  const staggerContainer = {
    hidden: { opacity: 0 },
    visible: { 
      opacity: 1,
      transition: { 
        staggerChildren: 0.1
      } 
    }
  }

  return (
    <div className="bg-white">
      {/* Hero Section */}
      <section className="relative h-[40vh] min-h-[300px] md:min-h-[400px] lg:min-h-[500px]">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: "url('/placeholder.svg?height=800&width=1920')" }}
        >
          <div className="absolute inset-0 bg-gradient-to-r from-primary/90 to-primary/50"></div>
        </div>

        <div className="relative h-full container mx-auto px-4 flex flex-col justify-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="max-w-2xl text-white"
          >
            <h1 className="text-3xl md:text-4xl lg:text-5xl font-serif mb-6 tracking-tight">СВЯЗАТЬСЯ С НАМИ</h1>
            <div className="w-20 h-[1px] bg-white/60 mb-6"></div>
            <p className="text-lg md:text-xl opacity-90 font-light">Мы всегда рады ответить на ваши вопросы и услышать ваше мнение</p>
          </motion.div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-3 gap-8 md:gap-12 lg:gap-16">
            {/* Contact Information */}
            <motion.div 
              ref={ref1}
              initial={{ opacity: 0, x: -20 }}
              animate={inView1 ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.8 }}
              className="md:col-span-1"
            >
              <h2 className="text-xl md:text-2xl font-serif text-primary mb-6 tracking-tight">КОНТАКТНАЯ ИНФОРМАЦИЯ</h2>
              <div className="w-16 h-[2px] bg-secondary mb-8"></div>

              <div className="space-y-8 md:space-y-10">
                <div className="flex items-start">
                  <div className="bg-tertiary/20 p-3 mr-4 rounded-sm">
                    <MapPin className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-800 mb-1">Адрес</h3>
                    <p className="text-gray-600 text-sm md:text-base">ул. Ленина, 123, Москва, 123456</p>
                    <p className="text-gray-600 text-sm md:text-base">Россия</p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="bg-tertiary/20 p-3 mr-4 rounded-sm">
                    <Mail className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-800 mb-1">Email</h3>
                    <p className="text-gray-600 text-sm md:text-base">info@dressedforsuccessstore.com</p>
                    <p className="text-gray-600 text-sm md:text-base">support@dressedforsuccessstore.com</p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="bg-tertiary/20 p-3 mr-4 rounded-sm">
                    <Phone className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-800 mb-1">Телефон</h3>
                    <p className="text-gray-600 text-sm md:text-base">+7 (495) 123-45-67</p>
                    <p className="text-gray-600 text-sm md:text-base">Пн-Пт: 9:00 - 18:00</p>
                  </div>
                </div>
              </div>

              <div className="mt-10 md:mt-12 p-6 md:p-8 bg-tertiary/10 border border-tertiary/20 rounded-sm">
                <div className="flex items-center mb-4">
                  <Clock className="h-5 w-5 text-primary mr-2" />
                  <h3 className="text-lg font-medium text-primary">Часы работы</h3>
                </div>
                <div className="space-y-3 text-sm md:text-base">
                  <div className="flex justify-between">
                    <span className="text-gray-600">Понедельник - Пятница:</span>
                    <span className="text-gray-800 font-medium">10:00 - 20:00</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">Суббота:</span>
                    <span className="text-gray-800 font-medium">10:00 - 18:00</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">Воскресенье:</span>
                    <span className="text-gray-800 font-medium">11:00 - 17:00</span>
                  </div>
                </div>
              </div>

              <div className="mt-8">
                <Button 
                  variant="outline" 
                  className="border-primary text-primary hover:bg-primary/5 rounded-sm group"
                  asChild
                >
                  <a href="https://maps.google.com" target="_blank" rel="noopener noreferrer" className="flex items-center">
                    Посмотреть на карте
                    <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </a>
                </Button>
              </div>
            </motion.div>

            {/* Contact Form */}
            <motion.div 
              ref={ref2}
              initial={{ opacity: 0, y: 30 }}
              animate={inView2 ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="md:col-span-2"
            >
              <div className="bg-white p-6 md:p-8 lg:p-10 border border-gray-100 shadow-sm rounded-sm">
                <h2 className="text-xl md:text-2xl font-serif text-primary mb-6 tracking-tight">НАПИШИТЕ НАМ</h2>
                <div className="w-16 h-[2px] bg-secondary mb-8"></div>

                {formSubmitted ? (
                  <motion.div
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    className="bg-green-50 border border-green-200 text-green-800 p-6 rounded-sm flex items-center"
                  >
                    <Check className="h-6 w-6 mr-3 text-green-600" />
                    <div>
                      <h3 className="font-medium">Сообщение отправлено!</h3>
                      <p className="text-sm text-green-700">Спасибо за ваше сообщение. Мы свяжемся с вами в ближайшее время.</p>
                    </div>
                  </motion.div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="name" className="text-gray-700">Имя</Label>
                        <Input
                          id="name"
                          name="name"
                          value={formData.name}
                          onChange={handleChange}
                          placeholder="Ваше имя"
                          required
                          className="border-gray-300 focus:border-primary focus:ring-primary rounded-sm"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="email" className="text-gray-700">Email</Label>
                        <Input
                          id="email"
                          name="email"
                          type="email"
                          value={formData.email}
                          onChange={handleChange}
                          placeholder="ваш@email.com"
                          required
                          className="border-gray-300 focus:border-primary focus:ring-primary rounded-sm"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="phone" className="text-gray-700">Телефон (опционально)</Label>
                      <Input
                        id="phone"
                        name="phone"
                        type="tel"
                        value={formData.phone}
                        onChange={handleChange}
                        placeholder="+7 (___) ___-__-__"
                        className="border-gray-300 focus:border-primary focus:ring-primary rounded-sm"
                      />
                    </div>

                    <div className="space-y-3">
                      <Label className="text-gray-700">Тема обращения</Label>
                      <RadioGroup
                        value={formData.subject}
                        onValueChange={handleRadioChange}
                        className="grid grid-cols-1 sm:grid-cols-2 gap-2"
                      >
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="general" id="general" className="text-primary" />
                          <Label htmlFor="general" className="text-gray-700 cursor-pointer">Общий вопрос</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="order" id="order" className="text-primary" />
                          <Label htmlFor="order" className="text-gray-700 cursor-pointer">Вопрос по заказу</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="product" id="product" className="text-primary" />
                          <Label htmlFor="product" className="text-gray-700 cursor-pointer">Вопрос о товаре</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="partnership" id="partnership" className="text-primary" />
                          <Label htmlFor="partnership" className="text-gray-700 cursor-pointer">Сотрудничество</Label>
                        </div>
                      </RadioGroup>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="message" className="text-gray-700">Сообщение</Label>
                      <Textarea
                        id="message"
                        name="message"
                        value={formData.message}
                        onChange={handleChange}
                        placeholder="Ваше сообщение..."
                        required
                        className="min-h-[150px] border-gray-300 focus:border-primary focus:ring-primary rounded-sm"
                      />
                    </div>

                    <Button 
                      type="submit" 
                      className="bg-primary hover:bg-primary/90 text-white rounded-sm w-full md:w-auto group"
                    >
                      Отправить сообщение
                      <Send className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </Button>
                  </form>
                )}
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Map Section */}
      <section 
        ref={mapRef}
        className="py-16 md:py-24 bg-tertiary/10"
      >
        <div className="container mx-auto px-4">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={mapInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center max-w-3xl mx-auto mb-12"
          >
            <h2 className="text-xl md:text-2xl lg:text-3xl font-serif text-primary mb-4 tracking-tight">КАК НАС НАЙТИ</h2>
            <div className="w-20 h-[2px] bg-secondary mx-auto mb-6"></div>
            <p className="text-gray-600 text-sm md:text-base">
              Наш магазин расположен в центре города, в нескольких минутах ходьбы от станции метро.
            </p>
          </motion.div>

          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={mapInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative h-[400px] md:h-[500px] bg-gray-200 rounded-sm overflow-hidden"
          >
            {/* Here you would normally embed a Google Map or similar */}
            <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
              <div className="text-center">
                <MapPin className="h-12 w-12 text-primary mx-auto mb-4" />
                <p className="text-gray-700 font-medium">Карта будет здесь</p>
                <p className="text-gray-500 text-sm">ул. Ленина, 123, Москва</p>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* FAQ Section */}
      <section 
        ref={faqRef}
        className="py-16 md:py-24"
      >
        <div className="container mx-auto px-4">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={faqInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center max-w-3xl mx-auto mb-12"
          >
            <h2 className="text-xl md:text-2xl lg:text-3xl font-serif text-primary mb-4 tracking-tight">ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ</h2>
            <div className="w-20 h-[2px] bg-secondary mx-auto mb-6"></div>
            <p className="text-gray-600 text-sm md:text-base">
              Ответы на наиболее распространенные вопросы о нашем магазине и услугах
            </p>
          </motion.div>

          <motion.div
            initial="hidden"
            animate={faqInView ? "visible" : "hidden"}
            variants={staggerContainer}
            className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto"
          >
            {[
              {
                question: "Как долго осуществляется доставка?",
                answer: "Стандартная доставка занимает 3-5 рабочих дней. Экспресс-доставка доступна в большинстве крупных городов и занимает 1-2 рабочих дня."
              },
              {
                question: "Какова политика возврата?",
                answer: "Вы можете вернуть товар в течение 14 дней с момента получения, если он не был в использовании и сохранил все бирки и упаковку."
              },
              {
                question: "Есть ли у вас программа лояльности?",
                answer: "Да, у нас есть программа лояльности, которая позволяет накапливать баллы за покупки и обменивать их на скидки."
              },
              {
                question: "Как я могу отследить свой заказ?",
                answer: "После отправки заказа вы получите электронное письмо с номером для отслеживания. Вы также можете проверить статус заказа в личном кабинете."
              }
            ].map((faq, index) => (
              <motion.div 
                key={index} 
                variants={fadeIn}
                className="border border-gray-100 p-6 md:p-8 hover:border-primary/20 transition-colors rounded-sm hover:shadow-sm"
              >
                <h3 className="text-lg font-medium text-primary mb-3">{faq.question}</h3>
                <p className="text-gray-600">{faq.answer}</p>
              </motion.div>
            ))}
          </motion.div>

          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={faqInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="text-center mt-12"
          >
            <Button 
              variant="outline" 
              className="border-primary text-primary hover:bg-primary/5 rounded-sm group"
              asChild
            >
              <Link href="/faq" className="flex items-center">
                Все вопросы и ответы
                <ChevronRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
              </Link>
            </Button>
          </motion.div>
        </div>
      </section>
    </div>
  )
}
