<template>
  <UPage>
    <UHeader>
      <template #title> Tootaio Studio </template>
      <template #right>
        <ULocaleSelect
          :model-value="locale"
          :locales="[en, zh_cn]"
          @update:model-value="(v) => setLocale(v as 'en' | 'zh-CN')"
        />
      </template>
    </UHeader>
    <UPageSection
      title="Trusted by"
      :description="$t('index.trustedBy', { count: 10000 })"
    >
      <UMarquee>
        <img
          v-for="logo in trustedBy"
          :key="logo.src"
          :src="logo.src"
          :alt="logo.alt"
          class="h-12 mx-8 grayscale opacity-60"
        />
      </UMarquee>
    </UPageSection>
  </UPage>
</template>

<script lang="ts" setup>
import { en, zh_cn } from "@nuxt/ui/locale";
const { locale, setLocale } = useI18n();

const trustedBy = ref([
  { src: "/index/trusted-by/logoipsum-284.svg", alt: "Logo Ipsum" },
  { src: "/index/trusted-by/logoipsum-338.svg", alt: "Logo Ipsum" },
  { src: "/index/trusted-by/logoipsum-353.svg", alt: "Logo Ipsum" },
  { src: "/index/trusted-by/logoipsum-378.svg", alt: "Logo Ipsum" },
  { src: "/index/trusted-by/logoipsum-392.svg", alt: "Logo Ipsum" },
  { src: "/index/trusted-by/logoipsum-403.svg", alt: "Logo Ipsum" },
  { src: "/index/trusted-by/logoipsum-409.svg", alt: "Logo Ipsum" },
]);
</script>

<style></style>
