"use client"

import Image from "next/image"
import { useState } from "react"
import { ChevronLeft, ChevronRight, Star } from "lucide-react"
import { Button } from "@/components/ui/button"
import { motion, AnimatePresence } from "framer-motion"

export default function Testimonials() {
  const [currentIndex, setCurrentIndex] = useState(0)

  const testimonials = [
    {
      id: 1,
      name: "Анна Смирнова",
      role: "Постоянный клиент",
      image: "/placeholder.svg?height=200&width=200",
      text: "Я в восторге от качества одежды этого бренда! Каждая вещь, которую я приобрела, идеально сидит и выглядит дорого. Отдельно хочу отметить внимание к деталям и качество материалов. Теперь это мой любимый бренд одежды.",
      rating: 5,
    },
    {
      id: 2,
      name: "Екатерина Иванова",
      role: "Стилист",
      image: "/placeholder.svg?height=200&width=200",
      text: "Как стилист, я всегда ищу бренды, которые сочетают в себе качество, стиль и уникальность. Этот бренд превзошел все мои ожидания. Я регулярно рекомендую его своим клиентам, и они всегда остаются довольны.",
      rating: 5,
    },
    {
      id: 3,
      name: "Михаил Петров",
      role: "Фотограф",
      image: "/placeholder.svg?height=200&width=200",
      text: "Одежда этого бренда всегда выглядит потрясающе на фотографиях. Качество материалов, внимание к деталям и современный дизайн делают каждую вещь особенной. Рекомендую всем, кто ценит стиль и качество.",
      rating: 4,
    },
  ]

  const nextTestimonial = () => {
    setCurrentIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1))
  }

  const prevTestimonial = () => {
    setCurrentIndex((prev) => (prev === 0 ? testimonials.length - 1 : prev - 1))
  }

  return (
    <section className="py-24 bg-tertiary/50">
      <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>

        <div className="max-w-4xl mx-auto relative">
          <AnimatePresence mode="wait">
            <motion.div
              key={currentIndex}
              initial={{ opacity: 0, x: 100 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -100 }}
              transition={{ duration: 0.5 }}
              className="bg-white rounded-2xl shadow-xl p-8 md:p-12"
            >
              <div className="flex flex-col md:flex-row gap-8 items-start">
                <div className="md:w-1/3 flex flex-col items-center">
                  <div className="relative w-24 h-24 rounded-full overflow-hidden mb-4">
                    <Image
                      src={testimonials[currentIndex].image || "/placeholder.svg"}
                      alt={testimonials[currentIndex].name}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <h3 className="text-xl font-bold text-center">{testimonials[currentIndex].name}</h3>
                  <p className="text-gray-600 text-center">{testimonials[currentIndex].role}</p>
                  <div className="flex items-center mt-2">
                    {[...Array(5)].map((_, i) => (
                      <Star
                        key={i}
                        className={`h-5 w-5 ${
                          i < testimonials[currentIndex].rating ? "text-yellow-400 fill-yellow-400" : "text-gray-300"
                        }`}
                      />
                    ))}
                  </div>
                </div>

                <div className="md:w-2/3">
                  <div className="relative">
                    <svg
                      className="absolute -top-6 -left-6 h-12 w-12 text-primary/20"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
                    </svg>
                    <p className="text-gray-700 text-lg leading-relaxed italic">{testimonials[currentIndex].text}</p>
                  </div>
                </div>
              </div>
            </motion.div>
          </AnimatePresence>

          <div className="flex justify-center mt-8 gap-4">
            <Button
              variant="outline"
              size="icon"
              className="rounded-full border-primary text-primary hover:bg-primary hover:text-white"
              onClick={prevTestimonial}
            >
              <ChevronLeft className="h-5 w-5" />
              <span className="sr-only">Предыдущий отзыв</span>
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="rounded-full border-primary text-primary hover:bg-primary hover:text-white"
              onClick={nextTestimonial}
            >
              <ChevronRight className="h-5 w-5" />
              <span className="sr-only">Следующий отзыв</span>
            </Button>
          </div>

          <div className="absolute -bottom-4 -right-4 w-24 h-24 bg-primary/10 rounded-full"></div>
          <div className="absolute -top-4 -left-4 w-16 h-16 bg-secondary/10 rounded-full"></div>
        </div>
      </div>
    </section>
  )
}

