<template>
    <div class="page-container">
        <div class="page-header">
            <el-breadcrumb class="breadcrumb" separator="/">
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="page-tab">
            <el-segmented v-model="activeTab" class="tab" :options="options" block size="large" />
        </div>
        <div class="page-content">
            <!-- <el-divider content-position="left">选择我们的服务</el-divider>
            <div class="button-group">
                <NuxtLink :to="$localePath('/about/contact-us')">
                    <el-card class="card-button">
                        <el-icon class="icon" size="80">
                            <ElIconService />
                        </el-icon>
                        <br>
                        联系我们
                    </el-card>
                </NuxtLink>
                <NuxtLink :to="$localePath('/about/contact-us')">
                    <el-card class="card-button">
                        <el-icon class="icon" size="80">
                            <ElIconService />
                        </el-icon>
                        <br>
                        联系我们
                    </el-card>
                </NuxtLink>
            </div> -->

        </div>
    </div>
</template>

<script setup lang="ts">
const activeTab = ref('faq')
const options = [
    { label: '常见问题', value: 'faq' },
    { label: '联系售后', value: 'contact-us' },
    { label: '文档资料', value: 'documents' },
]
</script>

<style scoped>
.page-container {
    padding: 2rem 1rem;
}

.breadcrumb {
    padding: 1rem 1rem;
}

:deep(.el-divider__text) {
    font-size: 1.2rem;
    font-weight: bold;
}

.button-group {
    display: flex;
    justify-content: left;
    margin-top: 2rem;
    margin-left: 2rem;
    gap: 20px;
}

.card-button {
    width: 20%;
    min-width: 200px;
    padding: 20px;
    margin: 0 auto;
    cursor: pointer;
    text-align: center;
    font-size: 1.5em;
}

.card-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
</style>