<template>
    <section>
        <van-collapse v-model="activeNames" class="mb-4">
            <van-collapse-item name="1" size="large">
                <template #icon>
                    <img src="@/assets/imgs/home/icon-invite.png" alt="" class="h-6 w-6 mr-4">
                </template>
                <template #title>
                    <div class="text-base font-semibold">{{ t('home.introduce.i_f') }}</div>
                </template>
                <template #default>
                    <div class="flex flex-col items-center justify-center">
                        <div class="text-lg font-bold mb-2 text-black">{{ t('home.introduce.j_s') }}</div>
                        <div class="text-sm font-bold text-black">{{ t('home.introduce.c_c') }}</div>
                        <div class="qr-bg-wrap">
                            <div class="mb-4">
                                <QRCodeVue3 :width="180" :height="180" :value="data" :key="data"
                                    :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
                                    :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }" :dotsOptions="{
                                        type: 'dots',
                                        color: '#26249a',
                                        gradient: {
                                            type: 'linear',
                                            rotation: 0,
                                            colorStops: [
                                                { offset: 0, color: '#26249a' },
                                                { offset: 1, color: '#26249a' },
                                            ],
                                        },
                                    }" :backgroundOptions="{ color: '#ffffff' }"
                                    :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
                                    :cornersDotOptions="{ type: undefined, color: '#000000' }" fileExt="png" />
                            </div>
                        </div>
                        <van-button class="mb-2" block color="linear-gradient(90deg, #F70 0%, #FF4900 100%)"
                            @click="copy(data)">
                            <span class="text-sm font-bold">{{ t('home.introduce.c_l') }}</span>
                        </van-button>
                    </div>
                </template>
            </van-collapse-item>
        </van-collapse>
        <van-collapse v-model="activeNames" class="mb-4">
            <van-collapse-item name="2">
                <template #icon>
                    <img src="@/assets/imgs/home/icon-term.png" alt="" class="h-6 w-6 mr-4">
                </template>
                <template #title>
                    <div class="text-base font-semibold">{{ t('home.introduce.terms_a') }}</div>
                </template>
                <template #default>
                    <div>
                        <div class="p-4 space-y-6 text-base leading-relaxed text-[#1D1F24] ">
                            <p class="mb-4 text-sm font-medium">{{ t('home.introduce.terms_c') }}</p>
                            <p>
                                {{ t('home.introduce.terms_c_1') }}
                            </p>
                            <p class="">
                                {{ t('home.introduce.terms_c_2') }}
                            </p>
                            <p>{{ t('home.introduce.terms_c_3') }}</p>
                            <p>{{ t('home.introduce.terms_c_4') }}</p>
                            <p>{{ t('home.introduce.terms_c_5') }}</p>
                            <p>{{ t('home.introduce.terms_c_6') }}</p>
                            <p>{{ t('home.introduce.terms_c_7') }}</p>
                            <p>{{ t('home.introduce.terms_c_8') }}</p>
                            <p>{{ t('home.introduce.terms_c_9') }}</p>
                            <p>{{ t('home.introduce.terms_c_10') }}</p>
                            <p>{{ t('home.introduce.terms_c_11') }}</p>
                            <p>{{ t('home.introduce.terms_c_12') }}</p>
                            <p>{{ t('home.introduce.terms_c_13') }}</p>
                            <p>{{ t('home.introduce.terms_c_14') }}</p>
                            <p>{{ t('home.introduce.terms_c_15') }}</p>
                            <p>{{ t('home.introduce.terms_c_16') }}</p>
                            <p>{{ t('home.introduce.terms_c_17') }}</p>
                            <p>{{ t('home.introduce.terms_c_18') }}</p>
                            <p>{{ t('home.introduce.terms_c_19') }}</p>
                            <p>{{ t('home.introduce.terms_c_20') }}</p>
                            <p>{{ t('home.introduce.terms_c_21') }}</p>
                            <p>{{ t('home.introduce.terms_c_22') }}</p>
                            <p>{{ t('home.introduce.terms_c_23') }}</p>
                            <p>{{ t('home.introduce.terms_c_24') }}</p>
                            <p>{{ t('home.introduce.terms_c_25') }}</p>
                            <p>{{ t('home.introduce.terms_c_26') }}</p>
                            <p>{{ t('home.introduce.terms_c_27') }}</p>
                            <p>{{ t('home.introduce.terms_c_28') }}</p>
                            <p>{{ t('home.introduce.terms_c_29') }}</p>
                            <p>{{ t('home.introduce.terms_c_31') }}</p>
                            <p>{{ t('home.introduce.terms_c_32') }}</p>
                        </div>
                    </div>
                </template>
            </van-collapse-item>
        </van-collapse>
        <van-collapse v-model="activeNames" class="mb-4">
            <van-collapse-item name="3">
                <template #icon>
                    <img src="@/assets/imgs/home/icon-faq.png" alt="" class="h-6 w-6 mr-4">
                </template>
                <template #title>
                    <div class="text-base font-semibold">FAQs</div>
                </template>
                <template #default>
                    <div>
                        <div class="bg-white">
                            <div class="mx-auto max-w-7xl px-6 py-10 sm:py-32 lg:px-8 lg:py-40">
                                <div class="mx-auto max-w-4xl divide-y divide-gray-900/10">
                                    <h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently asked
                                        questions
                                    </h2>
                                    <dl class="mt-10 space-y-6 divide-y divide-gray-900/10">
                                        <Disclosure as="div" v-for="faq in faqs" :key="faq.question" class="pt-6"
                                            v-slot="{ open }">
                                            <dt>
                                                <DisclosureButton
                                                    class="flex w-full items-start justify-between text-left text-gray-900">
                                                    <span class="text-base font-semibold leading-7">{{ faq.question
                                                    }}</span>
                                                    <span class="ml-6 flex h-7 items-center">
                                                        <PlusSmallIcon v-if="!open" class="h-6 w-6" aria-hidden="true" />
                                                        <MinusSmallIcon v-else class="h-6 w-6" aria-hidden="true" />
                                                    </span>
                                                </DisclosureButton>
                                            </dt>
                                            <DisclosurePanel as="dd" class="mt-2 pr-12">
                                                <p class="text-base leading-7 text-gray-600">{{ faq.answer }}</p>
                                            </DisclosurePanel>
                                        </Disclosure>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </van-collapse-item>
        </van-collapse>
        <van-collapse v-model="activeNames" class="mb-4">
            <van-collapse-item name="4">
                <template #icon>
                    <img src="@/assets/imgs/home/icon-about.png" alt="" class="h-6 w-6 mr-4">
                </template>
                <template #title>
                    <div class="text-base font-semibold">{{ t('home.introduce.about_us.title') }}</div>
                </template>
                <template #default>
                    <div class="p-4 space-y-6 text-base leading-relaxed text-[#1D1F24]  ">
                        <p class="mb-12">{{ t('home.introduce.about_us.a_1') }}</p>
                        <p>{{ t('home.introduce.about_us.a_2') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_3') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_4') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_5') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_6') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_7') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_8') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_9') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_10') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_11') }}</p>
                        <p class="mb-12">{{ t('home.introduce.about_us.a_12') }}</p>
                        <p class="mb-10">{{ t('home.introduce.about_us.a_13') }}</p>
                    </div>
                </template>
            </van-collapse-item>
        </van-collapse>
        <van-toast v-model:show="show" style="padding: 20px">
            <template #message>
                <div class="text-md">{{ message }}</div>
            </template>
        </van-toast>
    </section>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
import { MinusSmallIcon, PlusSmallIcon } from '@heroicons/vue/24/outline'
import QRCodeVue3 from "qrcode-vue3";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const faqs = [
    {
        question: t('helpGuide.q_1'),
        answer: t('helpGuide.a_1'),
    },
    {
        question: t('helpGuide.q_2'),
        answer: t('helpGuide.a_2'),
    },
    {
        question: t('helpGuide.q_3'),
        answer: t('helpGuide.a_3'),
    },
    {
        question: t('helpGuide.q_4'),
        answer: t('helpGuide.a_4'),
    },
    {
        question: t('helpGuide.q_5'),
        answer: t('helpGuide.a_5'),
    }
    // More questions...
]
const props = defineProps({
    invitationCode: {
        type: String,
        required: true
    }
})

const activeNames = ref<string[]>([]);
const origin = window.location.origin
const data = ref('')
watchEffect(() => {
    data.value = origin + '/sign-up?invitationCode=' + props.invitationCode
})
const message = ref('')
const show = ref(false)
const copy = async (text: string) => {
    await navigator.clipboard.writeText(text)
    message.value = 'Copy Success'
    show.value = true
}
</script>

<style scoped >
.qr-bg-wrap {
    background-image: url("@/assets/imgs/phone_border_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 20;
}
</style>


