// Server Component – No "use client" needed
import { getTranslations } from "next-intl/server";
import {
  siAstro,
  siBigcommerce,
  siContentful,
  siNextdotjs,
  siPayloadcms,
  siPaypal,
  siPrisma,
  siPrismic,
  siRemix,
  siSanity,
  siShopify,
  siStripe,
} from "simple-icons/icons";

interface Tech {
  color: string;
  name: string;
  path: string;
}

const technologies: Tech[] = [
  { name: "Next.js", color: "#fff", path: siNextdotjs.path },
  { name: "Shopify", color: "#7AB55C", path: siShopify.path },
  { name: "Contentful", color: "#2478CC", path: siContentful.path },
  { name: "Prismic", color: "#5163BA", path: siPrismic.path },
  { name: "Sanity", color: "#F36458", path: siSanity.path },
  { name: "Stripe", color: "#635BFF", path: siStripe.path },
  { name: "PayPal", color: "#00457C", path: siPaypal.path },
  { name: "BigCommerce", color: "#121118", path: siBigcommerce.path },
  { name: "Astro", color: "#FF5D01", path: siAstro.path },
  { name: "Remix", color: "#fff", path: siRemix.path },
  { name: "Prisma", color: "#2D3748", path: siPrisma.path },
  { name: "Payload CMS", color: "#fff", path: siPayloadcms.path },
];

export async function TechCloud() {
  const t = await getTranslations("techCloud");

  return (
    <section
      aria-label={t("heading")}
      className="py-12 sm:py-24 md:py-32"
      id="tech-cloud"
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="py-4 text-center font-semibold text-gray-100 text-xl uppercase tracking-wider">
          {t("heading")}
        </h2>

        <div className="relative mt-6">
          <div className="marquee-container">
            <div className="marquee-content">
              {/* First set */}
              {technologies.map((tech) => (
                <div
                  className="mx-3 flex flex-col items-center justify-center sm:mx-6 md:mx-8"
                  key={`tech-${tech.name}`}
                >
                  <div
                    aria-hidden="true"
                    className="my-4 h-10 w-10 sm:h-14 sm:w-14 md:h-20 md:w-20"
                    style={{ color: tech.color }}
                  >
                    <svg
                      aria-label={tech.name}
                      className="h-full w-full"
                      fill="currentColor"
                      role="img"
                      viewBox="0 0 24 24"
                    >
                      <path d={tech.path} />
                    </svg>
                  </div>
                  <span className="mt-2 font-medium text-gray-100 text-xs">
                    {tech.name}
                  </span>
                </div>
              ))}

              {/* Duplicate set for seamless loop */}
              {technologies.map((tech) => (
                <div
                  aria-hidden="true"
                  className="mx-3 flex flex-col items-center justify-center sm:mx-6 md:mx-8"
                  key={`tech-duplicate-${tech.name}`}
                >
                  <div
                    className="my-4 h-10 w-10 sm:h-14 sm:w-14 md:h-20 md:w-20"
                    style={{ color: tech.color }}
                  >
                    <svg
                      aria-hidden="true"
                      className="h-full w-full"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d={tech.path} />
                    </svg>
                  </div>
                  <span className="mt-2 font-medium text-gray-100 text-xs">
                    {tech.name}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}