'use client';

import Image from 'next/image';

const testimonials = [
  {
    id: '1',
    rating: 5,
    title: 'I have been working with Lorem ..',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
    author: 'Conor Kenney',
    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 commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
    author: 'Conor Kenney',
    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 commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
    author: 'Conor Kenney',
    role: 'Chief Operations Officer',
  },
];

interface TestimonialCardProps {
  title: string;
  content: string;
  author: string;
  role: string;
  rating: number;
}

function TestimonialCard({ title, content, author, role, rating }: TestimonialCardProps) {
  return (
    <div className="bg-white rounded-[15px] p-6 shadow-[0px_4px_20px_rgba(0,0,0,0.08)]">
      {/* Quote Icon */}
      <div className="mb-4">
        <Image
          src="/assets/icons/quote-marks.svg"
          alt="Quote"
          width={23}
          height={16}
        />
      </div>

      {/* Title */}
      <h3 className="font-fractul font-bold text-[14px] leading-normal text-[#00293d] mb-3">
        {title}
      </h3>

      {/* Content */}
      <p className="font-serif font-normal text-[14px] leading-normal text-[#00293d] mb-4">
        {content}
      </p>

      {/* Star Rating */}
      <div className="flex gap-1 mb-3">
        {[...Array(rating)].map((_, i) => (
          <Image
            key={i}
            src="/assets/icons/star-yellow.svg"
            alt="Star"
            width={18}
            height={17}
          />
        ))}
      </div>

      {/* Author Info */}
      <div>
        <p className="font-serif font-medium text-[14px] leading-normal text-[#00293d]">
          {author}
        </p>
        <p className="font-serif font-semibold text-[14px] leading-normal text-[#00293d]">
          {role}
        </p>
      </div>
    </div>
  );
}

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

        {/* Stats Section */}
        <div className="flex justify-center items-center gap-8 md:gap-12 mb-10">
          {/* Cities Stat */}
          <div className="flex items-center gap-3">
            <Image
              src="/assets/icons/cities-icon.svg"
              alt="Cities"
              width={27}
              height={27}
            />
            <div>
              <span className="font-serif font-bold text-[14px] leading-normal text-[#00293d]">
                25+ Cities &
              </span>
              <br />
              <span className="font-serif font-normal text-[14px] leading-normal text-[#00293d]">
                neighborhoods served
              </span>
            </div>
          </div>

          {/* Properties Stat */}
          <div className="flex items-center gap-3">
            <Image
              src="/assets/icons/properties-icon.svg"
              alt="Properties"
              width={25}
              height={24}
            />
            <div>
              <span className="font-serif font-bold text-[14px] leading-normal text-[#00293d]">
                1,000+ Properties
              </span>
              <br />
              <span className="font-serif font-normal text-[14px] leading-normal text-[#00293d]">
                bought and sold for our clients.
              </span>
            </div>
          </div>
        </div>

        {/* Testimonials Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {testimonials.map((testimonial) => (
            <TestimonialCard
              key={testimonial.id}
              title={testimonial.title}
              content={testimonial.content}
              author={testimonial.author}
              role={testimonial.role}
              rating={testimonial.rating}
            />
          ))}
        </div>
      </div>
    </section>
  );
}