components/Testimonials.tsx

import React from 'react';
import { Star, Quote } from 'lucide-react';
import { Language } from '../types';
import { TRANSLATIONS } from '../constants/translations';

interface TestimonialsProps {
  language: Language;
}

export const Testimonials: React.FC<TestimonialsProps> = ({ language }) => {
  const t = TRANSLATIONS[language];

  const reviews = [
    {
      text: t.review1,
      user: t.review1User,
      initials: "AT",
      color: "bg-blue-100 text-blue-600"
    },
    {
      text: t.review2,
      user: t.review2User,
      initials: "Z",
      color: "bg-rose-100 text-rose-600"
    },
    {
      text: t.review3,
      user: t.review3User,
      initials: "EW",
      color: "bg-amber-100 text-amber-600"
    }
  ];

  return (
    <section className="py-12 bg-gray-50 border-t border-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="text-center mb-10">
          <h2 className="text-2xl sm:text-3xl font-serif font-bold text-gray-900 mb-2">
            {t.reviewsTitle}
          </h2>
          <div className="flex items-center justify-center gap-1 text-yellow-400 mb-2">
             {[1,2,3,4,5].map(i => <Star key={i} className="w-5 h-5 fill-current" />)}
          </div>
          <p className="text-gray-500">{t.reviewsDesc}</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {reviews.map((review, idx) => (
            <div key={idx} className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 relative hover:-translate-y-1 transition-transform duration-300">
              <Quote className="absolute top-6 right-6 w-8 h-8 text-gray-100" />
              <div className="flex items-center gap-1 text-yellow-400 mb-4">
                 {[1,2,3,4,5].map(i => <Star key={i} className="w-4 h-4 fill-current" />)}
              </div>
              <p className="text-gray-600 text-sm italic mb-6 leading-relaxed relative z-10">
                "{review.text}"
              </p>
              <div className="flex items-center gap-3">
                <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm ${review.color}`}>
                  {review.initials}
                </div>
                <div>
                  <h4 className="font-bold text-gray-900 text-sm">{review.user}</h4>
                  <p className="text-xs text-gray-400">Verified Customer</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};