<template>
	<view class="member-page">
		<view class="hero-card">
			<TnIcon name="vip-fill" :size="68" color="#F59E0B" />
			<text class="hero-title">会员中心</text>
			<text class="hero-desc">高级功能正在陆续开放，当前可继续免费使用基础健康管理能力。</text>
		</view>

		<view class="feature-card" v-for="item in features" :key="item.title">
			<TnIcon :name="item.icon" :size="36" :color="item.color" />
			<view class="feature-main">
				<text class="feature-title">{{ item.title }}</text>
				<text class="feature-desc">{{ item.desc }}</text>
			</view>
			<TnTag bg-color="#FFF7ED" text-color="#F97316" size="sm" shape="round">规划中</TnTag>
		</view>
	</view>
</template>

<script setup lang="ts">
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
import TnTag from '@/uni_modules/tuniaoui-vue3/components/tag/src/tag.vue'

const features = [
	{ title: '数据导出', desc: '导出宠物健康记录和提醒数据', icon: 'folder-upload', color: '#06B6D4' },
	{ title: '多端备份', desc: '自动同步并保护重要档案', icon: 'cloud-fill', color: '#2563EB' },
	{ title: '高级统计', desc: '查看体重、花费和健康趋势', icon: 'data-fill', color: '#14B8A6' },
]
</script>

<style lang="scss" scoped>
.member-page {
	min-height: 100vh;
	background: #F8FAFC;
	padding: 28rpx;
	box-sizing: border-box;
}

.hero-card,
.feature-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
}

.hero-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14rpx;
	padding: 48rpx 32rpx;
	text-align: center;
}

.hero-title {
	font-size: 38rpx;
	font-weight: 900;
	color: #0F172A;
}

.hero-desc,
.feature-desc {
	font-size: 25rpx;
	color: #64748B;
	line-height: 1.55;
}

.feature-card {
	display: flex;
	align-items: center;
	gap: 18rpx;
	margin-top: 18rpx;
	padding: 24rpx;
}

.feature-main {
	flex: 1;
	min-width: 0;
}

.feature-title {
	display: block;
	font-size: 29rpx;
	font-weight: 800;
	color: #0F172A;
}
</style>
