const CDN =
  "https://spcdn.shortpixel.ai/spio/ret_img,q_cdnize,to_webp,s_webp/app.groupbuyservices.com/wp-content/uploads/2025/01";

const reviewImages = ["3.png", "11.png", "2.png", "12.png", "5.png", "7.png"];

function Column({ order, duration }: { order: string[]; duration: string }) {
  const doubled = [...order, ...order];
  return (
    <div className="relative h-[480px] overflow-hidden">
      <div className="animate-marquee-y flex flex-col gap-4" style={{ animationDuration: duration }}>
        {doubled.map((img, i) => (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            key={i}
            src={`${CDN}/${img}`}
            alt="Customer review"
            className="w-full rounded-2xl border border-slate-100 shadow-sm"
            loading="lazy"
          />
        ))}
      </div>
    </div>
  );
}

export default function ReviewsWall() {
  return (
    <div className="marquee-pause relative grid grid-cols-2 gap-4 sm:grid-cols-3">
      <Column order={reviewImages} duration="32s" />
      <Column order={[...reviewImages].reverse()} duration="40s" />
      <div className="hidden sm:block">
        <Column order={[reviewImages[4], reviewImages[0], reviewImages[2], reviewImages[5], reviewImages[1], reviewImages[3]]} duration="36s" />
      </div>
      <div className="pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white to-transparent" />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white to-transparent" />
    </div>
  );
}