<template>
	<view class="tutorial-container">
		<!-- 顶部导航栏 -->
		<u-navbar title="使用教程" :autoBack="true" bgColor="#ffffff"
			titleStyle="color: #303133; font-weight: 600; font-size: 32rpx;" leftIconColor="#303133" :placeholder="true"
			fixed />

		<view class="tutorial-body">
			<!-- 1. 顶部应用概览 -->
			<view class="overview-card">
				<view class="overview-icon-wrapper">
					<u-icon name="file-text-fill" color="#ffffff" size="28"></u-icon>
				</view>
				<view class="overview-content">
					<text class="overview-title">什么是训记？</text>
					<text class="overview-desc">
						训记是一款专业的健身训练记录工具，帮助你科学规划训练计划、精准记录每次训练数据，让健身更高效。
					</text>
				</view>
			</view>

			<!-- 2. 核心功能 -->
			<view class="section-container">
				<view class="section-header">
					<view class="header-line"></view>
					<text class="header-title">核心功能</text>
					<view class="header-line"></view>
				</view>

				<view class="features-grid">
					<view class="feature-card" v-for="(item, index) in features" :key="index">
						<view class="feature-icon" :style="{ backgroundColor: item.bgColor }">
							<u-icon :name="item.icon" :color="item.iconColor" size="22"></u-icon>
						</view>
						<text class="feature-name">{{ item.name }}</text>
						<text class="feature-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>

			<!-- 3. 使用指南（步骤流程） -->
			<view class="section-container">
				<view class="section-header">
					<view class="header-line"></view>
					<text class="header-title">使用指南</text>
					<view class="header-line"></view>
				</view>

				<view class="steps-wrapper">
					<view class="step-card" v-for="(step, sIndex) in steps" :key="sIndex">
						<view class="step-header">
							<view class="step-badge">{{ sIndex + 1 }}</view>
							<view class="step-titles">
								<text class="step-main-title">{{ step.title }}</text>
								<text class="step-sub-title">{{ step.subtitle }}</text>
							</view>
						</view>

						<view class="step-details">
							<view class="detail-item" v-for="(detail, dIndex) in step.details" :key="dIndex">
								<view class="dot"></view>
								<text class="detail-text">{{ detail }}</text>
							</view>
						</view>

						<!-- 提示块：使用 uview-plus 标准图标 info-circle-fill -->
						<view class="step-tip" v-if="step.tip">
							<u-icon name="info-circle-fill" color="#e6a23c" size="16"></u-icon>
							<text class="tip-text">{{ step.tip }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 4. 常见问题 (手风琴交互) -->
			<view class="section-container">
				<view class="section-header">
					<view class="header-line"></view>
					<text class="header-title">常见问题</text>
					<view class="header-line"></view>
				</view>

				<view class="faq-wrapper">
					<u-collapse accordion :border="false">
						<u-collapse-item v-for="(faq, fIndex) in faqs" :key="fIndex" :name="fIndex">
							<template #title>
								<view class="faq-title-box">
									<view class="faq-tag q-tag">Q</view>
									<text class="faq-question-text">{{ faq.question }}</text>
								</view>
							</template>
							<view class="faq-answer-box">
								<view class="faq-tag a-tag">A</view>
								<text class="faq-answer-text">{{ faq.answer }}</text>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>

			<!-- 5. 底部标语 -->
			<view class="footer-section">
				<text class="footer-text">训练贵在坚持，训记陪你一同成长</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 1. 核心功能数据 (均为 uview-plus 官方内置标准图标名)
const features = ref([
	{
		icon: 'order',
		iconColor: '#ff9900',
		name: '训练计划',
		desc: '创建和管理个性化训练计划',
		bgColor: '#fff7cc'
	},
	{
		icon: 'grid',
		iconColor: '#19be6b',
		name: '动作库',
		desc: '丰富的训练动作库与详情',
		bgColor: '#dbf5e6'
	},
	{
		icon: 'calendar',
		iconColor: '#2979ff',
		name: '训练日历',
		desc: '日历视图记录每日训练',
		bgColor: '#ecf5ff'
	},
	{
		icon: 'list-dot',
		iconColor: '#fa3534',
		name: '数据分析',
		desc: '多维度训练数据统计分析',
		bgColor: '#fef0f0'
	}
])

// 2. 使用步骤数据
const steps = ref([
	{
		title: '创建训练计划',
		subtitle: '打造你的专属训练方案',
		details: [
			'进入「我的」页面，点击「训练计划」进入计划管理',
			'选择「新建计划」，可从官方模板快速创建，也可自定义空白计划',
			'设置训练周期、训练日安排，拖拽调整动作顺序',
			'保存后即可在训练日历中按计划执行'
		],
		tip: '建议新手从官方模板开始，逐步了解后再自定义计划'
	},
	{
		title: '添加训练动作',
		subtitle: '每个动作都值得被记录',
		details: [
			'在训练计划中点击「添加动作」，进入动作库',
			'按部位分类浏览动作，或直接搜索动作名称',
			'点击动作可查看详细说明、肌肉示意图和训练要点',
			'选择动作后设置组数、次数、重量等训练参数'
		],
		tip: '支持创建超级组，将两个动作组合交替训练，提升效率'
	},
	{
		title: '使用训练日历',
		subtitle: '一目了然的训练记录',
		details: [
			'进入「训练」页面查看训练日历，日历标记已训练日期',
			'点击日期可添加当日训练内容，从计划模板一键导入',
			'已完成的训练会用不同颜色标识，方便回顾',
			'长按训练记录可编辑或删除'
		],
		tip: '坚持每天打卡，日历会越来越丰富哦'
	},
	{
		title: '记录训练数据',
		subtitle: '精准追踪每次进步',
		details: [
			'训练过程中逐组录入重量、次数、休息时间等数据',
			'内置计时器功能，方便控制组间休息时长',
			'支持查看每个动作的历史训练数据对比',
			'训练完成后自动汇总本次训练总量'
		],
		tip: '详细记录每次数据，才能看到自己的进步轨迹'
	},
	{
		title: '查看训练分析',
		subtitle: '数据驱动，科学训练',
		details: [
			'在「数据」页面查看训练频率、训练量趋势图表',
			'统计各部位训练次数，发现训练偏重或遗漏',
			'查看个人纪录（PR），见证力量增长',
			'训练日历热力图直观展示训练频率'
		],
		tip: '定期回顾训练数据，及时调整训练计划方向'
	}
])

// 3. 常见问题数据
const faqs = ref([
	{
		question: '训记是免费的吗？',
		answer: '训记基础功能完全免费，包括训练计划创建、动作记录、日历打卡等核心功能均可畅快使用。'
	},
	{
		question: '训练数据会丢失吗？',
		answer: '训练数据会自动保存在云端，只要登录同一账号，更换设备数据也不会丢失。'
	},
	{
		question: '如何从模板快速创建计划？',
		answer: '在「我的模板」或「模板中心」选择适合自己的训练模板，点击「使用模板」即可一键生成训练计划。'
	},
	{
		question: '一个计划可以包含多少动作？',
		answer: '训练计划对动作数量没有硬性限制，你可以根据实际训练需求自由添加和排序。'
	},
	{
		question: '支持自定义动作吗？',
		answer: '支持！你可以创建个人专属动作，自定义动作名称、目标部位和训练参数。'
	}
])
</script>

<style lang="scss" scoped>
.tutorial-container {
	min-height: 100vh;
	background-color: #f6f7f9;
	padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.tutorial-body {
	padding: 24rpx 30rpx;
}

/* 顶部概览卡片 */
.overview-card {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #2979ff 0%, #609cff 100%);
	border-radius: 20rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.15);

	.overview-icon-wrapper {
		width: 90rpx;
		height: 90rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.overview-content {
		flex: 1;

		.overview-title {
			font-size: 32rpx;
			font-weight: 700;
			color: #ffffff;
			margin-bottom: 8rpx;
			display: block;
		}

		.overview-desc {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.9);
			line-height: 36rpx;
			display: block;
		}
	}
}

/* 通用分区标题 */
.section-container {
	margin-bottom: 32rpx;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24rpx;

	.header-line {
		width: 40rpx;
		height: 2rpx;
		background-color: #dcdfe6;
	}

	.header-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #909399;
		margin: 0 20rpx;
	}
}

/* 核心功能网格 */
.features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;

	.feature-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 28rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);

		.feature-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 16rpx;
		}

		.feature-name {
			font-size: 28rpx;
			font-weight: 600;
			color: #303133;
			margin-bottom: 8rpx;
		}

		.feature-desc {
			font-size: 22rpx;
			color: #909399;
			text-align: center;
			line-height: 32rpx;
		}
	}
}

/* 步骤流程 */
.steps-wrapper {
	.step-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);

		.step-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.step-badge {
				width: 44rpx;
				height: 44rpx;
				background: #2979ff;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				font-weight: 700;
				color: #ffffff;
				margin-right: 16rpx;
				flex-shrink: 0;
			}

			.step-titles {
				display: flex;
				flex-direction: column;

				.step-main-title {
					font-size: 30rpx;
					font-weight: 600;
					color: #303133;
				}

				.step-sub-title {
					font-size: 22rpx;
					color: #909399;
					margin-top: 2rpx;
				}
			}
		}

		.step-details {
			padding-left: 60rpx;

			.detail-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 12rpx;

				.dot {
					width: 10rpx;
					height: 10rpx;
					background-color: #2979ff;
					border-radius: 50%;
					margin-top: 12rpx;
					margin-right: 12rpx;
					flex-shrink: 0;
				}

				.detail-text {
					font-size: 25rpx;
					color: #606266;
					line-height: 36rpx;
					flex: 1;
				}
			}
		}

		.step-tip {
			display: flex;
			align-items: center;
			background-color: #fdf6ec;
			border-radius: 8rpx;
			padding: 12rpx 16rpx;
			margin-top: 16rpx;
			margin-left: 60rpx;

			.tip-text {
				font-size: 22rpx;
				color: #e6a23c;
				margin-left: 10rpx;
				line-height: 32rpx;
				flex: 1;
			}
		}
	}
}

/* FAQ 折叠面板适配 */
.faq-wrapper {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 10rpx 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);

	.faq-title-box {
		display: flex;
		align-items: center;

		.faq-question-text {
			font-size: 26rpx;
			font-weight: 600;
			color: #303133;
		}
	}

	.faq-answer-box {
		display: flex;
		align-items: flex-start;
		padding: 12rpx 0;

		.faq-answer-text {
			font-size: 24rpx;
			color: #606266;
			line-height: 36rpx;
			flex: 1;
		}
	}

	.faq-tag {
		width: 36rpx;
		height: 36rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		font-weight: 700;
		margin-right: 16rpx;
		flex-shrink: 0;

		&.q-tag {
			background-color: #2979ff;
			color: #ffffff;
		}

		&.a-tag {
			background-color: #e1f3d8;
			color: #67c23a;
		}
	}
}

/* 底部提示 */
.footer-section {
	padding: 30rpx 0 10rpx;
	text-align: center;

	.footer-text {
		font-size: 22rpx;
		color: #c0c4cc;
	}
}
</style>