import { Icon } from '@iconify/react'
import Link from 'next/link'

type StatItemType = {
  id: number
  label: string
  value: string
}

type CaseStudyItemType = {
  id: number
  title: string
  image: string
  alt: string
  link: string
  imageWrapperClass: string
  imageClass: string
  cardClass: string
  statsClass: string
  stats: StatItemType[]
}

const caseStudiesItemsData: CaseStudyItemType[] = [
  {
    id: 1,
    title: 'EcoWare industries: Smart freight optimization',
    image: '/images/about/case-study-01.avif',
    alt: 'EcoWare industries image',
    link: '/case-study-detail',
    imageWrapperClass: 'rounded-xl',
    imageClass: 'group-hover:scale-104 transition-all duration-600',
    cardClass: 'shrink-0 w-full lg:max-w-200 bg-white rounded-2xl overflow-hidden flex flex-col justify-between transition-all duration-300 group',
    statsClass: 'border border-dashed border-default-300 grid lg:grid-cols-3 grid-cols-1 gap-x-7.5 gap-y-5 lg:divide-x divide-dashed divide-default-300 lg:divide-y-0 divide-y md:col-span-2 rounded-lg lg:p-5 p-3.75',
    stats: [
      { id: 1, label: 'Reduction in logistics costs', value: '200+' },
      { id: 2, label: 'Improved delivery efficiency', value: '15%' },
      { id: 3, label: 'Reduction in logistics costs', value: '200+' },
    ],
  },
  {
    id: 2,
    title: 'UrbanNest home: Greening last-mile delivery',
    image: '/images/about/case-study-02.avif',
    alt: 'UrbanNest home image',
    link: '/case-study-detail',
    imageWrapperClass: 'rounded-2xl',
    imageClass: 'group-hover:scale-104 transition-all duration-600',
    cardClass: 'shrink-0 w-full lg:max-w-200 bg-white rounded-2xl overflow-hidden flex flex-col justify-between transition-all duration-300 group',
    statsClass: 'border border-dashed border-default-300 grid lg:grid-cols-2 grid-cols-1 lg:gap-7.5 gap-5 lg:divide-x lg:divide-y-0 divide-y divide-dashed divide-default-300 md:col-span-2 rounded-lg lg:p-5 p-3.75',
    stats: [
      { id: 1, label: 'Average reduction in energy costs', value: '50%' },
      { id: 2, label: 'CO2 emissions reduced annually', value: '15%' },
    ],
  },
  {
    id: 3,
    title: 'GreenHarvest foods: Reducing supply chain emissions',
    image: '/images/about/case-study-03.avif',
    alt: 'GreenHarvest foods image',
    link: '/case-study-detail',
    imageWrapperClass: 'rounded-2xl',
    imageClass: 'group-hover:scale-104 transition-all duration-600',
    cardClass: 'shrink-0 w-full lg:max-w-200 bg-white rounded-2xl overflow-hidden flex flex-col justify-between transition-all duration-300 group',
    statsClass: 'border border-dashed border-default-300  grid lg:grid-cols-2 grid-cols-1 lg:gap-7.5 gap-5 lg:divide-x lg:divide-y-0 divide-y divide-dashed divide-default-300 md:col-span-2 rounded-lg lg:p-5 p-3.75',
    stats: [
      { id: 1, label: 'Saving for community supply', value: '1M' },
      { id: 2, label: 'Gallons of water saved', value: '300+' },
    ],
  },
  {
    id: 4,
    title: 'The restoration of a polluted waterway ecosystem',
    image: '/images/about/case-study-04.avif',
    alt: 'Waterway restoration image',
    link: '/case-study-detail',
    imageWrapperClass: 'rounded-2xl',
    imageClass: 'w-full h-full object-cover',
    cardClass: 'lg:snap-start shrink-0 w-full lg:max-w-200 bg-white rounded-2xl overflow-hidden flex flex-col justify-between transition-all duration-300',
    statsClass: 'border border-dashed border-default-300 grid lg:grid-cols-3 grid-cols-1 lg:gap-7.5 gap-5 lg:divide-x lg:divide-y-0 divide-y divide-dashed divide-default-300 md:col-span-2 rounded-lg lg:p-5 p-3.75',
    stats: [
      { id: 1, label: 'Hectares of deforested land restored', value: '10K' },
      { id: 2, label: '200+ reforestation projects', value: '25%' },
      { id: 3, label: 'Hectares of deforested land restored', value: '10K' },
    ],
  },
]

const CaseStudiesGrid = () => {
  return (
    <>
      <section className="py-20 md:py-25">
        <div className="container">
          <div className="mb-6 grid grid-cols-1 gap-7.5 md:mb-10 md:grid-cols-2 md:gap-10">
            {caseStudiesItemsData.map((item) => (
              <div key={item.id} className={item.cardClass}>
                <div className="grid grid-cols-1 items-stretch gap-5 p-3.75 md:grid-cols-2 md:gap-7.5 md:p-5 lg:px-7.5 lg:py-5.5">
                  <div className="flex flex-col gap-y-2.5 md:gap-y-5">
                    <h3 className="text-default-950 text-xl leading-snug font-medium lg:text-2xl">{item.title}</h3>
                    <Link href={item.link} className="text-default-500 hover:text-default-900 inline-flex items-center gap-1.5 font-normal transition-colors md:mt-0">
                      View detail
                    </Link>
                  </div>

                  <div className={`${item.imageWrapperClass} h-80 overflow-hidden md:h-39 lg:h-110`}>
                    <img src={item.image} loading="eager" alt={item.alt} className={item.imageClass.includes('object-cover') ? item.imageClass : `${item.imageClass} h-full w-full object-cover`} />
                  </div>

                  <div className={item.statsClass}>
                    {item.stats.map((stat) => (
                      <div key={stat.id} className="flex flex-col justify-between gap-y-2.5 lg:gap-y-5">
                        <span className="text-default-800 text-sm font-normal">{stat.label}</span>
                        <h4 className="text-default-500 mb-5 text-3xl font-medium lg:mb-0 lg:text-[40px]">{stat.value}</h4>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-12 grid w-full grid-cols-1 items-center gap-4 md:grid-cols-3">
            <div className="hidden md:block"></div>
            <div className="text-default-500 text-center text-sm font-normal md:text-base">1 / 2</div>
            <div className="w-full">
              <Link href="" className="bg-primary-1 hover:bg-default-800 hover:border-primary-1 text-default-800 flex items-center justify-center gap-1 rounded-full border border-dashed border-transparent px-5 py-3.5 text-nowrap transition-all duration-300 hover:text-white">
                Next
                <Icon icon="tabler:chevron-right"></Icon>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}

export default CaseStudiesGrid