"use client"

import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"
import { useInView } from "react-intersection-observer"
import { ArrowRight, ArrowUpRight, ChevronRight, Mail } from "lucide-react"
import { useState } from "react"

export default function CollectionsPage() {
  const [heroRef, heroInView] = useInView({ triggerOnce: true, threshold: 0.1 })
  const [featuredRef, featuredInView] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [seasonalRef, seasonalInView] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [subscribeRef, subscribeInView] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [email, setEmail] = useState("")
  const [subscribed, setSubscribed] = useState(false)

  // Анимационные варианты
  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
      } 
    }
  }

  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault()
    if (email) {
      setSubscribed(true)
      setEmail("")
      // Здесь можно добавить логику отправки email на сервер
    }
  }

  // Данные о коллекциях
  const featuredCollections = [
    {
      id: "spring-summer-2025",
      title: "ЭФЕМЕРНОСТЬ",
      subtitle: "ВЕСНА-ЛЕТО 2025",
      description: "Воздушные силуэты, вдохновленные природой и движением. Коллекция воплощает легкость и свободу через струящиеся ткани и нежные оттенки.",
      image: "/placeholder.svg?height=800&width=1200",
      color: "#E2E2C1",
      itemCount: 45,
    },
    {
      id: "fall-winter-2024",
      title: "АРХИТЕКТОНИКА",
      subtitle: "ОСЕНЬ-ЗИМА 2024",
      description: "Структурированные формы с акцентом на линиях и пропорциях. Коллекция исследует взаимодействие между архитектурой и модой.",
      image: "/placeholder.svg?height=800&width=1200",
      color: "#63823B",
      itemCount: 38,
    },
    {
      id: "capsule-collection",
      title: "МЕТАМОРФОЗЫ",
      subtitle: "КАПСУЛЬНАЯ КОЛЛЕКЦИЯ",
      description: "Трансформируемые модели для динамичной городской жизни. Универсальные предметы гардероба, которые легко комбинируются между собой.",
      image: "/placeholder.svg?height=800&width=1200",
      color: "#2B5F47",
      itemCount: 24,
    },
  ]

  // Сезонные коллекции
  const seasonalCollections = [
    {
      id: "essentials",
      title: "БАЗОВЫЕ МОДЕЛИ",
      description: "Вневременные предметы гардероба, которые никогда не выходят из моды",
      image: "/placeholder.svg?height=600&width=800",
      itemCount: 32,
    },
    {
      id: "office",
      title: "ДЕЛОВОЙ ГАРДЕРОБ",
      description: "Элегантные решения для офиса и деловых встреч",
      image: "/placeholder.svg?height=600&width=800",
      itemCount: 28,
    },
    {
      id: "evening",
      title: "ВЕЧЕРНИЕ НАРЯДЫ",
      description: "Изысканные платья и костюмы для особых случаев",
      image: "/placeholder.svg?height=600&width=800",
      itemCount: 18,
    },
    {
      id: "weekend",
      title: "WEEKEND",
      description: "Комфортная и стильная одежда для отдыха и путешествий",
      image: "/placeholder.svg?height=600&width=800",
      itemCount: 24,
    },
  ]

  return (
    <main className="overflow-hidden">
      {/* Заголовок страницы */}
      <section 
        ref={heroRef}
        className="relative bg-tertiary/20 py-24 md:py-32 overflow-hidden"
      >
        <div className="absolute inset-0 pointer-events-none overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-full opacity-5">
            <Image 
              src="/pattern.svg" 
              alt="" 
              fill 
              className="object-cover"
            />
          </div>
        </div>
        
        <div className="container mx-auto px-4 relative">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={heroInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="max-w-2xl mx-auto text-center"
          >
            <h1 className="text-3xl md:text-5xl font-serif text-primary mb-6">КОЛЛЕКЦИИ</h1>
            <div className="w-20 h-[1px] bg-secondary mx-auto mb-6"></div>
            <p className="text-gray-600 mb-0 text-base md:text-lg leading-relaxed">
              Исследуйте наши тщательно продуманные коллекции, каждая из которых рассказывает свою уникальную историю через дизайн, материалы и силуэты
            </p>
          </motion.div>
        </div>
      </section>

      {/* Основные коллекции */}
      <section 
        ref={featuredRef}
        className="py-20 md:py-28"
      >
        <div className="container mx-auto px-4">
          <motion.div
            initial="hidden"
            animate={featuredInView ? "visible" : "hidden"}
            variants={staggerContainer}
            className="space-y-24 md:space-y-32"
          >
            {featuredCollections.map((collection, index) => (
                <motion.div
                key={collection.id}
                variants={fadeIn}
                className={`flex flex-col ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'} gap-8 lg:gap-16 items-center`}
              >
                <div className="w-full lg:w-1/2 relative">
                  <div 
                    className="absolute inset-0 -z-10 rounded-lg opacity-20"
                    style={{ backgroundColor: collection.color }}
                  ></div>
                  <div className="relative aspect-[4/3] overflow-hidden rounded-sm">
                    <Image
                      src={collection.image}
                      alt={collection.title}
                      fill
                      className="object-cover transition-transform duration-700 hover:scale-105"
                    />
                  </div>
                  </div>

                <div className="w-full lg:w-1/2">
                  <span className="text-sm tracking-widest text-secondary uppercase mb-2 inline-block">
                    {collection.subtitle}
                  </span>
                  <h2 className="text-3xl md:text-4xl lg:text-5xl font-serif text-primary mb-4">
                      {collection.title}
                  </h2>
                  <div className="w-16 h-[2px] bg-secondary mb-6"></div>
                  <p className="text-gray-600 mb-8 leading-relaxed">
                    {collection.description}
                  </p>
                  <div className="text-sm text-gray-500 mb-6 flex items-center">
                    <span className="inline-block w-3 h-3 rounded-full bg-secondary/30 mr-2"></span>
                    {collection.itemCount} моделей в коллекции
                  </div>
                  <Button 
                    asChild
                    className="bg-primary hover:bg-primary/90 group"
                  >
                    <Link href={`/collections/${collection.id}`} className="flex items-center">
                      СМОТРЕТЬ КОЛЛЕКЦИЮ
                      <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </Link>
                  </Button>
                  </div>
                </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Сезонные коллекции */}
      <section 
        ref={seasonalRef}
        className="py-20 md:py-28 bg-gradient-to-b from-tertiary/10 to-white"
      >
        <div className="container mx-auto px-4">
          <motion.div
              initial={{ opacity: 0, y: 20 }}
            animate={seasonalInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <span className="text-sm tracking-widest text-secondary uppercase mb-2 inline-block">Исследуйте</span>
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-serif text-primary mb-4">ТЕМАТИЧЕСКИЕ КОЛЛЕКЦИИ</h2>
            <div className="w-20 h-[2px] bg-secondary mx-auto"></div>
          </motion.div>
          
          <motion.div
            initial="hidden"
            animate={seasonalInView ? "visible" : "hidden"}
            variants={staggerContainer}
            className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8"
          >
            {seasonalCollections.map((collection, index) => (
              <motion.div
                key={collection.id}
                variants={fadeIn}
                className="group relative overflow-hidden rounded-sm"
              >
                <div className="aspect-[4/3] relative overflow-hidden">
                      <Image
                    src={collection.image}
                        alt={collection.title}
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-105"
                      />
                  <div className="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent opacity-80"></div>
                  
                  {/* Рамка при наведении */}
                  <div className="absolute inset-[15px] border border-white/0 transition-all duration-500 group-hover:border-white/30 group-hover:inset-[20px]"></div>
                  
                  <div className="absolute bottom-0 left-0 right-0 p-6 md:p-8 text-white">
                    <h3 className="text-xl md:text-2xl font-medium mb-2 group-hover:translate-y-[-5px] transition-transform duration-300">
                        {collection.title}
                      </h3>
                    <p className="text-white/80 mb-4 group-hover:translate-y-[-5px] transition-transform duration-300 delay-75">
                      {collection.description}
                    </p>
                    <div className="flex justify-between items-center group-hover:translate-y-[-5px] transition-transform duration-300 delay-150">
                      <span className="text-sm">{collection.itemCount} моделей</span>
                      <Link 
                        href={`/collections/${collection.id}`}
                        className="flex items-center text-white group/link"
                      >
                        <span className="relative mr-2">
                          СМОТРЕТЬ
                          <span className="absolute bottom-[-3px] left-0 w-0 h-[1px] bg-white transition-all duration-300 group-hover/link:w-full"></span>
                        </span>
                        <ArrowUpRight className="h-4 w-4 transition-transform group-hover/link:translate-x-1 group-hover/link:-translate-y-1" />
                      </Link>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Подписка на обновления */}
      <section ref={subscribeRef} className="py-20 md:py-28 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={subscribeInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.8 }}
              className="bg-tertiary/10 p-8 md:p-12 rounded-sm"
            >
              <div className="text-center mb-8">
                <span className="text-sm tracking-widest text-secondary uppercase mb-2 inline-block">Будьте в курсе</span>
                <h2 className="text-3xl md:text-4xl font-serif text-primary mb-4">НОВЫЕ КОЛЛЕКЦИИ</h2>
                <div className="w-20 h-[2px] bg-secondary mx-auto mb-6"></div>
                <p className="text-gray-600 mb-0 max-w-2xl mx-auto">
                  Подпишитесь на наши обновления, чтобы первыми узнавать о выходе новых коллекций и получать эксклюзивные предложения
                </p>
              </div>
              
              {!subscribed ? (
                <form onSubmit={handleSubscribe} className="max-w-md mx-auto">
                  <div className="flex flex-col sm:flex-row gap-3">
                    <div className="relative flex-grow">
                      <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
                      <input
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        placeholder="Ваш email"
                        className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-sm focus:outline-none focus:ring-1 focus:ring-primary"
                        required
                      />
                    </div>
                    <Button 
                      type="submit"
                      className="bg-primary hover:bg-primary/90 whitespace-nowrap"
                    >
                      ПОДПИСАТЬСЯ
                    </Button>
                  </div>
                </form>
              ) : (
                <div className="text-center p-4 bg-green-50 text-green-700 rounded-sm max-w-md mx-auto">
                  Спасибо за подписку! Мы будем держать вас в курсе новостей.
                </div>
              )}
              
              <div className="mt-12 text-center">
                <Button 
                  asChild
                  variant="outline"
                  className="border-primary text-primary hover:bg-primary/5 group"
                >
                  <Link href="/catalog" className="flex items-center">
                    ПЕРЕЙТИ В КАТАЛОГ
                    <ChevronRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </Link>
                </Button>
              </div>
            </motion.div>
          </div>
        </div>
      </section>
    </main>
  )
}
