'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: 'No Longer Blood in the Water',
    content: 'Using other sites to find a realtor ended with my phone ringing constantly. My number was sold off to multiple lists and it was so overwhelming. RE-Quest gave me confidence that my information was protected and I decided who I was in contact with.',
    author: 'Alice T.',
    role: '',
  },
  {
    id: '2',
    rating: 5,
    title: 'Finding Someone Who Worked with Me',
    content: 'RE-Quest let me narrow down my search terms, so I knew before I called that they had experience with the loan program I needed. I loved the in-app chat feature to talk to my short list before committing to a phone call.',
    author: 'Kevin R.',
    role: '',
  },
  {
    id: '3',
    rating: 5,
    title: '',
    content: 'The search terms on RE-Quest allowed me to show off my expertise as an agent. Now when leads reach out to me, they already have an idea of what kind of agent I am. Instant connection!',
    author: 'Riley S.',
    role: '',
  },
];

const defaultContent: TestimonialsContent = {
  title: 'Consumer Protection is Our Foundation',
  subtitle: 'Buying or selling your home is one of the largest decisions you will make in your life. Don\u2019t let yourself be chased by salesmen. Find the service provider that matches your unique needs.',
  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: '3 states', normalText: 'and counting' },
    { iconPath: '/assets/icons/properties-icon.svg', boldText: 'Hundreds of', normalText: 'Professionals' },
  ],
  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>
  );
}