<template>
  <div
    class="awards overflow-hidden bg-orange-600 py-48 rounded-32 mobile:py-32 mobile:rounded-24">
    <div class="text max-w-sm ml-48 mb-80 tablet:ml-32">
      <div class="title mb-32 text-orange-100 font-bold text-24">
        Award-Winning
      </div>
      <div class="subtitle text-orange-300 font-medium text-16 flex flex-col">
        B2B Appointment Setting Agency
        <span class="bold font-bold">Recognized and Certified</span>
      </div>
    </div>
    <div class="icons flex flex-col gap-16">
      <Ticker
        v-for="(logos, laneIndex) in awards"
        :key="laneIndex"
        :reversed="laneIndex % 2 === 0">
        <div
          v-for="(logo, index) in logos"
          :key="index"
          class="award shrink-0 w-[146px] h-[130px] pr-16">
          <ImageWebpWrapper
            :image-default="logo.png"
            :image-webp="logo.webp"
            width="130"
            height="130"
            :lazy-load-enable="false" />
        </div>
      </Ticker>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { awards } 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: () => ({
    awards,
  }),
});
</script>
