<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())

useSeoMeta({
  title: page.value.title,
  ogTitle: page.value.title,
  description: page.value.description,
  ogDescription: page.value.description
})
</script>

<template>
  <div>
    <ULandingHero
      id="home"
      title="工匠基地"
      description="快速提升职业技能的学习神器"
      :links="page.hero.links"
      style="background-image: url(https://oss.wsdns.cn/20240610/41ab59f725204d9ea4218fd4ae38e5c2.png); background-repeat: no-repeat; background-position: center; background-size: 100%"
    >
      <div class="absolute inset-0 landing-grid z-[-1] [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" />

    </ULandingHero>
<!--    <ULandingHero-->
<!--      id="home"-->
<!--      :title="`工匠基地`"-->
<!--      :description="`千铝教育app下载`"-->

<!--    >-->
<!--    </ULandingHero>-->

    <ULandingSection
      :title="page.features.title"
      :description="page.features.description"
      :headline="page.features.headline"
    >
      <UPageGrid
        id="features"
        class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]"
      >
        <ULandingCard
          v-for="(item, index) in page.features.items"
          :key="index"
          v-bind="item"
        />
      </UPageGrid>
    </ULandingSection>

    <ULandingSection
      :title="page.pricing.title"
      :description="page.pricing.description"
      :headline="page.pricing.headline"
    >
      <UPricingGrid
        id="pricing"
        compact
        class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]"
      >
        <UPricingCard
          v-for="(plan, index) in page.pricing.plans"
          :key="index"
          v-bind="plan"
        />
      </UPricingGrid>
    </ULandingSection>


    <ULandingSection class="bg-primary-50 dark:bg-primary-400 dark:bg-opacity-10" style="background-image: url(https://oss.wsdns.cn/20240607/dd18d6830ce541e69ad3ba12e2eed33f.jpeg); background-size: 100%; background-position: center">
      <ULandingCTA
        id="down"
        v-bind="page.cta"
        :card="false"
      />
    </ULandingSection>

    <ULandingSection
      id="faq"
      :title="page.faq.title"
      :description="page.faq.description"
      class="scroll-mt-[var(--header-height)]"
    >
      <ULandingFAQ
        multiple
        :items="page.faq.items"
        :ui="{
          button: {
            label: 'font-semibold',
            trailingIcon: {
              base: 'w-6 h-6'
            }
          }
        }"
        class="max-w-4xl mx-auto"
      />
    </ULandingSection>
  </div>
</template>
