'use client'

import team01 from '@/assets/images/team/team-image-01.webp'
import team02 from '@/assets/images/team/team-image-02.webp'
import team03 from '@/assets/images/team/team-image-03.webp'
import team04 from '@/assets/images/team/team-image-04.webp'
import { Icon } from '@iconify/react'
import Image, { StaticImageData } from 'next/image'
import Link from 'next/link'

type TeamMemberType = {
  id: number
  name: string
  role: string
  image: StaticImageData
  facebookUrl: string
  instagramUrl: string
}

const teamMembersData: TeamMemberType[] = [
  {
    id: 1,
    name: 'Liam Waters',
    role: 'Head of Eco Logistics',
    image: team01,
    facebookUrl: '#',
    instagramUrl: '#',
  },
  {
    id: 2,
    name: 'Sophia Meadows',
    role: 'Director of Innovation',
    image: team02,
    facebookUrl: '#',
    instagramUrl: '#',
  },
  {
    id: 3,
    name: 'Lucas Forest',
    role: 'Technology Specialist',
    image: team03,
    facebookUrl: '#',
    instagramUrl: '#',
  },
  {
    id: 4,
    name: 'Mia Brookfield',
    role: 'Engagement Manager',
    image: team04,
    facebookUrl: '#',
    instagramUrl: '#',
  },
]

const Team = () => {
  return (
    <section className="bg-[#1c1c1c] py-20 text-white lg:py-32.5">
      <div className="container text-center">
        <div className="mb-6 max-w-xl md:mx-auto lg:mb-17.5">
          <div className="border-default-500 mb-2.5 inline-flex rounded-full border px-3.75 py-1.25">
            <span className="text-default-400 text-sm font-normal tracking-tight uppercase">Our team</span>
          </div>
          <h2 className="text-3xl leading-tight font-medium text-white md:text-[40px]">
            The <span className="text-primary-1">team</span> powering green transport
          </h2>
        </div>

        <div className="grid grid-cols-1 gap-5 text-start sm:grid-cols-3 lg:grid-cols-4 lg:gap-7.5">
          {teamMembersData.map((item) => (
            <div key={item.id} className="bg-dark group relative overflow-hidden rounded-2xl bg-[url('/images/icons/team-icon.svg')] bg-[size:100%_100%] bg-center bg-no-repeat p-3.75 lg:p-7.5">
              <div className="team-image-wrap bg-default-800 mb-3.75 aspect-5/5 w-full overflow-hidden rounded-xl">
                <Image src={item.image} loading="eager" alt={item.name} className="team-image h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
              </div>
              <div className="team-info relative z-10 pe-10">
                <h3 className="team-title mb-1 text-lg font-medium text-white">{item.name}</h3>
                <div className="team-job-title text-default-400 text-sm font-normal">{item.role}</div>
              </div>
              <div className="team-social-wrap absolute inset-e-0 bottom-0 z-10 flex items-center justify-center gap-1.25 rounded-tl-2xl bg-[#1c1c1c] transition-all duration-300 lg:gap-2.5 lg:p-1.5">
                <Link href={item.facebookUrl} target="_blank" className="team-social-link w-inline-block text-primary-1 flex items-center justify-center p-1.5 transition-all duration-300 group-hover:opacity-100 lg:opacity-0">
                  <Icon icon="tabler:brand-facebook" className="size-4.5 duration-400 hover:-translate-y-1 lg:size-5.5" />
                </Link>
                <Link href={item.instagramUrl} target="_blank" className="team-social-link w-inline-block text-primary-1 flex items-center justify-center p-1.5 transition-all duration-300 group-hover:opacity-100 lg:opacity-0">
                  <Icon icon="tabler:brand-instagram" className="size-4.5 duration-400 hover:-translate-y-1 lg:size-5.5" />
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Team