<template>
	<scroll-view class="about-page" scroll-y :scroll-with-animation="true">
		<!-- 品牌区 -->
		<view class="brand-section">
			<view class="brand-logo-card">
				<image class="brand-logo-img" src="/static/logo.jpg" mode="aspectFit" />
			</view>
			<text class="brand-name">毛球手账</text>
			<text class="brand-slogan">让宠物健康管理像记账一样简单</text>
		</view>

		<!-- 版本信息 -->
		<view class="info-card">
			<view class="info-row">
				<text class="info-label">当前版本</text>
				<text class="info-value">v1.0.0</text>
			</view>
			<view class="info-row">
				<text class="info-label">Build</text>
				<text class="info-value">100</text>
			</view>
		</view>

		<!-- 核心功能 -->
		<view class="feature-section">
			<view class="section-title">核心功能</view>
			<view class="feature-grid">
				<view v-for="f in features" :key="f.label" class="feature-item">
					<view class="feature-icon-wrap" :style="{ background: f.bg }">
						<TnIcon :name="f.icon" :size="40" :color="f.color" />
					</view>
					<text class="feature-name">{{ f.label }}</text>
					<text class="feature-desc">{{ f.desc }}</text>
				</view>
			</view>
		</view>

		<!-- 技术信息 -->
		<view class="tech-card">
			<view class="section-title">关于我们</view>
			<view class="tech-list">
				<view class="tech-item">
					<TnIcon name="copyright" :size="36" color="#F97316" />
					<text class="tech-text">毛球手账 版权所有</text>
				</view>
				<view class="tech-item">
					<TnIcon name="safe" :size="36" color="#14B8A6" />
					<text class="tech-text">数据采用云端加密存储</text>
				</view>
				<view class="tech-item">
					<TnIcon name="floral" :size="36" color="#8B5CF6" />
					<text class="tech-text">用心关爱每一只毛孩子</text>
				</view>
			</view>
		</view>

		<!-- 联系与反馈 -->
		<view class="contact-card">
			<view class="contact-item" @click="handleFeedback">
				<view class="contact-icon-wrap">
					<TnIcon name="service" :size="40" color="#F97316" />
				</view>
				<text class="contact-text">帮助与反馈</text>
				<TnIcon name="right" :size="28" color="#D1D5DB" />
			</view>
			<view class="contact-item" @click="handleAgreement">
				<view class="contact-icon-wrap">
					<TnIcon name="order" :size="40" color="#3B82F6" />
				</view>
				<text class="contact-text">用户协议与隐私政策</text>
				<TnIcon name="right" :size="28" color="#D1D5DB" />
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer-section">
			<text class="footer-text">Copyright 2024 FurBall Team</text>
			<text class="footer-text">All Rights Reserved</text>
		</view>

		<view class="bottom-placeholder" />
	</scroll-view>
</template>

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

const features = reactive([
	{
		icon: 'floral-fill',
		label: '宠物档案',
		desc: '记录宠物品种、年龄、体重等信息',
		color: '#F97316',
		bg: '#FFF7ED',
	},
	{
		icon: 'write-fill',
		label: '健康记录',
		desc: '追踪疫苗接种、体检、用药历史',
		color: '#14B8A6',
		bg: '#F0FDFA',
	},
	{
		icon: 'calendar-fill',
		label: '日程提醒',
		desc: '驱虫、洗澡、体检智能提醒',
		color: '#8B5CF6',
		bg: '#F5F3FF',
	},
	{
		icon: 'cloud-fill',
		label: '云端同步',
		desc: '数据安全备份，多端共享',
		color: '#3B82F6',
		bg: '#EFF6FF',
	},
	{
		icon: 'inventory-fill',
		label: '养宠百科',
		desc: '品种知识、常见病护理指南',
		color: '#EC4899',
		bg: '#FDF2F8',
	},
	{
		icon: 'vip-fill',
		label: '会员专享',
		desc: '数据导出、高级分析等特权',
		color: '#F59E0B',
		bg: '#FFFBEB',
	},
])

function handleFeedback() {
	uni.navigateTo({ url: '/pages/mine/feedback' })
}

function handleAgreement() {
	uni.showModal({
		title: '用户协议与隐私政策',
		content:
			'我们仅收集用于提供宠物健康管理服务所必需的信息，包括你的微信昵称、头像以及宠物档案数据。我们承诺不向第三方出售你的数据。',
		showCancel: false,
	})
}
</script>

<style lang="scss">
$primary: #F97316;
$primary-bg: #FFF7ED;
$text-dark: #431407;
$text-body: #7C2D12;
$text-muted: #9CA3AF;
$card-bg: #FFFFFF;
$border-color: #FED7AA;
$radius-xl: 36rpx;
$radius-lg: 28rpx;
$shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.08);

.about-page {
	height: 100vh;
	background-color: $primary-bg;
	box-sizing: border-box;
}

// === 品牌区 ===
.brand-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80rpx 0 48rpx;
}

.brand-logo-card {
	width: 160rpx;
	height: 160rpx;
	border-radius: 40rpx;
	background: $card-bg;
	border: 4rpx solid $border-color;
	box-shadow: 0 16rpx 40rpx rgba(249, 115, 22, 0.15);
	padding: 16rpx;
	box-sizing: border-box;
	margin-bottom: 28rpx;
}

.brand-logo-img {
	width: 100%;
	height: 100%;
	border-radius: 28rpx;
}

.brand-name {
	font-size: 48rpx;
	font-weight: 800;
	color: $text-dark;
	letter-spacing: 4rpx;
	margin-bottom: 12rpx;
}

.brand-slogan {
	font-size: 26rpx;
	color: $text-body;
	opacity: 0.7;
}

// === 版本信息 ===
.info-card {
	margin: 0 24rpx 32rpx;
	background: $card-bg;
	border-radius: $radius-lg;
	border: 2rpx solid $border-color;
	box-shadow: $shadow;
	padding: 28rpx 28rpx;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14rpx 0;

	&:last-child {
		padding-bottom: 0;
	}
}

.info-label {
	font-size: 28rpx;
	color: $text-muted;
}

.info-value {
	font-size: 28rpx;
	font-weight: 600;
	color: $text-dark;
}

// === 核心功能 ===
.feature-section {
	margin: 0 24rpx 32rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: 700;
	color: $text-dark;
	margin-bottom: 20rpx;
	padding-left: 8rpx;
}

.feature-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.feature-item {
	width: calc(50% - 8rpx);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
	padding: 28rpx 16rpx;
	background: $card-bg;
	border-radius: $radius-lg;
	border: 2rpx solid $border-color;
	box-shadow: $shadow;
	box-sizing: border-box;
}

.feature-icon-wrap {
	width: 72rpx;
	height: 72rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-name {
	font-size: 26rpx;
	font-weight: 700;
	color: $text-dark;
}

.feature-desc {
	font-size: 20rpx;
	color: $text-muted;
	text-align: center;
	line-height: 1.5;
}

// === 技术信息 ===
.tech-card {
	margin: 0 24rpx 32rpx;
	background: $card-bg;
	border-radius: $radius-lg;
	border: 2rpx solid $border-color;
	box-shadow: $shadow;
	padding: 28rpx 28rpx 20rpx;
}

.tech-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	padding-top: 8rpx;
}

.tech-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.tech-text {
	font-size: 28rpx;
	font-weight: 500;
	color: $text-body;
}

// === 联系与反馈 ===
.contact-card {
	margin: 0 24rpx 32rpx;
	background: $card-bg;
	border-radius: $radius-lg;
	border: 2rpx solid $border-color;
	box-shadow: $shadow;
	overflow: hidden;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 28rpx;
	border-bottom: 2rpx solid #FEF3C7;

	&:last-child {
		border-bottom: none;
	}
}

.contact-icon-wrap {
	width: 68rpx;
	height: 68rpx;
	border-radius: 18rpx;
	background: $primary-bg;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.contact-text {
	flex: 1;
	font-size: 28rpx;
	font-weight: 600;
	color: $text-dark;
}

// === 底部 ===
.footer-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 40rpx 0 12rpx;
}

.footer-text {
	font-size: 22rpx;
	color: $text-muted;
}

.bottom-placeholder {
	height: 60rpx;
}
</style>
