"use client"

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

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

  const products = [
    {
      id: 1,
      name: "Платье с цветочным принтом",
      price: 5990,
      oldPrice: 7990,
      image: "/placeholder.svg?height=600&width=400",
      link: "/product/1",
      isNew: true,
    },
    {
      id: 2,
      name: "Блуза из натурального шелка",
      price: 4990,
      image: "/placeholder.svg?height=600&width=400",
      link: "/product/2",
    },
    {
      id: 3,
      name: "Брюки с высокой посадкой",
      price: 3990,
      image: "/placeholder.svg?height=600&width=400",
      link: "/product/3",
    },
    {
      id: 4,
      name: "Жакет в клетку",
      price: 6990,
      oldPrice: 8990,
      image: "/placeholder.svg?height=600&width=400",
      link: "/product/4",
    },
  ]

  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="flex flex-col md:flex-row justify-between items-start md:items-end mb-16">
          <div>
            <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-xl">
              Познакомьтесь с нашими бестселлерами — изделиями, которые завоевали любовь и признание наших клиентов.
            </p>
          </div>
          <Link
            href="/catalog"
            className="inline-flex items-center text-primary hover:text-secondary font-medium transition-colors mt-4 md:mt-0"
          >
            <span>Смотреть все товары</span>
            <ArrowRight className="ml-2 h-5 w-5" />
          </Link>
        </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"
        >
          {products.map((product) => (
            <motion.div key={product.id} variants={itemVariants} className="group">
              <div className="relative aspect-[3/4] mb-6 overflow-hidden rounded-xl">
                <Image
                  src={product.image || "/placeholder.svg"}
                  alt={product.name}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-105"
                />

                {product.isNew && (
                  <div className="absolute top-4 left-4 bg-secondary text-white text-xs font-medium px-3 py-1 rounded-full">
                    Новинка
                  </div>
                )}

                {product.oldPrice && (
                  <div className="absolute top-4 left-4 bg-red-500 text-white text-xs font-medium px-3 py-1 rounded-full">
                    -{Math.round(((product.oldPrice - product.price) / product.oldPrice) * 100)}%
                  </div>
                )}

                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div>

                <div className="absolute top-4 right-4 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-4 group-hover:translate-x-0">
                  <Button size="icon" variant="secondary" className="rounded-full h-10 w-10 shadow-lg">
                    <Heart className="h-5 w-5" />
                    <span className="sr-only">Добавить в избранное</span>
                  </Button>
                  <Button size="icon" variant="secondary" className="rounded-full h-10 w-10 shadow-lg">
                    <ShoppingBag className="h-5 w-5" />
                    <span className="sr-only">Добавить в корзину</span>
                  </Button>
                </div>

                <div className="absolute bottom-4 inset-x-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-4 group-hover:translate-y-0">
                  <Button asChild className="w-full bg-white text-primary hover:bg-tertiary shadow-lg">
                    <Link href={product.link}>Быстрый просмотр</Link>
                  </Button>
                </div>
              </div>

              <Link href={product.link} className="block">
                <h3 className="text-lg font-medium text-gray-800 mb-2 group-hover:text-primary transition-colors">
                  {product.name}
                </h3>
                <div className="flex items-center gap-2">
                  <span className="text-primary font-bold text-lg">{product.price.toLocaleString()} ₽</span>
                  {product.oldPrice && (
                    <span className="text-gray-500 line-through text-sm">{product.oldPrice.toLocaleString()} ₽</span>
                  )}
                </div>
              </Link>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  )
}

