"use client";

import Image from "next/image";
import clientImage1 from "../../public/assets/clients/mahmud.png";
import clientImage2 from "../../public/assets/clients/rfl.png";
import clientImage3 from "../../public/assets/clients/walton.png";
import clientImage4 from "../../public/assets/clients/mondol.png";
import clientImage5 from "../../public/assets/clients/noman.png";
import clientImage6 from "../../public/assets/clients/bashundhara.png";
import clientImage7 from "../../public/assets/clients/bpdp.png";
import clientImage8 from "../../public/assets/clients/standard.png";
import clientImage9 from "../../public/assets/clients/BMDA.jpg";
import clientImage10 from "../../public/assets/clients/BREB-Logo.png";
import clientImage11 from "../../public/assets/clients/DESCO.png";
import clientImage12 from "../../public/assets/clients/DPDC.png";
import clientImage13 from "../../public/assets/clients/Mahmud-Jeans-Ltd.jpg";
import clientImage14 from "../../public/assets/clients/NESCO.png";
import clientImage15 from "../../public/assets/clients/Orion_Group.png";
import clientImage16 from "../../public/assets/clients/PDB-Logo.png";
import clientImage17 from "../../public/assets/clients/PGCB.png";
import clientImage18 from "../../public/assets/clients/Partex.jpg";
import clientImage19 from "../../public/assets/clients/WZPDCL.png";

export default function Clients() {
  const logos = [
    clientImage1,
    clientImage2,
    clientImage3,
    clientImage4,
    clientImage5,
    clientImage6,
    clientImage7,
    clientImage8,
    clientImage9,
    clientImage10,
    clientImage11,
    clientImage12,
    clientImage13,
    clientImage14,
    clientImage15,
    clientImage16,
    clientImage17,
    clientImage18,
    clientImage19,
  ];

  return (
    <>
      <section className="w-full bg-white pt-10 pb-15">
        <div className="marquee-container">
          <div className="marquee">
            {/* First Set */}
            <div className="marquee-track">
              {logos.map((logo, index) => (
                <div
                  key={`first-${index}`}
                  className="flex-shrink-0 mx-10"
                >
                  <Image
                    src={logo}
                    alt={`Logo ${index + 1}`}
                    width={180}
                    height={80}
                    className="h-22 w-auto object-contain"
                  />
                </div>
              ))}
            </div>

            <div className="marquee-track">
              {logos.map((logo, index) => (
                <div
                  key={`second-${index}`}
                  className="flex-shrink-0 mx-10"
                >
                  <Image
                    src={logo}
                    alt={`Logo ${index + 1}`}
                    width={180}
                    height={80}
                    className="h-16 w-auto object-contain"
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}