<script setup lang="ts">
import type { ClientLogo } from "~/types/Clients";
const { locale } = useI18n();
const props = defineProps<{ clients: ClientLogo[] }>();

const marqueeDirection = computed(() => {
  return locale.value === "ar" ? "marquee-rtl" : "marquee-ltr";
});
</script>

<template>
  <section
    id="clients"
    class="overflow-hidden pt-8"
    aria-labelledby="clients-heading"
  >
    <div class="sr-only">
      <h2 id="clients-heading">{{ $t("homeHero.clientsTilte") }}</h2>
      <p>
        {{ $t("homeHero.clientsDesc") }}
      </p>
    </div>
    <div class="flex h-[4rem] items-center md:h-[5rem] lg:h-[6rem]">
      <div class="container mx-auto px-4">
        <div
          class="marquee-container"
          role="img"
          aria-label="Scrolling logos of our trusted client companies"
        >
          <div
            class="marquee-content"
            :class="marqueeDirection"
            :style="{ '--logo-count': props.clients.length }"
          >
            <!-- First set -->
            <div
              v-for="(logo, index) in props.clients"
              :key="`logo-set-1-${index}`"
              class="logo-item"
            >
              <!-- <NuxtLinkLocale :to="`/our-projects/${logo.slug}`" class="flex"> -->
              <NuxtImg
                :src="logo.logo"
                :width="126"
                :height="64"
                :alt="logo.title"
                class="h-16 w-auto object-contain opacity-60 transition-opacity duration-300 hover:opacity-100 dark:hidden"
              />
              <NuxtImg
                :src="logo.dark_logo"
                :width="126"
                :height="64"
                :alt="logo.title"
                class="hidden h-16 w-auto object-contain opacity-60 transition-opacity duration-300 hover:opacity-100 dark:block"
              />
              <!-- </NuxtLinkLocale> -->
            </div>
            <!-- Duplicate set -->
            <div
              v-for="(logo, index) in props.clients"
              :key="`logo-set-2-${index}`"
              class="logo-item"
              aria-hidden="true"
            >
              <!-- <NuxtLinkLocale :to="`/our-projects/${logo.slug}`" class="flex"> -->
              <NuxtImg
                :src="logo.logo"
                :width="126"
                :height="64"
                :alt="logo.title"
                class="h-16 w-auto object-contain opacity-60 transition-opacity duration-300 hover:opacity-100 dark:hidden"
              />
              <NuxtImg
                :src="logo.dark_logo"
                :width="126"
                :height="64"
                :alt="logo.title"
                class="hidden h-16 w-auto object-contain opacity-60 transition-opacity duration-300 hover:opacity-100 dark:block"
              />
              <!-- </NuxtLinkLocale> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
/* container mask */
.marquee-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask: linear-gradient(
    90deg,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.marquee-content {
  display: flex;
  align-items: center;
  will-change: transform;
  gap: 1.75rem;
}

.logo-item {
  flex: 0 0 var(--logo-width);
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.marquee-content:hover {
  animation-play-state: paused;
}

.marquee-ltr {
  animation: marquee-ltr 100s linear infinite;
}

.marquee-rtl {
  animation: marquee-rtl 100s linear infinite;
}

@keyframes marquee-ltr {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      calc(-1 * calc(var(--logo-width) + 28px) * var(--logo-count))
    );
  }
}

@keyframes marquee-rtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      calc(calc(var(--logo-width) + 28px) * var(--logo-count))
    );
  }
}
</style>
