"use client"

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

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

  const categories = [
    {
      id: 1,
      name: "Платья",
      image: "/placeholder.svg?height=600&width=400",
      count: 42,
      link: "/catalog/dresses",
    },
    {
      id: 2,
      name: "Блузы",
      image: "/placeholder.svg?height=600&width=400",
      count: 38,
      link: "/catalog/blouses",
    },
    {
      id: 3,
      name: "Брюки",
      image: "/placeholder.svg?height=600&width=400",
      count: 24,
      link: "/catalog/pants",
    },
    {
      id: 4,
      name: "Аксессуары",
      image: "/placeholder.svg?height=600&width=400",
      count: 56,
      link: "/catalog/accessories",
    },
  ]

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

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5 },
    },
  }

  return (
    <section className="py-24 bg-white">
      <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 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"
        >
          {categories.map((category) => (
            <motion.div key={category.id} variants={itemVariants}>
              <Link href={category.link} className="group block relative overflow-hidden rounded-2xl">
                <div className="aspect-[3/4] relative">
                  <Image
                    src={category.image || "/placeholder.svg"}
                    alt={category.name}
                    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"></div>

                  <div className="absolute inset-0 flex flex-col justify-end p-6">
                    <h3 className="text-2xl font-bold text-white mb-1">{category.name}</h3>
                    <p className="text-white/80">{category.count} моделей</p>
                  </div>
                </div>

                <div className="absolute inset-0 border-2 border-transparent group-hover:border-white/30 rounded-2xl transition-all duration-300"></div>
              </Link>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  )
}

