import { useState, useEffect, useCallback } from "react";
import { ChevronLeft, ChevronRight, Star } from "lucide-react";

const testimonials = [
  {
    id: 1,
    name: "Ester Lemes",
    text: "Só tenho elogios! Fiz a festa de 3 anos do meu filho e foi incrível! Desde o pessoal da adm até a recreação. Todos merecem elogios! Recomendo de olhos fechados!",
  },
  {
    id: 2,
    name: "Luciana Rodrigues",
    text: "Lugar incrível! Recomendo, super atenciosos, não falta nada nas mesas, comida, bebidas, os monitores super atenciosos, a responsável do evento bem prestativa. Parabéns a toda equipe!",
  },
  {
    id: 3,
    name: "Franciele Correa",
    text: "Eu não tenho palavras para agradecer toda a equipe, eles foram sensacionais, a comida maravilhosa, os brinquedos todos funcionando, muito animado. A festa foi muito animada e todos elogiaram. Super recomendo!",
  },
  {
    id: 4,
    name: "Karina De Almeida Antunes",
    text: "Estive em uma festa e estava tudo simplesmente perfeito! Buffet excelente, bebidas super geladas, atendimento ótimo e o bolo delicioso. As recepcionistas se importaram em mostrar o brinquedinho mais adequado para minha bebê!",
  },
  {
    id: 5,
    name: "Cristiane Pires",
    text: "Já fui em muitos buffets de Sorocaba, e sem medo de errar esse foi um dos mais maravilhosos! A gerente super educada, os monitores o tempo inteiro ajudando as crianças com carinho e cuidado. Um buffet sem errar em nada!",
  },
  {
    id: 6,
    name: "Monique Costa",
    text: "Fiz a festa da minha filha, gostei muito! Ótimo atendimento, buffet bem servido, equipe maravilhosa. A gerente super atenciosa! Os brinquedos top demais, até eu me diverti! Os monitores super educados e prestativos! Amei!",
  },
  {
    id: 7,
    name: "Kleberth Rodrigues",
    text: "Excelente lugar pra fazer uma festa! Excelentes profissionais de trabalho, salgados maravilhosos. Brinquedos tops que todas as crianças e adultos podem brincar. Recomendo 1000%!",
  },
];

const AUTOPLAY_INTERVAL = 10000;

export const TestimonialsSection = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const goToNext = useCallback(() => {
    setCurrentIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1));
  }, []);

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

  const goToSlide = (index: number) => {
    setCurrentIndex(index);
  };

  useEffect(() => {
    const timer = setInterval(goToNext, AUTOPLAY_INTERVAL);
    return () => clearInterval(timer);
  }, [goToNext]);

  return (
    <section className="py-16 md:py-24 bg-gradient-to-b from-background to-secondary/30">
      <div className="container mx-auto px-6">
        {/* Section Title */}
        <div className="text-center mb-12 animate-fade-in">
          <h2 className="font-display font-bold text-3xl md:text-4xl text-foreground mb-4">
            O que dizem sobre nós
          </h2>
          <p className="text-muted-foreground text-lg max-w-xl mx-auto">
            Veja o que as famílias que celebraram conosco têm a dizer
          </p>
        </div>

        {/* Testimonials Carousel */}
        <div className="relative max-w-5xl mx-auto">
          {/* Cards Container */}
          <div className="overflow-hidden">
            <div 
              className="flex transition-transform duration-500 ease-out"
              style={{ transform: `translateX(-${currentIndex * 100}%)` }}
            >
              {testimonials.map((testimonial) => (
                <div
                  key={testimonial.id}
                  className="w-full flex-shrink-0 px-4"
                >
                  <div className="bg-card rounded-3xl shadow-card p-8 md:p-10 mx-auto max-w-2xl border border-border/50">
                    {/* Stars */}
                    <div className="flex justify-center gap-1 mb-6">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="w-5 h-5 fill-primary text-primary" />
                      ))}
                    </div>
                    
                    {/* Text */}
                    <p className="text-lg md:text-xl text-foreground leading-relaxed text-center mb-8">
                      "{testimonial.text}"
                    </p>
                    
                    {/* Author */}
                    <div className="flex items-center justify-center gap-4">
                      <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
                        <span className="font-display font-bold text-primary text-lg">
                          {testimonial.name.charAt(0)}
                        </span>
                      </div>
                      <p className="font-display font-bold text-foreground text-lg">
                        {testimonial.name}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Navigation Arrows */}
          <button
            onClick={goToPrevious}
            className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 md:-translate-x-6 w-12 h-12 rounded-full bg-card hover:bg-secondary shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110 border border-border/50"
            aria-label="Depoimento anterior"
          >
            <ChevronLeft className="w-6 h-6 text-foreground" />
          </button>

          <button
            onClick={goToNext}
            className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 md:translate-x-6 w-12 h-12 rounded-full bg-card hover:bg-secondary shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110 border border-border/50"
            aria-label="Próximo depoimento"
          >
            <ChevronRight className="w-6 h-6 text-foreground" />
          </button>

          {/* Dots Indicator */}
          <div className="flex justify-center gap-2 mt-8">
            {testimonials.map((_, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
                  index === currentIndex
                    ? "bg-primary w-6"
                    : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
                }`}
                aria-label={`Ver depoimento ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
