<!-- eslint-disable vue/no-v-html -->
<template>
  <div>
    <ULandingHero :ui="{ base: 'relative z-[1]', container: 'max-w-4xl' }" class="mb-[calc(var(--header-height)*2)]">
      <template #headline>
        <UBadge variant="subtle" size="md" class="hover:bg-primary-100 dark:bg-primary-950/100 dark:hover:bg-primary-900 transition-color relative font-medium rounded-full shadow-none">
          <NuxtLink :to="`https://github.com/nuxt/ui/releases/tag/v${config.version.split('.').slice(0, -1).join('.')}.0`" target="_blank" class="focus:outline-none" aria-label="Go to last relase" tabindex="-1">
            <span class="absolute inset-0" aria-hidden="true" />
          </NuxtLink>

          <span class="flex items-center gap-1">
            Nuxt UI v{{ config.version.split('.').slice(0, -1).join('.') }} is out!
          </span>
        </UBadge>
      </template>

      <template #title>
        <span v-html="page.hero?.title" />
      </template>

      <template #description>
        <span v-html="page.hero?.description" />
      </template>

      <template #links>
        <UButton label="Get started" size="lg" to="/getting-started/installation" />
        <UButton label="Explore components" trailing-icon="i-heroicons-arrow-right-20-solid" color="gray" size="lg" to="/components/button" />

        <!-- <UInput
          v-model="source"
          color="gray"
          readonly
          autocomplete="off"
          icon="i-heroicons-command-line"
          class="w-72"
          input-class="focus:ring-1 focus:ring-gray-300 dark:focus:ring-gray-700"
          aria-label="Install @nuxt/ui"
          size="lg"
          :ui="{ icon: { trailing: { pointer: '' } } }"
        >
          <template #trailing>
            <UButton
              aria-label="Copy Code"
              :color="copied ? 'primary' : 'gray'"
              variant="link"
              size="2xs"
              :icon="copied ? 'i-heroicons-clipboard-document-check' : 'i-heroicons-clipboard-document'"
              @click="copy(source)"
            />
          </template>
        </UInput> -->
      </template>

      <ClientOnly>
        <HomeTetris />
      </ClientOnly>
    </ULandingHero>

    <ULandingSection v-for="(section, index) of page.sections" :key="index" v-bind="section">
      <template v-if="section.title" #title>
        <span v-html="section?.title" />
      </template>

      <template v-if="section.description" #description>
        <span v-html="section.description" />
      </template>

      <template #demo>
        <ClientOnly>
          <HomeDemo v-if="lgAndLarger" />
        </ClientOnly>
      </template>

      <template #features>
        <ULandingGrid class="lg:-mb-20 lg:auto-rows-[3rem]">
          <ULandingCard
            v-for="(card, subIndex) of section.cards"
            :key="subIndex"
            v-bind="card"
            :ui="{
              background: 'dark:bg-gray-900/50 dark:lg:bg-gradient-to-b from-gray-700/50 to-gray-950/50',
              body: {
                base: 'flex-1',
                background: 'dark:bg-gray-800/50 dark:lg:bg-gray-900/50 backdrop-blur-lg'
              }
            }"
            class="flex flex-col"
          >
            <UColorModeImage
              :light="`${card.image.path}-light.svg`"
              :dark="`${card.image.path}-dark.svg`"
              :width="card.image.width"
              :height="card.image.height"
              :alt="card.title"
              loading="lazy"
              class="object-cover w-full"
            />
          </ULandingCard>
        </ULandingGrid>
      </template>
    </ULandingSection>

    <ULandingSection class="!pt-0 dark:bg-gradient-to-b from-gray-950/50 to-gray-900">
      <ULandingCTA
        align="left"
        :card="false"
        :ui="{
          body: {
            padding: '!p-0'
          },
          title: 'text-center lg:text-left lg:text-5xl',
          description: 'mt-10 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-8 lg:gap-16',
          links: '-ml-3 justify-center lg:justify-start flex-wrap gap-y-3'
        }"
      >
        <template #title>
          <span v-html="page.cta.title" />
        </template>

        <template #description>
          <NuxtLink class="text-center lg:text-left group" to="https://npmjs.org/package/@nuxt/ui" target="_blank">
            <p class="text-5xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
              {{ format(module.stats.downloads) }}+
            </p>
            <p>monthly downloads</p>
          </NuxtLink>

          <NuxtLink class="text-center lg:text-left group" to="https://github.com/nuxt/ui" target="_blank">
            <p class="text-5xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
              {{ format(module.stats.stars) }}+
            </p>
            <p>GitHub stars</p>
          </NuxtLink>
        </template>

        <template #links>
          <UButton
            v-for="user in page.cta.users"
            :key="user.username"
            :to="user.to"
            size="md"
            color="gray"
            variant="ghost"
            target="_blank"
          >
            <UAvatar
              :alt="user.username"
              :src="`https://ipx.nuxt.com/s_80x80/gh_avatar/${user.username}`"
              :srcset="`https://ipx.nuxt.com/s_160x160/gh_avatar/${user.username} 2x`"
              width="80"
              height="80"
              size="md"
              loading="lazy"
            />

            <div class="text-left">
              <p class="font-medium">
                {{ user.name }}
              </p>
              <p class="text-gray-500 dark:text-gray-400 leading-4">
                {{ `@${user.username}` }}
              </p>
            </div>
          </UButton>
        </template>

        <div class="p-5 overflow-hidden flex">
          <HomeContributors :contributors="module.contributors" />
        </div>
      </ULandingCTA>
    </ULandingSection>

    <template v-if="navigation.find(item => item._path === '/pro')">
      <ULandingHero id="pro" :links="page.pro.links" :ui="{ title: 'sm:text-6xl' }" class="bg-gradient-to-b from-gray-50 dark:from-gray-950/50 to-white dark:to-gray-900 relative">
        <template #top>
          <Gradient class="absolute inset-x-0 top-0 w-full block" />
        </template>

        <template #title>
          <span v-html="page.pro.title" />
        </template>

        <template #description>
          <span v-html="page.pro.description" />
        </template>

        <div class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4">
          <video preload="none" poster="https://res.cloudinary.com/nuxt/video/upload/so_3.3/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.jpg" controls class="rounded-lg">
            <source src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.webm" type="video/webm">
            <source src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.mp4" type="video/mp4">
            <source src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.ogg" type="video/ogg">
          </video>
        </div>
      </ULandingHero>

      <!-- <ULandingSection v-for="(section, index) in page.pro.sections" :key="index" v-bind="section" class="!pt-0">
        <MDC
          v-if="section.code"
          :value="section.code"
          tag="pre"
          class="prose prose-primary dark:prose-invert max-w-none"
        />
      </ULandingSection> -->

      <!-- <div ref="sectionRef" :style="{ '--y': `${y}px`, '--inc': `${inc}px` }" class="_screen_xl">
        <ULandingSection class="sticky h-screen top-0 flex !pb-16" :ui="{ container: 'flex-1 sm:gap-y-12' }">
          <template #title>
            <Transition name="fade" mode="out-in">
              <span v-if="isAfterStep(steps.docs)" v-html="page.pro.docs?.title" />
              <span v-else v-html="page.pro.landing?.title" />
            </Transition>
          </template>

          <template #description>
            <Transition name="fade" mode="out-in">
              <span v-if="isAfterStep(steps.docs)" v-html="page.pro.docs?.description" />
              <span v-else v-html="page.pro.landing?.description" />
            </Transition>
          </template>

          <HomeProDemo ref="demoRef" :blocks="(blocks as HomeProBlock[])">
            <template #header-left>
              <Logo class="w-auto h-6" />
            </template>

            <template #header-center>
              <UHeaderLinks :links="headerLinks" />
            </template>

            <template #header-right>
              <div class="flex items-center gap-1.5">
                <UColorModeButton />

                <UButton
                  to="https://github.com/nuxt/ui"
                  target="_blank"
                  icon="i-simple-icons-github"
                  aria-label="GitHub"
                  class="hidden lg:inline-flex"
                  v-bind="($ui.button.secondary as any)"
                />
              </div>
            </template>

            <template #footer-left>
              <span class="text-sm text-gray-500 dark:text-gray-400">
                Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
                  MIT License
                </NuxtLink>
              </span>
            </template>

            <template #footer-right>
              <div class="flex items-center gap-1.5">
                <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="($ui.button.secondary as any)" />
                <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/channels/473401852243869706/1153996761426300948" target="_blank" v-bind="($ui.button.secondary as any)" />
                <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="($ui.button.secondary as any)" />
              </div>
            </template>

            <template #aside-top>
              <UContentSearchButton size="md" class="w-full" />
            </template>

            <template #aside-default>
              <UNavigationTree
                class="w-full h-full [&>div>div>div>nav]:border-gray-800/10 dark:[&>div>div>div>nav]:border-gray-200/10 overflow-y-auto"
                :links="navigationLinks"
              />
            </template>

            <template #page-header>
              <UPageHeader
                title="Installation"
                description="Learn how to install and configure the module in your Nuxt app."
                headline="Getting Started"
                class="!p-0 !border-0"
                :ui="{ headline: 'mb-1 text-xs', title: '!text-2xl', description: 'mt-1 text-sm' }"
              />
            </template>

            <template #page-body>
              <div class="-mt-8 prose prose-primary prose-sm dark:prose-invert max-w-none">
                <MDC :value="md" tag="div" />
              </div>
            </template>

            <template #content-surround>
              <UContentSurround
                :surround="(surround as unknown as ParsedContent[])"
                class="w-full gap-4"
                :ui="{
                  link: {
                    wrapper: 'px-4 py-2.5 border-gray-800/10 dark:border-gray-200/10 cursor-pointer',
                    icon: {
                      wrapper: 'mb-2 p-1',
                      base: 'h-4 w-4'
                    },
                    title: 'text-sm',
                    description: 'text-xs'
                  }
                }"
              />
            </template>

            <template #content-toc>
              <div class="absolute top-0 left-0 right-0 space-y-3">
                <UContentToc :links="toc" class="bg-transparent relative max-h-full overflow-hidden top-0" :ui="({ container: { base: '!pt-0 !pb-4' } } as any)" />

                <UDivider type="dashed" :ui="{ border: { base: 'border-gray-800/10 dark:border-gray-200/10' } }" />

                <UPageLinks title="Community" :links="communityLinks" class="mt-4" />
              </div>
            </template>

            <template #landing-hero>
              <ULandingHero class="!p-0" :ui="{ title: '!text-5xl', description: 'text-base' }">
                <template #title>
                  A <span class="text-primary">UI Library</span> for<br> Modern Web Apps
                </template>

                <template #description>
                  Nuxt UI simplifies the creation of stunning and responsive web applications with its<br> comprehensive collection of fully styled and customizable UI components designed for Nuxt.
                </template>

                <template #links>
                  <UButton label="Get started" icon="i-heroicons-rocket-launch" size="md" />

                  <UInput
                    model-value="npm i @nuxt/ui"
                    color="gray"
                    readonly
                    autocomplete="off"
                    icon="i-heroicons-command-line"
                    input-class="select-none"
                    aria-label="Install @nuxt/ui"
                    size="md"
                    :ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
                  />
                </template>
              </ULandingHero>
            </template>

            <template #landing-section>
              <ULandingSection :ui="{ title: '!text-3xl', description: 'text-base' }" class="!p-0">
                <template #title>
                  Everything you expect from a<br> <span class="text-primary">UI component library</span>
                </template>
              </ULandingSection>
            </template>

            <template #landing-card-1>
              <ULandingCard icon="i-heroicons-swatch" title="Color Palette" description="Choose a primary and a gray color from your Tailwind CSS color palette." />
            </template>
            <template #landing-card-2>
              <ULandingCard icon="i-heroicons-wrench-screwdriver" title="Fully Customizable" description="Change the style of any component in your App Config or with ui prop." />
            </template>
            <template #landing-card-3>
              <ULandingCard icon="i-heroicons-face-smile" title="Icons" description="Choose any of the 100k+ icons from the most popular icon libraries." />
            </template>
            <template #landing-card-4>
              <ULandingCard icon="i-heroicons-computer-desktop" title="Keyboard Shortcuts" description="Nuxt UI comes with a set of Vue composables to easily handle shortcuts." />
            </template>

            <template #landing-cta>
              <ULandingCTA card :links="[{ label: 'Get started', color: 'black', size: 'md' }, { label: 'Learn more', color: 'black', variant: 'link', size: 'md', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]" :ui="{ title: '!text-3xl', description: 'text-base' }" class="w-full h-full rounded-md">
                <template #title>
                  Trusted and supported by our<br> amazing community
                </template>
              </ULandingCTA>
            </template>
          </HomeProDemo>
        </ULandingSection>

        <div class="h-[calc(var(--inc)*42)]" />
      </div> -->

      <!-- <div class="_not_screen_xl">
        <ULandingSection>
          <template #title>
            <span v-html="page.pro.landing?.title" />
          </template>
          <template #description>
            <span v-html="page.pro.landing?.description" />
          </template>
          <video preload="none" poster="https://res.cloudinary.com/nuxt/video/upload/so_14.4/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.jpg" controls>
            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.webm" type="video/webm">
            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.mp4" type="video/mp4">
            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.ogg" type="video/ogg">
          </video>
        </ULandingSection>
        <ULandingSection>
          <template #title>
            <span v-html="page.pro.docs?.title" />
          </template>
          <template #description>
            <span v-html="page.pro.docs?.description" />
          </template>
          <video preload="none" poster="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.jpg" controls>
            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.webm" type="video/webm">
            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.mp4" type="video/mp4">
            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.ogg" type="video/ogg">
          </video>
        </ULandingSection>
      </div> -->
    </template>
  </div>
</template>

<script setup lang="ts">
import type { NavItem } from '@nuxt/content'
import { useElementBounding, useWindowScroll, breakpointsTailwind, useBreakpoints } from '@vueuse/core'
// import type { HomeProBlock } from '~/types'

const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
const { data: module } = await useFetch<{
  stats: {
    downloads: number
    stars: number
  }
  contributors: {
    username: string
  }[]
}>('https://api.nuxt.com/modules/ui', {
  key: 'stats',
  transform: ({ stats, contributors }) => ({ stats, contributors })
})

const navigation = inject<Ref<NavItem[]>>('navigation')

useSeoMeta({
  titleTemplate: '',
  title: page.value.title,
  ogTitle: page.value.title,
  description: page.value.description,
  ogDescription: page.value.description,
  ogImage: 'https://ui2.nuxt.com/social-card.png',
  twitterImage: 'https://ui2.nuxt.com/social-card.png'
})

// const source = ref('npx nuxi@latest module add ui')
const sectionRef = ref()
// const demoRef = ref(null)
const start = ref(0)

// const { $ui } = useNuxtApp()
// const { height } = useElementSize(demoRef)
const { top } = useElementBounding(sectionRef)
const { y } = useWindowScroll()
const config = useRuntimeConfig().public
// const { copy, copied } = useClipboard({ source })
const breakpoints = useBreakpoints(breakpointsTailwind)

const lgAndLarger = breakpoints.greaterOrEqual('lg')

const { format } = Intl.NumberFormat('en', { notation: 'compact' })

// const steps = {
//   header: 0,
//   footer: 5,
//   landing: 10,
//   docs: 27
// }

// Computed

// const inc = computed(() => (height.value - 32 - 64 - 32 - 32) / 4)

// const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs)
//   ? [{
//       class: 'inset-x-0 top-20 bottom-20 overflow-hidden',
//       inactive: true,
//       children: [{
//         name: 'ULandingHero',
//         to: '/pro/components/landing-hero',
//         class: [
//           'inset-4',
//           isAfterStep(steps.landing + 2) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
//         ].filter(Boolean).join(' '),
//         style: {
//           '--step-y': `${getStepY(steps.landing + 2)}px`
//         },
//         inactive: isAfterStep(steps.landing + 1),
//         children: [{
//           slot: 'landing-hero',
//           class: 'inset-4'
//         }]
//       }, isAfterStep(steps.landing + 2) && {
//         name: 'ULandingSection',
//         to: '/pro/components/landing-section',
//         class: [
//           'inset-4',
//           isBeforeStep(steps.landing + 6) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]',
//           isAfterStep(steps.landing + 10) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
//         ].filter(Boolean).join(' '),
//         style: {
//           '--height': (inc.value * 4) + 'px',
//           '--step-y': `${getStepY(steps.landing + 10)}px`,
//           '--prev-step-y': `${getStepY(steps.landing + 2)}px`
//         },
//         inactive: isAfterStep(steps.landing + 7),
//         children: [{
//           slot: 'landing-section',
//           class: 'inset-x-4 top-16'
//         }, {
//           name: 'ULandingGrid',
//           to: '/pro/components/landing-grid',
//           class: ['inset-x-4 bottom-4 top-48', isAfterStep(steps.landing + 8) && 'grid grid-cols-4 gap-4 p-4'].filter(Boolean).join(' '),
//           inactive: isAfterStep(steps.landing + 8),
//           children: [isAfterStep(steps.landing + 9)
//             ? {
//                 slot: 'landing-card-1',
//                 class: '!relative'
//               }
//             : {
//                 name: 'ULandingCard',
//                 to: '/pro/components/landing-card',
//                 class: '!relative h-full',
//                 inactive: false
//               }, isAfterStep(steps.landing + 9)
//             ? {
//                 slot: 'landing-card-2',
//                 class: '!relative h-full'
//               }
//             : {
//                 name: 'ULandingCard',
//                 to: '/pro/components/landing-card',
//                 class: '!relative h-full',
//                 inactive: false
//               }, isAfterStep(steps.landing + 9)
//             ? {
//                 slot: 'landing-card-3',
//                 class: '!relative h-full'
//               }
//             : {
//                 name: 'ULandingCard',
//                 to: '/pro/components/landing-card',
//                 class: '!relative h-full',
//                 inactive: false
//               }, isAfterStep(steps.landing + 9)
//             ? {
//                 slot: 'landing-card-4',
//                 class: '!relative h-full'
//               }
//             : {
//                 name: 'ULandingCard',
//                 to: '/pro/components/landing-card',
//                 class: '!relative h-full',
//                 inactive: false
//               }]
//         }]
//       }, isAfterStep(steps.landing + 10) && {
//         name: 'ULandingSection',
//         to: '/pro/components/landing-section',
//         class: [
//           'inset-4',
//           isBeforeStep(steps.landing + 14) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]'
//         ].filter(Boolean).join(' '),
//         style: {
//           '--height': (inc.value * 4) + 'px',
//           '--step-y': `${getStepY(steps.landing + 18)}px`,
//           '--prev-step-y': `${getStepY(steps.landing + 10)}px`
//         },
//         inactive: isAfterStep(steps.landing + 15),
//         children: [{
//           name: 'ULandingCTA',
//           class: 'inset-4',
//           inactive: isAfterStep(steps.landing + 16),
//           children: [{
//             slot: 'landing-cta',
//             class: 'inset-0'
//           }]
//         }]
//       }].filter(Boolean)
//     }]
//   : [])

// const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
//   name: 'UPage',
//   to: '/pro/components/page',
//   class: 'inset-x-0 top-20 bottom-20',
//   inactive: isAfterStep(steps.docs + 1),
//   children: [isAfterStep(steps.docs + 2)
//     ? {
//         name: 'UAside',
//         to: '/pro/components/aside',
//         class: 'left-4 inset-y-4 w-64',
//         inactive: isAfterStep(steps.docs + 3),
//         children: [isAfterStep(steps.docs + 4)
//           ? {
//               slot: 'aside-top',
//               class: 'inset-x-4 top-4'
//             }
//           : {
//               name: '#top',
//               class: 'inset-x-4 top-4 h-9'
//             }, isAfterStep(steps.docs + 5)
//           ? {
//               name: 'UNavigationTree',
//               to: '/pro/components/navigation-tree',
//               class: ['inset-x-4 top-[4.25rem] bottom-4', isAfterStep(steps.docs + 6) && '!bg-transparent !border-0'].join(' '),
//               inactive: isAfterStep(steps.docs + 6),
//               children: [{
//                 slot: 'aside-default',
//                 class: 'inset-0'
//               }]
//             }
//           : {
//               name: '#default',
//               class: 'inset-x-4 top-[4.25rem] bottom-4'
//             }]
//       }
//     : {
//         name: '#left',
//         class: 'left-4 inset-y-4 w-64'
//       }, isAfterStep(steps.docs + 7)
//     ? {
//         name: 'UPage',
//         to: '/pro/components/page',
//         class: 'left-72 right-4 inset-y-4',
//         inactive: isAfterStep(steps.docs + 8),
//         children: [...(isAfterStep(steps.docs + 9)
//           ? [{
//               name: 'UPageHeader',
//               to: '/pro/components/page-header',
//               class: 'top-4 left-4 right-72 h-32',
//               inactive: isAfterStep(steps.docs + 10),
//               children: [{
//                 slot: 'page-header',
//                 class: 'inset-4 justify-start'
//               }]
//             }, {
//               name: 'UPageBody',
//               to: '/pro/components/page-body',
//               class: 'top-40 left-4 right-72 bottom-4 overflow-y-auto',
//               inactive: isAfterStep(steps.docs + 11),
//               children: [{
//                 slot: 'page-body',
//                 class: 'inset-x-4 top-4 justify-start'
//               }, isAfterStep(steps.docs + 12)
//                 ? {
//                     slot: 'content-surround',
//                     class: 'bottom-4 inset-x-4 h-28'
//                   }
//                 : {
//                     name: 'UContentSurround',
//                     to: '/pro/components/content-surround',
//                     class: 'bottom-4 inset-x-4 h-28',
//                     inactive: false
//                   }]
//             }]
//           : [{
//               name: '#default',
//               class: 'left-4 right-72 inset-y-4'
//             }]), isAfterStep(steps.docs + 13)
//           ? {
//               name: 'UContentToc',
//               to: '/pro/components/content-toc',
//               class: 'right-4 inset-y-4 w-64',
//               inactive: isAfterStep(steps.docs + 14),
//               children: [{
//                 slot: 'content-toc',
//                 class: 'inset-4 overflow-y-auto'
//               }]
//             }
//           : {
//               name: '#right',
//               class: 'right-4 inset-y-4 w-64'
//             }]
//       }
//     : {
//         name: '#default',
//         class: 'left-72 right-4 inset-y-4'
//       }]
// }].filter(Boolean))

// const blocks = computed(() => [isAfterStep(steps.header) && {
//   name: 'UHeader',
//   to: '/pro/components/header',
//   class: 'h-16 inset-x-0 top-0',
//   inactive: isAfterStep(steps.header + 1),
//   children: [isAfterStep(steps.header + 2)
//     ? {
//         slot: 'header-left',
//         class: 'left-4 top-4'
//       }
//     : {
//         name: '#left',
//         class: 'left-4 inset-y-4 w-64'
//       }, isAfterStep(steps.header + 3)
//     ? {
//         slot: 'header-center',
//         class: 'inset-x-72 top-5'
//       }
//     : {
//         name: '#center',
//         class: 'inset-x-72 inset-y-4'
//       }, isAfterStep(steps.header + 4)
//     ? {
//         slot: 'header-right',
//         class: 'right-4 top-4'
//       }
//     : {
//         name: '#right',
//         class: 'right-4 inset-y-4 w-64'
//       }]
// }, isAfterStep(steps.footer) && {
//   name: 'UFooter',
//   to: '/pro/components/footer',
//   class: 'h-16 inset-x-0 bottom-0',
//   inactive: isAfterStep(steps.footer + 1),
//   children: [isAfterStep(steps.footer + 2)
//     ? {
//         slot: 'footer-left',
//         class: 'left-4 bottom-5'
//       }
//     : {
//         name: '#left',
//         class: 'left-4 inset-y-4 w-64'
//       }, isAfterStep(steps.footer + 3)
//     ? {
//         slot: 'footer-center',
//         class: 'inset-x-72 bottom-5'
//       }
//     : {
//         name: '#center',
//         class: 'inset-x-72 inset-y-4'
//       }, isAfterStep(steps.footer + 4)
//     ? {
//         slot: 'footer-right',
//         class: 'right-4 bottom-4'
//       }
//     : {
//         name: '#right',
//         class: 'right-4 inset-y-4 w-64'
//       }]
// }, ...landingBlocks.value, ...docsBlocks.value].filter(Boolean))

// Methods

// function isBeforeStep(i = 0) {
//   return y.value < (start.value + (i * inc.value))
// }

// function isAfterStep(i = 0) {
//   return y.value >= (start.value + (i * inc.value))
// }

// function getStepY(step: number) {
//   return start.value + (step * inc.value)
// }

// Hooks

onMounted(() => {
  setTimeout(() => {
    start.value = top.value + y.value
  }, 100)
})

// Slots Data

// const headerLinks = [{
//   label: 'Documentation',
//   active: true
// }, {
//   label: 'Playground'
// }, {
//   label: 'Roadmap'
// }, {
//   label: 'Pro'
// }]

// const navigationLinks = [{
//   label: 'Getting Started',
//   children: [{
//     label: 'Introduction'
//   }, {
//     label: 'Installation',
//     active: true
//   }, {
//     label: 'Theming'
//   }, {
//     label: 'Shortcuts'
//   }, {
//     label: 'Examples'
//   }, {
//     label: 'Roadmap'
//   }]
// }, {
//   label: 'Elements',
//   children: [{
//     label: 'Alert'
//   }, {
//     label: 'Avatar'
//   }, {
//     label: 'Badge'
//   }, {
//     label: 'Button'
//   }]
// }]

// const surround = [{
//   title: 'Introduction',
//   description: 'Fully styled and customizable components for Nuxt.',
//   _path: '/'
// }, {
//   title: 'Theming',
//   description: 'Learn how to customize the look and feel of the components.',
//   _path: '/'
// }]

// const md = `
// ## Edge

// To use the latest updates pushed on the [\`dev\`](https://github.com/nuxt/ui/tree/v2) branch, you can use \`@nuxt/ui-edge\`.
// `

// const toc = [{
//   id: 'quick-start',
//   depth: 2,
//   text: 'Quick Start'
// }, {
//   id: 'intellisense',
//   depth: 2,
//   text: 'IntelliSense'
// }, {
//   id: 'options',
//   depth: 2,
//   text: 'Options'
// }, {
//   id: 'edge',
//   depth: 2,
//   text: 'Edge'
// }]

// const communityLinks = [{
//   icon: 'i-heroicons-pencil-square',
//   label: 'Edit this page'
// }, {
//   icon: 'i-heroicons-star',
//   label: 'Star on GitHub',
//   to: 'https://github.com/nuxt/ui',
//   target: '_blank'
// }, {
//   icon: 'i-heroicons-book-open',
//   label: 'Nuxt documentation',
//   to: 'https://nuxt.com',
//   target: '_blank'
// }]
</script>

<style scoped lang="postcss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

._screen_xl {
  display: none;
}
@media (min-width: 1280px) and (min-height: 955px) {
  ._screen_xl {
    display: block;
  }
  ._not_screen_xl {
    display: none;
  }
}
</style>
