'use client';

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

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

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 bg-[#c5d6d6]">
      <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>
  );
}