'use client'

import testimonialBg from '@/assets/images/about/testimonial-bg.webp'
import testimonialShape from '@/assets/images/icons/testimonial-shape.svg'
import testimonial01 from '@/assets/images/team/testimonial-image-01.webp'
import testimonial02 from '@/assets/images/team/testimonial-image-02.webp'
import testimonial03 from '@/assets/images/team/testimonial-image-03.webp'
import testimonial04 from '@/assets/images/team/testimonial-image-04.webp'
import Image, { StaticImageData } from 'next/image'

type TestimonialType = {
  id: number
  name: string
  role: string
  desc: string
  image?: StaticImageData
}

const testimonialsData: TestimonialType[] = [
  {
    id: 1,
    name: 'Emma Carter',
    role: 'Logistics Manager',
    desc: 'Eco-Supply helped us cut logistics emissions while ensuring timely deliveries. A true sustainability partner.',
    image: testimonial01,
  },
  {
    id: 2,
    name: 'Ethan Wilson',
    role: 'Supply Head',
    desc: 'Highly recommend it for businesses serious about going green.',
    image: testimonial02,
  },
  {
    id: 3,
    name: 'James Turner',
    role: 'Green Advisor',
    desc: 'Thanks to Eco-Supply Transportation, our last-mile deliveries are now 100% emission-free.',
    image: testimonial03,
  },
  {
    id: 4,
    name: 'Olivia Brown',
    role: 'Enviro Lead',
    desc: 'It’s great to see a logistics partner that shares our values for a cleaner planet.',
  },
  {
    id: 5,
    name: 'David Lee',
    role: 'Supply Chain Head',
    desc: 'Efficiency and sustainability in one seamless service.',
    image: testimonial04,
  },
]

const Testimonials = () => {
  return (
    <section className="relative overflow-hidden bg-cover bg-center bg-no-repeat py-20 md:py-25 lg:py-32.5" style={{ backgroundImage: `url(${testimonialBg.src})` }}>
      <div className="bg-dark/60 absolute inset-0 z-0"></div>

      <div className="relative z-10 container text-center">
        <div className="mx-auto mb-6 lg:mb-17.5">
          <h2 className="mb-2.5 text-3xl leading-tight font-medium text-white md:text-[40px] lg:mb-4">
            What our eco-supply <span className="text-primary-1">clients say</span>
          </h2>
          <p className="mx-auto max-w-sm text-base font-normal text-white/80">Trusted by forward-thinking businesses for sustainable logistics excellence</p>
        </div>

        <div className="grid grid-cols-1 items-stretch gap-5 text-start md:grid-cols-3 lg:grid-cols-5 lg:gap-6">
          {testimonialsData.map((item, index) => (
            <div key={item.id} className="relative rounded-xl bg-white p-3.75 md:p-5">
              <div className="flex h-full flex-col justify-between gap-y-7.5 md:gap-y-10 lg:gap-y-28.5">
                <div className={`flex items-center gap-3.75 ${!item.image ? 'mb-5' : ''}`}>
                  {item.image && <Image src={item.image} loading="lazy" alt={item.name} className="size-11.5 rounded-full object-cover" />}
                  <div className="flex flex-col gap-y-0.75">
                    <h3 className="text-default-950 text-lg font-medium">{item.name}</h3>
                    <span className="text-md text-default-500 font-normal">{item.role}</span>
                  </div>
                </div>
                <p className="text-default-500 text-base leading-relaxed font-normal">{item.desc}</p>
              </div>
              {index < testimonialsData.length - 1 && <Image src={testimonialShape} loading="eager" alt="Connector" className="absolute -inset-e-6.5 top-1/2 z-20 hidden h-12 w-7 -translate-y-1/2 lg:block" />}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Testimonials