<template>
  <div class="trusted relative w-full flex flex-col justify-between bg-blue-500 rounded-32 pt-48 pb-48 mobile:pt-32 mobile:pb-32">
    <h2 class="title font-bold text-24 text-blue-400 mb-96 ml-48 mobile:mb-64">
      Trusted by
    </h2>
    <div class="partners flex flex-col gap-16 overflow-hidden tablet:gap-48">
      <Ticker
        v-for="(logos, laneIndex) in trustedLogos"
        :key="laneIndex"
        :animation-duration="64"
        :reversed="laneIndex % 2 === 0"
        class="lane last-of-type:hidden">
        <div
          v-for="(logo, index) in logos"
          :key="index"
          class="partner-logo w-[174px] h-[90px] shrink-0">
          <ImageWebpWrapper
            :image-default="logo.png"
            :image-webp="logo.webp"
            height="90"
            width="174"
            :lazy-load-enable="false" />
        </div>
      </Ticker>
    </div>
    <div
      class="subtitle text-blue-300 mt-160 text-18 ml-48 mobile:text-16 mobile:mt-72">
      and more than 1000 companies
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { trustedLogos } from '@/components/pages/index/content';

import Ticker from '@/components/ui/Ticker.vue';
import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';

export default defineComponent({
  components: {
    Ticker,
    ImageWebpWrapper,
  },

  data: () => ({
    trustedLogos,
  }),
});
</script>
