'use client'
import Image from 'next/image'
import { useEffect, useState } from 'react'

const images = [
  '/images/people/abdulrahman_elawady/abdulrahman_elawady.jpg',
  '/images/people/adnan_fatayerji/adnan_fatayerji.jpg',
  '/images/people/ahmed_hanafy/ahmed_hanafy.jpg',
  '/images/people/ahmed_harby/ahmed_harby.jpg',
  '/images/people/ahmed_thabet/ahmed_thabet.jpg',
  '/images/people/alaa_mahmoud/alaa_mahmoud.jpg',
  '/images/people/alexandre_hannelas/alexandre_hannelas.jpeg',
  '/images/people/ashraf_fouda/ashraf_fouda.jpg',
  '/images/people/atef_nazmy/atef_nazmy.jpg',
  '/images/people/ehab_hassan/ehab_hassan.jpg',
  '/images/people/eslam_nawara/eslam_nawara.jpg',
  '/images/people/evon_yacoub/evon_yacoub.jpg',
  '/images/people/gregory_flipo/gregory_flipo.jpg',
  '/images/people/jan_de_landtsheer/jan_de_landtsheer.jpeg',
  '/images/people/karoline_zizka/karoline_zizka.jpeg',
  '/images/people/khaled_youssef/khaled.jpg',
  '/images/people/kristof_de_spiegeleer/kristof_de_spiegeleer.jpeg',
  '/images/people/mahendra_varma/mahendra_varma.jpg',
  '/images/people/mahmoud_emad/mahmoud_emad.jpg',
  '/images/people/marion_ravarino/marion_ravarino.jpeg',
  '/images/people/mik_perreault/mik_perreault.jpg',
  '/images/people/peter_nashaat/peter_nashaat.jpg',
  '/images/people/sacha_obeegadoo/sacha_obeegadoo.jpg',
  '/images/people/sabrina_sadik/sabrina_sadik.jpg',
  '/images/people/sam_taggart/sam_taggart.jpg',
  '/images/people/samar_adel/samar_adel.jpg',
  '/images/people/sameh_abouelsaad/sameh_abouelsaad.jpg',
  '/images/people/samir_hosny/samir_hosny.jpg',
  '/images/people/scott_yeager/scott_yeager.jpg',
  '/images/people/timur_gordon/timur_gordon.jpg',
]

export function Gallery() {
  const [shuffledImages, setShuffledImages] = useState(images)
  const [activeIndex, setActiveIndex] = useState<number | null>(null)

  useEffect(() => {
    setShuffledImages([...images].sort(() => Math.random() - 0.5))
  }, [])

  useEffect(() => {
    let timeout: NodeJS.Timeout

    const loop = () => {
      // choose a random image index
      const randomIndex = Math.floor(Math.random() * shuffledImages.length)
      setActiveIndex(randomIndex)

      // wait a bit, then trigger next one
      timeout = setTimeout(loop, 1000 + Math.random() * 2000) // every 1–3s
    }

    loop()
    return () => clearTimeout(timeout)
  }, [shuffledImages])

  return (
    <div className="relative w-full lg:absolute lg:inset-y-0 lg:left-0 lg:w-1/2">
      <div
        className="
          grid grid-cols-6
          lg:gap-x-[4px]
          lg:gap-y-[4px]
          gap-x-[1px]
          gap-y-[1px]
          p-2 lg:p-6
        "
      >
        {shuffledImages.map((src, index) => (
          <div
            key={index}
            className={`
              relative aspect-square
              w-[50px] h-[50px]
              lg:w-auto lg:h-auto
              transition duration-20 ease-in-out
              ${activeIndex === index ? 'grayscale-0' : 'grayscale'}
            `}
          >
            <Image
              src={src}
              alt={`Team member ${index + 1}`}
              fill
              className="object-cover"
              sizes="(max-width: 400px) 50px, (max-width: 1024px) 80px, 20vw"
            />
          </div>
        ))}
      </div>
    </div>
  )
}