"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import { useTranslation } from "@/lib/i18n/context";
import { SectionHeading } from "@/components/ui/section-heading";

const images = [
  "/WhatsApp Image 2025-07-21 at 15.29.43 (1).jpeg",
  "/WhatsApp Image 2025-07-21 at 15.29.43.jpeg",
  "/WhatsApp Image 2025-07-21 at 15.29.44 (1).jpeg",
  "/WhatsApp Image 2025-07-21 at 15.29.44.jpeg",
  "/WhatsApp Image 2025-07-21 at 15.30.20.jpeg",
  "/WhatsApp Image 2025-07-21 at 15.30.21 (1).jpeg",
  "/WhatsApp Image 2025-07-21 at 15.30.21 (2).jpeg",
  "/WhatsApp Image 2025-07-21 at 15.30.21.jpeg",
  "/WhatsApp Image 2025-07-21 at 15.31.42.jpeg",
  "/WhatsApp Image 2025-07-21 at 15.31.43 (2).jpeg",
  "/WhatsApp Image 2025-07-21 at 15.31.43.jpeg",
  "/WhatsApp Image 2025-07-21 at 15.31.44.jpeg",
];

export function IraqCampaignGallery() {
  const { dir } = useTranslation();

  // Duplicate images for infinite loop
  const duplicatedImages = [...images, ...images];

  return (
    <section className="section-padding bg-white overflow-hidden" dir={dir}>
      <div className="max-w-7xl mx-auto mb-12">
        <SectionHeading
          tag={dir === "rtl" ? "يونيبام في العراق" : "UNIPAM in Iraq"}
          title={dir === "rtl" ? "صور من حملاتنا الاعلانية" : "Images from Our Advertising Campaigns"}
          subtitle={
            dir === "rtl"
              ? "مقتطفات من حملاتنا الإعلانية والترويجية لتعزيز تواجدنا وخدمة عملائنا بشكل أفضل."
              : "Glimpses from our advertising and promotional campaigns to strengthen our presence and serve our customers better."
          }
        />
      </div>

      <div className="relative flex overflow-x-hidden group">
        <motion.div
          className="flex whitespace-nowrap"
          animate={{
            x: dir === "rtl" ? [0, "50%"] : [0, "-50%"],
          }}
          transition={{
            x: {
              repeat: Infinity,
              repeatType: "loop",
              duration: 35,
              ease: "linear",
            },
          }}
        >
          {duplicatedImages.map((src, index) => (
            <div
              key={index}
              className="inline-block px-3 w-[240px] md:w-[320px] h-[320px] md:h-[420px]"
            >
              <div className="relative w-full h-full rounded-2xl overflow-hidden shadow-lg border-2 border-white group-hover:scale-105 transition-transform duration-500">
                <Image
                  src={src}
                  alt={`Iraq Campaign Image ${index + 1}`}
                  fill
                  className="object-cover"
                />
              </div>
            </div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}