<template>
  <v-responsive class="py-10">
    <HomeCommonGradient opacity-class="opacity-10" />

    <v-container>
      <HomeCommonTitle
        :description="t('home.one.description')"
        :subtitle="t('home.one.subtitle')"
        :title="t('home.one.title')"
      >
        <template #top>
          <v-img :src="`https://cdn.vuetifyjs.com/docs/images/one/logos/vone.png`" class="mb-4" height="88" />
        </template>
      </HomeCommonTitle>

      <v-row class="text-left mt-10">
        <v-col
          v-for="(item, i) in toolings"
          :key="i"
          cols="12"
          lg="4"
          sm="6"
        >
          <HomeCommonCard
            :description="item.description"
            :href="item.href"
            :image="`https://cdn.vuetifyjs.com/docs/images/one/logos/${item.image}-logo-${isDark ? 'dark' : 'light'}.png`"
            target="_blank"
          />
        </v-col>

        <v-col class="text-center mt-6" cols="12">
          <v-btn
            :text="t('home.one.see-benefits')"
            :to="rpath('/one/')"
            append-icon="mdi-page-next"
            class="mr-4 text-none"
            color="primary"
            rounded="lg"
            size="large"
            variant="flat"
          />
        </v-col>
      </v-row>
    </v-container>
  </v-responsive>
</template>

<script setup lang="ts">
  const { t } = useI18n()
  const theme = useTheme()
  const isDark = computed(() => theme.current.value.dark)

  const toolings = computed(() => [
    {
      name: 'Vuetify Play',
      image: 'vplay',
      description: t('home.one.tools.play'),
      href: 'https://play.vuetifyjs.com',
    },
    {
      name: 'Vuetify Bin',
      image: 'vbin',
      description: t('home.one.tools.bin'),
      href: 'https://bin.vuetifyjs.com',
    },
    {
      name: 'Vuetify Studio',
      image: 'vstudio',
      description: t('home.one.tools.studio'),
      href: 'https://studio.vuetifyjs.com',
    },
    {
      name: 'Vuetify Link',
      image: 'vlink',
      description: t('home.one.tools.link'),
      href: 'https://link.vuetifyjs.com',
    },
    {
      name: 'Vuetify MCP',
      image: 'vmcp',
      description: t('home.one.tools.mcp'),
      href: 'https://github.com/vuetifyjs/mcp/',
    },
    {
      name: 'Vuetify Issues',
      image: 'vissues',
      description: t('home.one.tools.issues'),
      href: 'https://issues.vuetifyjs.com',
    },
  ])
</script>
