'use client';

const testimonials = [
  {
    id: '1',
    rating: 5,
    title: 'I have been working with Lorem...',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in nulla lorem. Fusce dui diam, auctor nec ligula vel. Congue pharetra leo. Praesent scelerisque diam, sed lacinia mauris commodo in. Fusce dui diam, auctor nec.',
    author: 'Caren Robert',
    role: 'Chief Operations Officer',
  },
  {
    id: '2',
    rating: 5,
    title: 'I have been working with Lorem...',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in nulla lorem. Fusce dui diam, auctor nec ligula vel. Congue pharetra leo. Praesent scelerisque diam, sed lacinia mauris commodo in. Fusce dui diam, auctor nec.',
    author: 'Caren Robert',
    role: 'Chief Operations Officer',
  },
  {
    id: '3',
    rating: 5,
    title: 'I have been working with Lorem...',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in nulla lorem. Fusce dui diam, auctor nec ligula vel. Congue pharetra leo. Praesent scelerisque diam, sed lacinia mauris commodo in. Fusce dui diam, auctor nec.',
    author: 'Caren Robert',
    role: 'Chief Operations Officer',
  },
];

function StarRating({ rating }: { rating: number }) {
  return (
    <div className="flex gap-1">
      {[...Array(5)].map((_, i) => (
        <svg
          key={i}
          className={`w-5 h-5 ${i < rating ? 'text-[#f5a623]' : 'text-gray-300'}`}
          fill="currentColor"
          viewBox="0 0 20 20"
        >
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      ))}
    </div>
  );
}

export function TestimonialsSection() {
  return (
    <section className="py-16 md:py-24 bg-[#f5f9f8]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-[#00293d] mb-4">
            Our Clients&apos; Trust Is Our Foundation
          </h2>
          <p className="text-gray-600 max-w-2xl mx-auto mb-6">
            We help buyers, sellers, and investors close successful real estate deals with confidence in every transaction.
          </p>
          <p className="text-gray-600">
            Clients rate our real estate services an average of 4.8 on average, based on recent client reviews.
          </p>
        </div>

        {/* Rating Summary */}
        <div className="flex justify-center items-center gap-8 mb-12">
          <div className="flex items-center gap-2">
            <span className="text-3xl font-bold text-[#00293d]">4.8 / 5 Stars</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-gray-600">1,200+ Happy Clients</span>
          </div>
        </div>

        {/* Testimonials Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((testimonial) => (
            <div
              key={testimonial.id}
              className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow"
            >
              {/* Rating */}
              <div className="mb-4">
                <StarRating rating={testimonial.rating} />
              </div>

              {/* Title */}
              <h3 className="font-bold text-[#00293d] mb-3">{testimonial.title}</h3>

              {/* Content */}
              <p className="text-gray-600 text-sm mb-6 leading-relaxed">
                {testimonial.content}
              </p>

              {/* Author */}
              <div className="border-t pt-4">
                <p className="font-semibold text-[#00293d]">{testimonial.author}</p>
                <p className="text-sm text-gray-500">{testimonial.role}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}