frontend/src/components/home/TestimonialsSection.tsx

'use client';

import Image from 'next/image';
import type { TestimonialsContent } from '@/types/cms';


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>
  );
}

const defaultTestimonials = [
  {
    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.',
    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.',
    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.',
    author: 'Conor Kenney',
    role: 'Chief Operations Officer',
  },
];

const defaultContent: TestimonialsContent = {
  title: "Our Clients' Trust Is Our Foundation",
  subtitle: 'We help buyers, sellers, and investors close successful real estate deals with confidence in every transaction.',
  ratingInfo: 'Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.',
  stats: [
    { iconPath: '/assets/icons/cities-icon.svg', boldText: '25+ Cities &', normalText: 'neighborhoods served' },
    { iconPath: '/assets/icons/properties-icon.svg', boldText: '1,000+ Properties', normalText: 'bought and sold for our clients.' },
  ],
  testimonials: defaultTestimonials,
};

export function TestimonialsSection({ content }: { content?: TestimonialsContent }) {
  const data = content ?? defaultContent;

  return (
    <section className="py-12 md:py-16">
      <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">
            {data.title}
          </h2>
          <p className="font-fractul font-medium text-[14px] leading-normal text-[#00293d] mb-2">
            {data.subtitle}
          </p>
          <p className="font-fractul font-medium text-[14px] leading-normal text-[#00293d]">
            {data.ratingInfo}
          </p>
        </div>

        {/* Stats Section */}
        <div className="flex justify-center items-center gap-8 md:gap-12 mb-10">
          {data.stats.map((stat, index) => (
            <div key={index} className="flex items-center gap-3">
              <Image
                src={stat.iconPath}
                alt=""
                width={27}
                height={27}
              />
              <div>
                <span className="font-serif font-bold text-[14px] leading-normal text-[#00293d]">
                  {stat.boldText}
                </span>
                <br />
                <span className="font-serif font-normal text-[14px] leading-normal text-[#00293d]">
                  {stat.normalText}
                </span>
              </div>
            </div>
          ))}
        </div>

        {/* Divider Line */}
        <div className="w-full max-w-5xl mx-auto mb-10">
          <div className="h-px bg-[#00293d]/20"></div>
        </div>

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