'use client';

import { useState } from 'react';
import { ChevronLeft, ChevronRight, Quote } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

const testimonials = [
  {
    id: 1,
    name: 'Maria Santos',
    location: 'Luanda',
    rating: 5,
    comment:
      'Experiência incrível! O tour pela Serra da Leba foi simplesmente espetacular. A equipa da Viajes Angola cuidou de tudo com profissionalismo.',
    tour: 'Serra da Leba e Lubango',
    avatar: 'MS',
  },
  {
    id: 2,
    name: 'João Fernandes',
    location: 'Benguela',
    rating: 5,
    comment:
      'Reservei o pacote para as Quedas de Kalandula com a minha família. Tudo perfeitamente organizado, desde o transporte até ao guia turístico.',
    tour: 'Quedas de Kalandula',
    avatar: 'JF',
  },
  {
    id: 3,
    name: 'Ana Cristina',
    location: 'Lobito',
    rating: 5,
    comment:
      'O serviço de assessoria de visto foi excelente. Conseguiram o meu visto para Portugal em tempo recorde! Recomendo a todos.',
    tour: 'Visto Portugal',
    avatar: 'AC',
  },
  {
    id: 4,
    name: 'Pedro Miguel',
    location: 'Namibe',
    rating: 5,
    comment:
      'O safari no Parque da Kissama superou todas as minhas expectativas. Vi elefantes, palancas e muito mais. Guias muito conhecedores.',
    tour: 'Safari Kissama',
    avatar: 'PM',
  },
];

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

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

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

  return (
    <section className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900">O Que Dizem Nossos Clientes</h2>
          <p className="text-gray-600 mt-2">
            Milhares de viajantes satisfeitos escolhem a Sincetur Viagens e Turismo
          </p>
        </div>

        <div className="max-w-4xl mx-auto">
          <Card className="border-0 shadow-lg">
            <CardContent className="p-8">
              <Quote className="h-12 w-12 text-orange-200 mb-4" />
              <p className="text-xl text-gray-700 mb-6 leading-relaxed">
                "{testimonials[currentIndex].comment}"
              </p>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className="flex h-14 w-14 items-center justify-center rounded-full bg-orange-600 text-white font-semibold">
                    {testimonials[currentIndex].avatar}
                  </div>
                  <div>
                    <p className="font-semibold text-gray-900">
                      {testimonials[currentIndex].name}
                    </p>
                    <p className="text-sm text-gray-500">
                      {testimonials[currentIndex].location}
                    </p>
                    <p className="text-xs text-orange-600">
                      {testimonials[currentIndex].tour}
                    </p>
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    size="icon"
                    onClick={prevTestimonial}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="icon"
                    onClick={nextTestimonial}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

          <div className="flex justify-center gap-2 mt-6">
            {testimonials.map((_, index) => (
              <button
                key={index}
                className={`h-2 rounded-full transition-all ${
                  index === currentIndex
                    ? 'w-8 bg-orange-600'
                    : 'w-2 bg-gray-300'
                }`}
                onClick={() => setCurrentIndex(index)}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}