import React, { useState } from 'react';

interface Testimonial {
  id: number;
  name: string;
  role: string;
  company: string;
  image: string;
  quote: string;
  rating: number;
}

const testimonials: Testimonial[] = [
  {
    id: 1,
    name: 'María García',
    role: 'CEO',
    company: 'TechStartup',
    image: '/images/testimonials/user1.jpg',
    quote: 'AvanzaCast transformó completamente la forma en que hacemos webinars. La calidad es excepcional y es súper fácil de usar.',
    rating: 5
  },
  {
    id: 2,
    name: 'Carlos Rodríguez',
    role: 'Content Creator',
    company: 'YouTube',
    image: '/images/testimonials/user2.jpg',
    quote: 'Llevo más de 2 años usando AvanzaCast para mis streams. No cambiaría a otra plataforma por nada del mundo.',
    rating: 5
  },
  {
    id: 3,
    name: 'Ana Martínez',
    role: 'Marketing Director',
    company: 'GlobalCorp',
    image: '/images/testimonials/user3.jpg',
    quote: 'La capacidad de transmitir simultáneamente a múltiples plataformas nos ha ayudado a triplicar nuestro alcance.',
    rating: 5
  },
  {
    id: 4,
    name: 'Juan Pérez',
    role: 'Podcaster',
    company: 'El Podcast Diario',
    image: '/images/testimonials/user4.jpg',
    quote: 'La calidad de audio es impresionante. Mis invitados siempre comentan lo profesional que se ve todo.',
    rating: 5
  }
];

const NewTestimonialsCarousel: React.FC = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

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

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

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

  return (
    <section className="py-24 bg-gradient-to-b from-blue-50 to-white">
      <div className="max-w-[1280px] mx-auto px-5">
        {/* Header */}
        <div className="text-center mb-16">
          <p className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-4">
            Testimonios
          </p>
          <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
            60,000,000+ transmisiones realizadas
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Miles de creadores confían en AvanzaCast para sus transmisiones
          </p>
        </div>

        {/* Carrusel */}
        <div className="relative max-w-4xl mx-auto">
          {/* Flecha izquierda */}
          <button
            onClick={prevSlide}
            className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-12 z-10 bg-white border-2 border-gray-200 rounded-full p-3 hover:bg-gray-50 hover:scale-105 transition-all shadow-lg hidden lg:block"
            aria-label="Anterior testimonio"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </button>

          {/* Testimonial Card */}
          <div className="bg-white rounded-2xl shadow-xl p-12 min-h-[400px] flex flex-col justify-between">
            {/* Rating Stars */}
            <div className="flex gap-1 mb-6">
              {[...Array(testimonials[currentIndex].rating)].map((_, i) => (
                <svg key={i} width="24" height="24" viewBox="0 0 24 24" fill="#FFD700" stroke="#FFD700">
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                </svg>
              ))}
            </div>

            {/* Quote */}
            <blockquote className="text-2xl text-gray-700 leading-relaxed mb-8 flex-grow">
              "{testimonials[currentIndex].quote}"
            </blockquote>

            {/* Author Info */}
            <div className="flex items-center gap-4">
              <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-400 to-purple-600 flex items-center justify-center text-white text-2xl font-bold">
                {testimonials[currentIndex].name.charAt(0)}
              </div>
              <div>
                <p className="font-bold text-gray-900 text-lg">
                  {testimonials[currentIndex].name}
                </p>
                <p className="text-gray-600">
                  {testimonials[currentIndex].role} at {testimonials[currentIndex].company}
                </p>
              </div>
            </div>
          </div>

          {/* Flecha derecha */}
          <button
            onClick={nextSlide}
            className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-12 z-10 bg-white border-2 border-gray-200 rounded-full p-3 hover:bg-gray-50 hover:scale-105 transition-all shadow-lg hidden lg:block"
            aria-label="Siguiente testimonio"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>

          {/* Pagination Dots */}
          <div className="flex justify-center gap-3 mt-8">
            {testimonials.map((_, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={`w-3 h-3 rounded-full transition-all ${
                  index === currentIndex 
                    ? 'bg-blue-600 w-8' 
                    : 'bg-gray-300 hover:bg-gray-400'
                }`}
                aria-label={`Ir al testimonio ${index + 1}`}
              />
            ))}
          </div>
        </div>

        {/* Mobile Navigation */}
        <div className="flex justify-center gap-4 mt-8 lg:hidden">
          <button
            onClick={prevSlide}
            className="bg-white border-2 border-gray-200 rounded-full p-3 hover:bg-gray-50 transition-all shadow"
            aria-label="Anterior"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </button>
          <button
            onClick={nextSlide}
            className="bg-white border-2 border-gray-200 rounded-full p-3 hover:bg-gray-50 transition-all shadow"
            aria-label="Siguiente"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
};

export default NewTestimonialsCarousel;
