<script setup lang="ts">
const { t } = useI18n();
</script>

<template>
  <div>
    <UPageHero
      :title="t('home.heroTitle')"
      :description="t('home.heroDescription')"
      :links="[{
        label: t('home.getStarted'),
        to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
        target: '_blank',
        trailingIcon: 'i-lucide-arrow-right',
        size: 'xl',
      }, {
        label: t('home.useTemplate'),
        to: 'https://github.com/nuxt-ui-templates/starter',
        target: '_blank',
        icon: 'i-simple-icons-github',
        size: 'xl',
        color: 'neutral',
        variant: 'subtle',
      }]"
    />

    <UPageSection
      id="features"
      :title="t('home.featuresTitle')"
      :description="t('home.featuresDescription')"
      :features="[{
        icon: 'i-lucide-rocket',
        title: t('home.feature1Title'),
        description: t('home.feature1Description'),
      }, {
        icon: 'i-lucide-palette',
        title: t('home.feature2Title'),
        description: t('home.feature2Description'),
      }, {
        icon: 'i-lucide-zap',
        title: t('home.feature3Title'),
        description: t('home.feature3Description'),
      }, {
        icon: 'i-lucide-blocks',
        title: t('home.feature4Title'),
        description: t('home.feature4Description'),
      }, {
        icon: 'i-lucide-code-2',
        title: t('home.feature5Title'),
        description: t('home.feature5Description'),
      }, {
        icon: 'i-lucide-shield-check',
        title: t('home.feature6Title'),
        description: t('home.feature6Description'),
      }]"
    />

    <UPageSection>
      <UPageCTA
        :title="t('home.ctaTitle')"
        :description="t('home.ctaDescription')"
        variant="subtle"
        :links="[{
          label: t('home.startBuilding'),
          to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
          target: '_blank',
          trailingIcon: 'i-lucide-arrow-right',
          color: 'neutral',
        }, {
          label: t('home.viewOnGitHub'),
          to: 'https://github.com/nuxt-ui-templates/starter',
          target: '_blank',
          icon: 'i-simple-icons-github',
          color: 'neutral',
          variant: 'outline',
        }]"
      />
    </UPageSection>
  </div>
</template>
