<script setup>
import { useData } from 'vitepress'
import { ref } from 'vue'
import {t, routerPath} from '../locale'

const { lang, isDark } = useData()

const subDate = ref('month')
const price = ref({
  month: {
    oldPrice: '15',
    price: '10',
    discount: '6.6'
  },
  year: {
    oldPrice: '180',
    price: '100',
    discount: '5.5'
  }
})
</script>

<template>
  <div class="custom-home">
    
    <section>
      <div class="mx-auto w-full lg:px-24 max-w-7xl md:px-12 items-center px-8 py-24">
        <div>
          <div class="text-center max-w-4xl mx-auto">
            <div class="sm:flex sm:justify-center">
              <a 
                v-motion
                :initial="{ opacity: 0, y: 100 }"
                :enter="{ opacity: 1, y: 0, scale: 1 }"
                :delay="0"
                :duration="400" 
                :href="routerPath(lang, '/docs/notice')" 
                class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 border-2 border-solid border-primary flex-center duration-200 no-underline!"
                uno-hover="bg-primary text-[var(--vp-c-neutral-inverse)]!"
              >
                <icon-custom-islenote class="text-16px mr-6px" />
                <span class="block lg:inline"> {{t(lang, 'notice')}} <span aria-hidden="true">→</span> </span> 
              </a> 
            </div> 
            <h1 
              v-motion
              :initial="{ opacity: 0, y: 100 }"
              :enter="{ opacity: 1, y: 0, scale: 1 }"
              :delay="50"
              :duration="400" 
              class="text-4xl! tracking-tight font-medium text-primary md:text-5xl font-display mt-12"
            >
              {{ t(lang, 'desc') }}
            </h1> 
            <div 
              v-motion
              :initial="{ opacity: 0, y: 100 }"
              :enter="{ opacity: 1, y: 0, scale: 1 }"
              :delay="100"
              :duration="400" 
              class="text-[var(--vp-c-text-3)] lg:text-xl max-w-2xl mt-4 mx-auto text-base"
            >
              {{ t(lang, 'desc.secondary') }}
            </div> 
          </div>

          <div class="flex justify-center gap-3 mt-10 mb-5 flex-col sm:flex-row">
            <a 
              v-motion
              :initial="{ opacity: 0, y: 100 }"
              :enter="{ opacity: 1, y: 0, scale: 1 }"
              :delay="200"
              :duration="400" 
              target="_blank"
              class="items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline!"
              uno-hover="text-primary! border-primary"
              href="https://v.islenote.com/register"
            >
              {{ t(lang, 'register') }}
            </a> 
            <a 
              v-motion
              :initial="{ opacity: 0, y: 100 }"
              :enter="{ opacity: 1, y: 0, scale: 1 }"
              :delay="300"
              :duration="400" 
              class="items-center justify-center h-12 font-medium rounded-xl inline-flex bg-primary border-solid border-2 border-primary duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-neutral-inverse)]! w-full no-underline!"
              uno-hover="bg-transparent border-primary text-primary!" 
              :href="routerPath(lang, '/docs/guide')"
            >
            {{ t(lang, 'guide') }} →
            </a> 
          </div>

          <div class="sm:flex sm:justify-center">
            <a 
              v-motion
              :initial="{ opacity: 0, y: 100 }"
              :enter="{ opacity: 1, y: 0, scale: 1 }"
              :delay="400"
              :duration="400" 
              href="https://v.islenote.com" 
              target="_blank"
              class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 flex-center duration-200 no-underline!"
              uno-hover="underline!"
            >
              <span class="block lg:inline">{{ t(lang, 'account') }} {{ t(lang, 'login') }}<span aria-hidden="true">→</span> </span> 
            </a> 
          </div> 

          <div 
            v-motion
            :initial="{ opacity: 0, y: 100 }"
            :enter="{ opacity: 1, y: 0, scale: 1 }"
            :delay="500"
            :duration="400" 
            class="mt-20 mb-10"
            v-if="isDark"
          >
            <img src="/img/site/home_dark.png" class="rounded-2 shadow-[var(--vp-c-shadow)]"lt="">
          </div>
          <div 
            v-motion
            :initial="{ opacity: 0, y: 100 }"
            :enter="{ opacity: 1, y: 0, scale: 1 }"
            :delay="500"
            :duration="400" 
            class="mt-20 mb-10"
            v-if="!isDark"
          >
            <img src="/img/site/home_light.png" class="rounded-2 shadow-[var(--vp-c-shadow)]"lt="">
          </div>

          <div 
            v-motion
            :initial="{ opacity: 0, y: 100 }"
            :enter="{ opacity: 1, y: 0, scale: 1 }"
            :delay="500"
            :duration="400" 
            id="features" 
            class="my-40"
          >
            <div class="sm:flex sm:flex-col sm:align-center">
              <h1 class="text-4xl font-700 text-center">{{ t(lang, 'features') }}</h1>
              <div 
                class="text-[var(--vp-c-text-3)] mt-4 text-base text-center"
              >
                {{ t(lang, 'features.desc') }}
              </div> 
              <a 
                class="h-34px font-semibold text-primary rounded-full px-5 mt-4 text-sm leading-6 flex-center duration-200 no-underline!"
                uno-hover="underline!"
                :href="routerPath(lang, '/docs/guide')" 
              >
                {{ t(lang, 'features.more') }}->
              </a> 
            </div>

            <div class="lg:gap-x-8 lg:grid-cols-3 max-w-4xl mt-14 mx-auto sm:gap-x-6 sm:gap-y-12 sm:grid sm:grid-cols-2 sm:space-y-0 space-y-6 text-center text-sm items-start">
              <div class="text-[var(--vp-c-text-3)]"> 
                <strong class="text-[var(--vp-c-text-2)]">
                  {{t(lang, 'features.faster')}}
                </strong>
                – {{t(lang, 'features.faster.desc')}}
              </div>
              <div class="text-[var(--vp-c-text-3)]"> 
                <strong class="text-[var(--vp-c-text-2)]">
                  {{t(lang, 'features.style')}}
                </strong>
                – {{t(lang, 'features.style.desc')}}
              </div>
              <div class="text-[var(--vp-c-text-3)]"> 
                <strong class="text-[var(--vp-c-text-2)]">
                  {{t(lang, 'features.review')}}
                </strong>
                – {{t(lang, 'features.review.desc')}}
              </div>
              <div class="text-[var(--vp-c-text-3)]"> 
                <strong class="text-[var(--vp-c-text-2)]">
                  {{t(lang, 'features.extend')}}
                </strong>
                – {{t(lang, 'features.extend.desc')}}
              </div>
              <div class="text-[var(--vp-c-text-3)]"> 
                <strong class="text-[var(--vp-c-text-2)]">
                  {{t(lang, 'features.privacy')}}
                </strong>
                – {{t(lang, 'features.privacy.desc')}}
              </div>
              <div class="text-[var(--vp-c-text-3)]"> 
                <strong class="text-[var(--vp-c-text-2)]">
                  {{t(lang, 'features.unlimited')}}
                </strong>
                – {{t(lang, 'features.unlimited.desc')}}
              </div>
            </div>
          </div>

          <div 
            v-motion
            :initial="{ opacity: 0, y: 100 }"
            :enter="{ opacity: 1, y: 0, scale: 1 }"
            :delay="600"
            :duration="400" 
            id="subscribe" 
            class="my-40"
          >
            <div class="sm:flex sm:flex-col sm:align-center">
              <h1 
                class="text-4xl font-700 text-center"
              >
                {{ t(lang, 'subscribe') }}
              </h1>
              <div 
                class="text-[var(--vp-c-text-3)] mt-4 text-base text-center"
              >
                {{ t(lang, 'subscribe.desc') }}
              </div> 
              <a 
                class="h-34px font-semibold text-primary rounded-full px-5 mt-4 text-sm leading-6 flex-center duration-200 no-underline!"
                uno-hover="underline!"
                :href="routerPath(lang, '/docs/setting/subscribe')" 
              >
                {{ t(lang, 'subscribe.more') }}->
              </a> 
            </div>

            <div class="w-auto font-medium flex-center mt-12">
              <div class="h-12 bg-[var(--vp-c-gray-soft)] rounded-xl box-border">
                <div 
                  class="w-auto h-full inline-flex justify-center items-center cursor-pointer rounded-xl duration-200 px-5 text-14px box-border" 
                  :class="{'bg-primary text-[var(--vp-c-neutral-inverse)]': subDate == 'month'}"
                  @click="subDate = 'month'"
                >
                  {{ t(lang, 'subscribe.monthly') }}
                </div>
                <div 
                class="w-auto h-full inline-flex justify-center items-center cursor-pointer rounded-xl duration-200 px-5 text-14px box-border" 
                :class="{'bg-primary text-[var(--vp-c-neutral-inverse)]': subDate == 'year'}"
                @click="subDate = 'year'"
                >
                  {{ t(lang, 'subscribe.yearly') }}
                </div>
              </div>
            </div>

            <div class="w-full grid grid-cols-2 lt-sm:grid-cols-1 gap-6 mt-12">
              <div class="w-full flex justify-end lt-sm:justify-center">
                <div
                  class="w-full text-sm flex flex-col justify-between flex-1 flex-shrink-0 max-w-xs p-6 border border-solid border-[var(--vp-c-divider)] rounded-xl box-border"
                >
                  <div class="w-full leading-6 font-700">{{ t(lang, 'subscribe.pu') }}</div>
                  <div class="h-full flex-1">
                    <div class="mt-4">{{t(lang, 'subscribe.free.desc')}}1</div>
                    <div class="mt-4">{{t(lang, 'subscribe.free.desc')}}2</div>
                    <div class="mt-4">{{t(lang, 'subscribe.free.desc')}}3</div>
                    <div class="mt-4">{{t(lang, 'subscribe.free.desc')}}4</div>
                    <div class="mt-4">{{t(lang, 'subscribe.free.desc')}}5</div>
                  </div>
                  <div class="w-full flex flex-col mt-8">
                    <div class="">
                      <span class="text-xl font-extrabold white">{{t(lang, 'subscribe.free')}}</span>
                      <span class="text-base font-medium ml-1">¥/{{ subDate == 'year' ? t(lang, 'subscribe.year') : t(lang, 'subscribe.month') }}</span>
                    </div>
                    <a 
                      class="mt-4 items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline! cursor-pointer"
                      uno-hover="text-primary! border-primary"
                      target="_blank"
                      href="https://v.islenote.com/register"
                    >
                      {{ t(lang, 'register') }}
                    </a> 
                    <a 
                      href="https://v.islenote.com" 
                      target="_blank"
                      class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 flex-center duration-200 no-underline!"
                      uno-hover="underline!"
                    >
                      <span class="block lg:inline">{{ t(lang, 'account') }} {{ t(lang, 'login') }}<span aria-hidden="true">→</span> </span> 
                    </a> 
                  </div>
                </div>
              </div>

              <div class="w-full flex justify-start lt-sm:justify-center">
                <div
                  class="w-full text-sm flex flex-col justify-between flex-1 flex-shrink-0 max-w-xs p-6 border border-solid border-[var(--vp-c-divider)] rounded-xl box-border"
                >
                  <div class="w-full leading-6">
                    <span class="font-700">{{ t(lang, 'subscribe.su') }}</span>
                    <span class="ml-4px font-400">
                      · {{ t(lang, 'subscribe.su.desc1') }}{{ price[subDate].discount
                      }}{{ t(lang, 'subscribe.su.desc2') }}
                    </span>
                  </div>
                  <div class="h-full flex-1">
                    <div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}1</div>
                    <div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}2</div>
                    <div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}3</div>
                    <div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}4</div>
                    <div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}5</div>
                  </div>
                  <div class="w-full flex flex-col mt-8">
                    <div class="">
                      <span class="text-xl line-through">{{ price[subDate].oldPrice }}</span>
                      <span class="text-xl font-extrabold ml-4px text-primary"
                        >{{ price[subDate].price }}
                      </span>
                      <span class="text-base font-medium ml-1">¥/{{ subDate == 'year' ? t(lang, 'subscribe.year') : t(lang, 'subscribe.month') }}</span>
                    </div>
                    <a 
                      class="mt-4 items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline! cursor-pointer"
                      uno-hover="text-primary! border-primary"
                      target="_blank"
                      href="https://v.islenote.com/register"
                    >
                      {{ t(lang, 'register') }}
                    </a> 
                    <a 
                      href="https://v.islenote.com" 
                      target="_blank"
                      class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 flex-center duration-200 no-underline!"
                      uno-hover="underline!"
                    >
                      <span class="block lg:inline">{{ t(lang, 'account') }} {{ t(lang, 'login') }}<span aria-hidden="true">→</span> </span> 
                    </a> 
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </section>

    <section class="">
      <div
        class="mx-auto w-full lg:px-24 max-w-7xl md:px-12  items-center px-8 py-24"
      >
        <div class="sm:flex sm:flex-col sm:align-center">
          <h1 
            class="text-4xl font-700 text-center"
          >
            {{t(lang, 'feedback')}}
          </h1>
          <div 
            class="text-[var(--vp-c-text-3)] mt-4 text-base text-center"
          >
            {{ t(lang, 'feedback.desc') }}
          </div> 
          <a 
            class="h-34px font-semibold text-primary rounded-full px-5 mt-4 text-sm leading-6 flex-center duration-200 no-underline!"
            uno-hover="underline!"
            :href="routerPath(lang, '/docs/setting/feedback')" 
          >
            {{ t(lang, 'feedback.more') }}->
          </a> 
        </div>
        <ul
          class="mt-12! grid grid-cols-1 gap-16 lg:gap-8 md:gap-12 sm:grid-cols-2 lg:grid-cols-3"
        >
          <li class="list-none">
            <div class="h-full flex flex-col justify-between">
              <div>
                <div class="flex gap-x-1">
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                </div>
                <p class="lg:text-sm text-[var(--vp-c-text-3)] mt-4">“在线笔记我一直担心用户隐私，希望可以让用户更有能力并能更好地控制个人数据。”</p>
              </div>
              <footer class="flex justify-between items-center mt-6">
                <p class="lg:text-sm text-[var(--vp-c-text-2)] font-display">用户·A</p>
                <div class="w-22px h-22px rounded-2 bg-[var(--vp-c-text-1)] flex-center">
                  <icon-custom-sefen class="text-18px text-[var(--vp-c-neutral-inverse)]" />
                </div>
              </footer>
            </div>
          </li>
          <li class="list-none">
            <div class="h-full flex flex-col justify-between">
              <div>
                <div class="flex gap-x-1">
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                </div>
                <p class="lg:text-sm text-[var(--vp-c-text-3)] mt-4">“反馈了一个需求点，很快就被官方实现了，看得出来你们很注重用户体验以及反馈，哈哈哈”</p>
              </div>
              <footer class="flex justify-between items-center mt-6">
                <p class="lg:text-sm text-[var(--vp-c-text-2)] font-display">用户·D</p>
                <div class="w-22px h-22px rounded-2 bg-[var(--vp-c-text-1)] flex-center">
                  <icon-custom-sefen class="text-18px text-[var(--vp-c-neutral-inverse)]" />
                </div>
              </footer>
            </div>
          </li>
          <li class="list-none">
            <div class="h-full flex flex-col justify-between">
              <div>
                <div class="flex gap-x-1">
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                  <icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
                </div>
                <p class="lg:text-sm text-[var(--vp-c-text-3)] mt-4">“项目成功交付了，比预想中的要更好，很用心，nice，希望有机会可以继续合作。”</p>
              </div>
              <footer class="flex justify-between items-center mt-6">
                <p class="lg:text-sm text-[var(--vp-c-text-2)] font-display">客户·R</p>
                <div class="w-22px h-22px rounded-2 bg-[var(--vp-c-text-1)] flex-center">
                  <icon-custom-sefen class="text-18px text-[var(--vp-c-neutral-inverse)]" />
                </div>
              </footer>
            </div>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<style scoped>
.custom-home{
  width: 100%;
}


@media screen and (min-width: 640px) and (max-width: 960px) {
  .custom-home-banner__top-image{
    width: 280px;
  }
}

@media screen and (max-width: 640px) {
  .custom-home-banner__top-image{
    width: 200px;
  }
}
</style>