import { reviewsData } from "../../data/homeData";

const ReviewsSection = () => {
  return (
    <section id="reviews" className="py-16 bg-white px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <h2 className="text-3xl font-bold text-center text-dark-900 mb-10">Recent Reviews</h2>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {reviewsData.map((review) => (
            <div key={review.id} className="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow">
              {/* Header */}
              <div className="flex justify-between items-start mb-4">
                <div className="flex items-center gap-3">
                  <img src={review.avatar} alt={review.name} className="w-10 h-10 rounded-full" />
                  <div>
                    <h4 className="font-bold text-dark-900 text-sm">{review.name}</h4>
                    <span className="text-xs text-dark-400">{review.date}</span>
                  </div>
                </div>
                <div className="flex items-center gap-1 bg-primary-500 text-white px-2 py-1 rounded-md text-xs font-bold">
                  <svg xmlns="http://www.w3.org/2000/svg" className="w-3 h-3 fill-current" viewBox="0 0 24 24"><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>
                  {review.rating}/5
                </div>
              </div>
              
              {/* Content */}
              <h5 className="font-bold text-sm text-dark-900 mb-2">{review.title}</h5>
              <p className="text-sm text-dark-700 leading-relaxed mb-3 line-clamp-4">
                {review.text}
              </p>
              
              {/* Footer */}
              <button className="text-primary-600 text-sm font-semibold flex items-center gap-1 hover:text-primary-700">
                Read More
                <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ReviewsSection;
