"use client"

import Image from "next/image"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
import { motion } from "framer-motion"
import { useInView } from "react-intersection-observer"

export default function CollectionsPreview() {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  })

  const collections = [
    {
      id: 1,
      name: "Весна-Лето 2025",
      description: "Легкость и свежесть в каждой детали",
      image: "/placeholder.svg?height=800&width=600",
      link: "/collections/spring-summer",
    },
    {
      id: 2,
      name: "Осень-Зима 2024/25",
      description: "Элегантность и комфорт для холодного сезона",
      image: "/placeholder.svg?height=800&width=600",
      link: "/collections/autumn-winter",
    },
  ]

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.3,
      },
    },
  }

  const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6 },
    },
  }

  return (
    <section className="py-24 bg-gradient-to-b from-tertiary to-tertiary/30">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <span className="inline-block text-secondary font-medium mb-3">Наши коллекции</span>
          <h2 className="text-4xl font-bold text-primary mb-4">Откройте для себя наши сезонные коллекции</h2>
          <p className="text-gray-700 max-w-2xl mx-auto">
            Каждая коллекция — это уникальная история, рассказанная через ткани, цвета и силуэты. Откройте для себя наши
            последние творения.
          </p>
        </div>

        <motion.div
          ref={ref}
          variants={containerVariants}
          initial="hidden"
          animate={inView ? "visible" : "hidden"}
          className="grid md:grid-cols-2 gap-12"
        >
          {collections.map((collection) => (
            <motion.div key={collection.id} variants={itemVariants}>
              <Link href={collection.link} className="group block relative overflow-hidden rounded-2xl h-[600px]">
                <Image
                  src={collection.image || "/placeholder.svg"}
                  alt={collection.name}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/40 to-transparent flex flex-col justify-end p-10">
                  <div className="transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500">
                    <h3 className="text-3xl font-bold text-white mb-3">{collection.name}</h3>
                    <p className="text-white/90 mb-6">{collection.description}</p>
                    <div className="flex items-center text-white opacity-0 group-hover:opacity-100 transition-all duration-500">
                      <span className="mr-2 font-medium">Смотреть коллекцию</span>
                      <ArrowRight className="h-5 w-5" />
                    </div>
                  </div>
                </div>
              </Link>
            </motion.div>
          ))}
        </motion.div>

        <div className="mt-16 text-center">
          <Link
            href="/collections"
            className="inline-flex items-center text-primary hover:text-secondary font-medium transition-colors"
          >
            <span>Смотреть все коллекции</span>
            <ArrowRight className="ml-2 h-5 w-5" />
          </Link>
        </div>
      </div>
    </section>
  )
}

