import { useState } from 'react'
import { testimonialsData, commonDescriptions } from '../../data/siteData'

export default function Testimonials() {
  const [activeSlide, setActiveSlide] = useState(0)

  // 创建两组轮播数据（与原始 HTML 一致）
  const slides = [
    [testimonialsData[0], testimonialsData[1], testimonialsData[2]],
    [testimonialsData[1], testimonialsData[2], testimonialsData[0]],
  ]

  return (
    <section className="py-20 bg-white" id="testimonials">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-8">
          <h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
            {commonDescriptions.testimonialsTitle}
          </h3>
          <p className="text-text my-3">
            {commonDescriptions.sectionDesc}
          </p>
        </div>

        {/* Carousel */}
        <div className="relative pb-12">
          {/* Slides */}
          <div className="overflow-hidden">
            <div
              className="flex transition-transform duration-500 ease-in-out"
              style={{ transform: `translateX(-${activeSlide * 100}%)` }}
            >
              {slides.map((slideGroup, slideIndex) => (
                <div
                  key={slideIndex}
                  className="w-full flex-shrink-0"
                >
                  <div className="grid md:grid-cols-3 gap-6 py-8 mt-3">
                    {slideGroup.map((testimonial, index) => (
                      <div
                        key={`${slideIndex}-${index}`}
                        className={`bg-white rounded-lg shadow-card p-6 ${
                          index === 2 ? 'md:col-start-2 lg:col-start-auto' : ''
                        }`}
                      >
                        <div className="text-center">
                          <img
                            src={testimonial.image}
                            alt={testimonial.name}
                            className="w-20 h-20 rounded-full mx-auto object-cover"
                          />
                          <h3 className="text-xl font-bold text-title mt-2 font-sans">
                            {testimonial.name}
                          </h3>
                          <p className="text-secondary mb-3">{testimonial.role}</p>
                          <p className="text-text">
                            {testimonial.content}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Indicators */}
          <div className="carousel-indicators">
            {slides.map((_, index) => (
              <button
                key={index}
                onClick={() => setActiveSlide(index)}
                className={activeSlide === index ? 'active' : ''}
                aria-label={`Go to slide ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
