"use client";

import Image from "next/image";
import { Container } from "@/components/common/Container";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";

const PARTNERS = [
  "Standard Bank",
  "BRAC Bank",
  "M-Pesa",
  "GCash",
  "bKash",
  "OXXO",
  "Bancomer",
  "Mashreq",
];

const PARTNER_LOGOS = PARTNERS.map((name, i) => {
  const n = i + 1;
  return {
    name,
    dark: `/partner%20logo%20dark/${n}.png`,
    light: `/partner%20logo%20light/Dummy%20Logo-${String(n).padStart(2, "0")}.png`,
  };
});

export function LogoCloud() {
  const { t } = useTranslation();

  return (
    <section
      className="border-b border-slate-200/60 bg-white py-16 dark:border-white/[0.06] dark:bg-slate-950 sm:py-20"
      aria-label="Partner logos"
    >
      <Container>
        <Reveal className="flex justify-center">
          <span className="text-xs font-bold uppercase tracking-wider text-brand-700 dark:text-brand-300">
            {t("logoCloud.heading")}
          </span>
        </Reveal>

        <Reveal delay={0.1} className="relative mt-10 overflow-hidden">
          <div className="group flex w-max items-center gap-12 animate-marquee group-hover:[animation-play-state:paused] sm:gap-16">
            {[...PARTNER_LOGOS, ...PARTNER_LOGOS].map((p, i) => (
              <PartnerMark key={`${p.name}-${i}`} {...p} />
            ))}
          </div>
          <div
            aria-hidden
            className="pointer-events-none absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-white to-transparent dark:from-slate-950"
          />
          <div
            aria-hidden
            className="pointer-events-none absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-white to-transparent dark:from-slate-950"
          />
        </Reveal>
      </Container>
    </section>
  );
}

function PartnerMark({ name, dark, light }: { name: string; dark: string; light: string }) {
  return (
    <span className="inline-flex h-8 w-28 shrink-0 items-center justify-center opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0 sm:h-9 sm:w-32">
      <Image
        src={light}
        alt={name}
        width={128}
        height={36}
        unoptimized
        className="block h-full w-full object-contain dark:hidden"
      />
      <Image
        src={dark}
        alt={name}
        width={128}
        height={36}
        unoptimized
        className="hidden h-full w-full object-contain dark:block"
      />
    </span>
  );
}