<template>
  <div class="min-h-screen bg-black text-white">
    <!-- Full Width Header -->
    <div class="h-[88px] md:h-[125px]">
      <div class="fixed top-[20px] z-50 w-full md:top-[45px]">
        <div class="container">
          <header
            class="flex h-[68px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px]"
          >
            <router-link to="/" class="flex items-center gap-2">
              <!-- Desktop Logo -->
              <!--              <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
              <!-- Mobile Logo -->
              <MobileLogo
                :src="MobileLogo"
                alt="Hi快VPN"
                class="block h-[28px] text-black md:h-[50px]"
              />
            </router-link>
            <div class="text-xl font-[600] text-black md:text-3xl">Hi快iOS版本下载教程</div>
          </header>
        </div>
      </div>
    </div>
    <div class="container md:px-[252px]">
      <div
        class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[110px] md:pb-[30px] md:text-3xl"
      >
        请选择适用您情形的选项
      </div>
      <div class="flex items-center justify-between">
        <div
          class="w-1/2 rounded-full border-5 p-[6px]"
          :class="[activeIndex === 0 ? 'border-white' : 'border-black']"
          @click="activeIndex = 0"
        >
          <Button
            class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
          >
            我只有中国大陆Apple ID
          </Button>
        </div>
        <div
          class="w-1/2 rounded-full border-5 p-[6px]"
          :class="[activeIndex === 1 ? 'border-white' : 'border-black']"
          @click="activeIndex = 1"
        >
          <Button
            class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
          >
            我有海外Apple ID
          </Button>
        </div>
      </div>

      <!--  tab1    -->
      <div v-show="activeIndex === 0">
        <div class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:text-3xl">
          Hi快提供三种下载方式
        </div>
        <DownloadMethodList />
      </div>
      <div v-show="activeIndex === 1">
        <div
          class="mx-auto flex w-[237px] items-center justify-center pt-[34px] pb-[15px] text-center text-xl font-[900] md:w-full md:gap-[18px] md:pt-[100px] md:text-3xl"
        >
          <ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
        </div>
        <div class="mx-auto h-[101px] w-[247px] md:h-[202px] md:w-[594px]">
          <img src="./Group%20100.png" class="h-full w-full" alt="下载" />
        </div>
      </div>
      <!--  tab2    -->
    </div>

    <div class="container md:px-[92px]">
      <div class="pt-[56px] pb-[15px] text-center text-xl font-[900] md:pb-[69px] md:text-3xl">
        常见问题与解答
      </div>
      <div class="px-[24px]">
        <FAQAccordion />
      </div>
    </div>

    <div class="container px-[92px] pt-[34px]">
      <div class="mx-auto w-[240px] text-center font-black text-[#757575] md:w-full md:text-xl">
        若您在下载过程中遇到任何问题，
        <br class="md:hidden" />
        点击右下角在线客服按钮，
        <br class="md:hidden" />
        会有专业客服帮您解决问题
      </div>
    </div>

    <div class="px-[18px] pt-[34px] pb-[calc(50px+env(safe-area-inset-bottom))]">
      <div class="pb-[15px] text-center text-xl font-[900] md:text-xl">其他客户端下载</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// Help page logic
import Logo from '@/pages/Home/logo.svg?component'
import MobileLogo from '@/pages/Home/mobile-logo.svg?component'
import ChatIcon from './Vector.svg?component'
import DownloadMethodList from './DownloadMethodList/DownloadMethodList.vue'
import FAQAccordion from './FAQAccordion/index.vue'
import { Button } from '@/components/ui/button'

const activeIndex = ref(0)
</script>
