"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { ChevronLeft, ChevronRight, Quote } from "lucide-react";

const testimonials = [
  {
    quote:
      "Gloria me ayudó a encontrar claridad en un momento muy difícil de mi vida. Su calidez y profesionalismo son inigualables. Me sentí escuchada y comprendida desde la primera sesión.",
    author: "María G.",
  },
  {
    quote:
      "Gracias a la terapia con Gloria pude sanar heridas de mi infancia que afectaban mis relaciones actuales. Es una terapeuta excepcionalmente empática.",
    author: "Carlos R.",
  },
  {
    quote:
      "El enfoque integral que utiliza es muy efectivo. No solo hablamos, sino que me dio herramientas prácticas para manejar mi ansiedad en el día a día.",
    author: "Ana Sofía L.",
  },
];

export function Testimonials() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [direction, setDirection] = useState(0);

  const nextSlide = () => {
    setDirection(1);
    setCurrentIndex((prev) => (prev + 1) % testimonials.length);
  };

  const prevSlide = () => {
    setDirection(-1);
    setCurrentIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length);
  };

  const goToSlide = (index: number) => {
    setDirection(index > currentIndex ? 1 : -1);
    setCurrentIndex(index);
  };

  // Auto-advance
  useEffect(() => {
    const timer = setInterval(() => {
      nextSlide();
    }, 6000);
    return () => clearInterval(timer);
  }, []);

  const slideVariants = {
    enter: (direction: number) => ({
      x: direction > 0 ? 100 : -100,
      opacity: 0,
    }),
    center: {
      zIndex: 1,
      x: 0,
      opacity: 1,
    },
    exit: (direction: number) => ({
      zIndex: 0,
      x: direction < 0 ? 100 : -100,
      opacity: 0,
    }),
  };

  return (
    <section id="testimonios" className="relative overflow-hidden bg-primary py-20 sm:py-32">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute left-10 top-10 h-72 w-72 rounded-full bg-accent blur-3xl" />
        <div className="absolute bottom-10 right-10 h-96 w-96 rounded-full bg-white blur-3xl" />
      </div>

      <div className="container relative mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Title */}
        <motion.div
          className="mb-12 text-center sm:mb-16"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="mb-4 font-serif text-3xl font-bold text-white sm:text-4xl lg:text-5xl">
            Lo que dicen mis pacientes
          </h2>
          <motion.div
            className="mx-auto h-1 w-24 bg-accent"
            initial={{ width: 0 }}
            whileInView={{ width: 96 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.3 }}
          />
        </motion.div>

        {/* Carousel */}
        <div className="relative mx-auto max-w-4xl">
          {/* Navigation Buttons */}
          <motion.button
            onClick={prevSlide}
            className="absolute left-0 top-1/2 z-10 flex h-12 w-12 -translate-x-4 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-white/20 sm:-translate-x-16"
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            aria-label="Testimonio anterior"
          >
            <ChevronLeft className="h-6 w-6 text-white" />
          </motion.button>

          <motion.button
            onClick={nextSlide}
            className="absolute right-0 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 translate-x-4 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-white/20 sm:translate-x-16"
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            aria-label="Testimonio siguiente"
          >
            <ChevronRight className="h-6 w-6 text-white" />
          </motion.button>

          {/* Slides */}
          <div className="relative overflow-hidden px-4 sm:px-16">
            <AnimatePresence initial={false} custom={direction} mode="wait">
              <motion.div
                key={currentIndex}
                custom={direction}
                variants={slideVariants}
                initial="enter"
                animate="center"
                exit="exit"
                transition={{
                  x: { type: "spring", stiffness: 300, damping: 30 },
                  opacity: { duration: 0.2 },
                }}
                className="relative"
              >
                <Card className="border border-white/10 bg-white/5 backdrop-blur-sm">
                  <CardContent className="p-8 sm:p-12">
                    {/* Quote Icon */}
                    <motion.div
                      className="mb-6"
                      animate={{
                        rotate: [0, 5, -5, 0],
                      }}
                      transition={{
                        duration: 4,
                        repeat: Infinity,
                        ease: "easeInOut",
                      }}
                    >
                      <Quote className="h-12 w-12 text-accent" />
                    </motion.div>

                    {/* Quote */}
                    <p className="mb-8 font-serif text-xl leading-relaxed text-white/90 sm:text-2xl">
                      "{testimonials[currentIndex].quote}"
                    </p>

                    {/* Author */}
                    <div className="flex items-center space-x-3">
                      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-accent/20">
                        <span className="font-serif text-lg font-bold text-accent">
                          {testimonials[currentIndex].author.charAt(0)}
                        </span>
                      </div>
                      <div>
                        <p className="text-lg font-semibold text-white">
                          {testimonials[currentIndex].author}
                        </p>
                        <p className="text-sm text-white/60">Paciente</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            </AnimatePresence>
          </div>

          {/* Dots */}
          <div className="mt-8 flex justify-center space-x-3">
            {testimonials.map((_, index) => (
              <motion.button
                key={index}
                onClick={() => goToSlide(index)}
                className={`h-2 rounded-full transition-all duration-300 ${
                  currentIndex === index ? "w-8 bg-accent" : "w-2 bg-white/30"
                }`}
                whileHover={{ scale: 1.2 }}
                whileTap={{ scale: 0.8 }}
                aria-label={`Ir al testimonio ${index + 1}`}
              />
            ))}
          </div>
        </div>

        {/* CTA */}
        <motion.div
          className="mt-12 text-center sm:mt-16"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.4 }}
        >
          <motion.button
            onClick={() => {
              const element = document.querySelector("#contacto");
              if (element) element.scrollIntoView({ behavior: "smooth" });
            }}
            className="rounded-full bg-accent px-8 py-4 font-semibold text-primary transition-colors hover:bg-accent/90"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            Comienza Tu Proceso de Sanación
          </motion.button>
        </motion.div>
      </div>
    </section>
  );
}
