<template>
    <div class="page-container">
        <div class="page-tab">
            <el-segmented
v-model="activeTab" class="segmented" :options="options" block size="large"
                @change="handleSegmentedChange" />
        </div>
        <div class="page-header">
            <h1 class="page-title">{{ $t('navigation.support') }}</h1>
            <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-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('support')
const options = [
    { label: '服务支持', value: 'support' },
    { label: '常见问题', value: 'faq' },
    { label: '联系售后', value: 'contact-us' },
    { label: '文档资料', value: 'documents' },
]

const handleSegmentedChange = (value: string) => {
    const localePath = useLocalePath()
    navigateTo(localePath(`/support/${value}`))
}
</script>

<style scoped>
.page-header {
    display: flex;
    padding: 2rem 2rem 0rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--el-color-primary);
    margin-bottom: 1rem;
}

.breadcrumb {
    margin-left: auto;
}

.segmented {
    --el-segmented-bg-color: transparent;
    --el-segmented-item-active-color: var(--el-color-primary);
    --el-segmented-item-color: var(--el-text-color-secondary);
    --el-segmented-item-hover-color: var(--el-color-primary);
    --el-segmented-item-border-color: transparent;
    --el-segmented-item-active-border-color: transparent;
    border-bottom: 1px solid var(--el-border-color-light);
}

.segmented :deep(.el-segmented__item-selected) {
    /* --el-border-radius-base: 16px; */
    transition: none;
    background: transparent;
}

.segmented :deep(.el-segmented__item) {

    &:hover {
        background: transparent;
        color: var(--el-color-primary);
    }

    &.is-selected {
        color: var(--el-color-primary-dark-2);
        border-bottom: 4px solid var(--el-color-primary-dark-2);
    }
}

.page-content {
    padding: 2rem;
}

: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>