<template>
	<view class="home-page">
		<view class="page-content page-fade" :class="{ 'enter-active': enterActive }">
			<view class="safe-top"></view>
			<view class="page-body">
			<view class="banner-wrap">
				<view class="banner-top">
					<view>
						<text class="banner-tag">军旅规划助手</text>
						<text class="banner-title">高中生规划</text>
					</view>
					<view class="banner-search" @click="onTap('搜索')">
						<uni-icons type="search" color="#ffffff" :size="18" />
					</view>
				</view>
				<view class="banner-visual">
					<view class="plane-icon">
						<uni-icons type="paperplane-filled" color="#ffffff" :size="28" />
					</view>
					<view class="book-icon">
						<uni-icons type="compose" color="#ffffff" :size="28" />
					</view>
				</view>
				<view class="entry-grid">
					<view v-for="item in heroEntries" :key="item" class="entry-item" @click="onTap(item)">
						<text>{{ item }}</text>
						<uni-icons type="forward" color="#ffffff" :size="14" />
					</view>
				</view>
			</view>

			<view class="pair-grid">
				<view v-for="card in firstCards" :key="card.title" class="topic-card" :class="card.theme" @click="openTopic(card.topicKey)">
					<view class="topic-head">
						<text class="topic-title">{{ card.title }}</text>
						<view class="head-arrow" @click.stop="openTopic(card.topicKey)">
							<uni-icons type="arrow-right" color="#ffffff" :size="12" />
						</view>
					</view>
					<view v-for="item in card.items" :key="item" class="topic-item" @click.stop="openTopic(card.topicKey)">
						<text class="topic-text">{{ item }}</text>
						<uni-icons type="forward" color="#ffffff" :size="12" />
					</view>
				</view>
			</view>

			<view class="core-strip" @click="onTap('义务兵报名及发展规划')">
				<text>义务兵报名及发展规划</text>
			</view>

			<view class="pair-grid second-grid">
				<view v-for="card in secondCards" :key="card.title" class="topic-card" :class="card.theme" @click="openTopic(card.topicKey)">
					<view class="topic-head">
						<text class="topic-title">{{ card.title }}</text>
						<view class="head-arrow" @click.stop="openTopic(card.topicKey)">
							<uni-icons type="arrow-right" color="#ffffff" :size="12" />
						</view>
					</view>
					<view v-for="item in card.items" :key="item" class="topic-item" @click.stop="openTopic(card.topicKey)">
						<text class="topic-text">{{ item }}</text>
						<uni-icons type="forward" color="#ffffff" :size="12" />
					</view>
				</view>
			</view>

			<view class="qa-section">
				<view class="qa-head">
					<text class="qa-title">军旅问答</text>
					<view class="qa-more" @click="onTap('军旅问答')">
						<uni-icons type="arrow-right" color="#7a869a" :size="16" />
					</view>
				</view>
				<view class="qa-grid">
					<view v-for="item in qaCards" :key="item.title" class="qa-card" @click="onTap(item.title)">
						<text class="qa-card-title">{{ item.title }}</text>
						<text class="qa-card-text">{{ item.desc }}</text>
					</view>
				</view>
			</view>

				<view class="bottom-space"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			enterActive: false,
			heroEntries: ['军校报考', '定向军士', '体检政审', '最新政策'],
			firstCards: [
				{
					title: '部队长期发展',
					theme: 'theme-blue',
					topicKey: 'long',
					items: ['军校报考', '如何升职', '如何掌握更多技术', '如何让领导帮你']
				},
				{
					title: '大学生规划',
					theme: 'theme-sky',
					topicKey: 'college',
					items: ['义务兵', '直招士官', '直招军官', '入伍时机选择']
				}
			],
			secondCards: [
				{
					title: '入伍准备',
					theme: 'theme-green',
					topicKey: 'prepare',
					items: ['入伍时机', '身体检查', '军兵种介绍', '当兵注意事项']
				},
				{
					title: '退伍规划',
					theme: 'theme-sea',
					topicKey: 'retire',
					items: ['退役士兵考军队文职', '退役士兵考公务员', '免试专升本/专项考研']
				}
			],
			qaCards: [
				{
					title: '高中生考学的条件',
					desc: '学历要求、年龄条件、政治审查流程一文看懂。'
				},
				{
					title: '报考军校',
					desc: '年龄要求与报考节点如何安排，避免错过机会。'
				}
			]
		};
	},
	onShow() {
		this.playEnter();
	},
	methods: {
		playEnter() {
			this.enterActive = false;
			setTimeout(() => {
				this.enterActive = true;
			}, 20);
		},
		openTopic(topic) {
			uni.navigateTo({
				url: `/pages/military/topic-map/topic-map?topic=${topic}`
			});
		},
		onTap(label) {
			uni.showToast({
				title: `${label} 可点击`,
				icon: 'none'
			});
		}
	}
};
</script>

<style scoped>
.home-page {
	min-height: 100vh;
	background: #f2f5fb;
}

.page-content {
	min-height: 100vh;
}

.page-fade {
	opacity: 0;
	transform: translateY(8rpx);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-fade.enter-active {
	opacity: 1;
	transform: translateY(0);
}

.safe-top {
	height: calc(var(--status-bar-height) + 12rpx);
}

.page-body {
	padding: 20rpx 24rpx 0;
}

.banner-wrap {
	background: linear-gradient(135deg, #ffb15c 0%, #ff8730 100%);
	border-radius: 28rpx;
	padding: 24rpx;
	box-shadow: 0 12rpx 30rpx rgba(255, 138, 51, 0.28);
}

.banner-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.banner-tag {
	display: block;
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.92);
}

.banner-title {
	display: block;
	margin-top: 10rpx;
	font-size: 44rpx;
	font-weight: 700;
	color: #ffffff;
}

.banner-search {
	width: 66rpx;
	height: 66rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
}

.banner-visual {
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.plane-icon,
.book-icon {
	width: 88rpx;
	height: 88rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
}

.entry-grid {
	margin-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.entry-item {
	width: 47%;
	margin-bottom: 14rpx;
	padding: 16rpx 14rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 16rpx;
	font-size: 24rpx;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.2);
}

.pair-grid {
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
}

.topic-card {
	width: 48.5%;
	padding: 18rpx 16rpx;
	border-radius: 24rpx;
	color: #ffffff;
}

.theme-blue {
	background: linear-gradient(145deg, #4d79ff 0%, #2f5be9 100%);
}

.theme-sky {
	background: linear-gradient(145deg, #7cb7ff 0%, #5f90ff 100%);
}

.theme-green {
	background: linear-gradient(145deg, #4ebd68 0%, #2d9750 100%);
}

.theme-sea {
	background: linear-gradient(145deg, #3f8fe8 0%, #2f6dcb 100%);
}

.topic-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.topic-title {
	font-size: 28rpx;
	font-weight: 700;
}

.head-arrow {
	width: 34rpx;
	height: 34rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.24);
}

.topic-item {
	margin-top: 12rpx;
	padding: 10rpx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.topic-text {
	font-size: 22rpx;
	max-width: 86%;
}

.core-strip {
	margin-top: 18rpx;
	padding: 20rpx;
	border-radius: 20rpx;
	text-align: center;
	font-size: 30rpx;
	font-weight: 700;
	color: #ffffff;
	background: linear-gradient(135deg, #58b857 0%, #2f9447 100%);
}

.second-grid {
	margin-top: 18rpx;
}

.qa-section {
	margin-top: 22rpx;
	padding: 24rpx;
	border-radius: 24rpx;
	background: #ffffff;
	box-shadow: 0 8rpx 20rpx rgba(30, 45, 73, 0.08);
}

.qa-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.qa-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #2d3a4f;
}

.qa-more {
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f4fb;
}

.qa-grid {
	margin-top: 18rpx;
	display: flex;
	justify-content: space-between;
}

.qa-card {
	width: 48%;
	padding: 16rpx;
	border-radius: 18rpx;
	background: #f6f8fc;
}

.qa-card-title {
	display: block;
	font-size: 26rpx;
	font-weight: 700;
	color: #26364d;
}

.qa-card-text {
	display: block;
	margin-top: 10rpx;
	font-size: 22rpx;
	line-height: 1.5;
	color: #66768d;
}

.bottom-space {
	height: 180rpx;
}
</style>
