<template>
	<div class="quick-start-container">
		<div class="header">
			<h1>{{ t('pages.quickStart.title') }}</h1>
			<p class="subtitle">{{ t('pages.quickStart.subtitle') }}</p>
		</div>

		<div class="content">
			<div class="video-section">
				<div class="video-placeholder">
					<SvgIcon name="video" class="video-icon" size="60" />
					<p>{{ t('pages.quickStart.video') }}</p>
				</div>
			</div>

			<div class="steps-section">
				<h2>{{ t('pages.quickStart.stepsTitle') }}</h2>
				<div class="steps">
					<div v-for="(step, index) in steps" :key="step.title" class="step-card">
						<div class="step-number">{{ index + 1 }}</div>
						<div class="step-content">
							<h3>{{ step.title }}</h3>
							<p>{{ step.desc }}</p>
						</div>
					</div>
				</div>
			</div>

			<div class="resources-section">
				<h2>{{ t('pages.quickStart.resourcesTitle') }}</h2>
				<div class="resource-cards">
					<div
						v-for="(resource, index) in resources"
						:key="resource.title"
						class="resource-card"
						@click="handleResourceClick(index)"
					>
						<SvgIcon :name="resource.icon" size="60" />
						<h3>{{ resource.title }}</h3>
						<p>{{ resource.desc }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from '@/composables/useI18n'

const router = useRouter()
const { t, tm } = useI18n()

const steps = computed(
	() => (tm('pages.quickStart.steps') as Array<{ title: string; desc: string }>) || []
)
const resources = computed(
	() =>
		(tm('pages.quickStart.resources') as Array<{ icon: string; title: string; desc: string }>) ||
		[]
)

const handleResourceClick = (index: number) => {
	if (index === 0) {
		router.push('/docs')
		return
	}

	if (index === 1) {
		router.push('/templates/1')
	}
}
</script>

<style lang="less" scoped>
.quick-start-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;

	.header {
		text-align: center;
		margin-bottom: 60px;

		h1 {
			font-size: 36px;
			font-weight: 700;
			color: var(--text-primary);
			margin-bottom: 12px;
		}

		.subtitle {
			font-size: 16px;
			color: var(--text-secondary);
		}
	}

	.content {
		.video-section {
			margin-bottom: 60px;

			.video-placeholder {
				width: 100%;
				max-width: 800px;
				margin: 0 auto;
				aspect-ratio: 16/9;
				background: linear-gradient(135deg, var(--el-color-primary) 0%, #764ba2 100%);
				border-radius: 12px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #fff;

				.video-icon {
					font-size: 64px;
					margin-bottom: 16px;
				}

				p {
					font-size: 18px;
					font-weight: 500;
				}
			}
		}

		.steps-section {
			margin-bottom: 60px;

			h2 {
				font-size: 28px;
				font-weight: 600;
				color: var(--text-primary);
				margin-bottom: 32px;
			}

			.steps {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
				gap: 24px;

				.step-card {
					background: var(--bg-base);
					border: 1px solid var(--border-light);
					border-radius: 12px;
					padding: 24px;
					display: flex;
					gap: 16px;
					transition: all 0.3s ease;

					&:hover {
						box-shadow: var(--shadow-md);
						transform: translateY(-2px);
					}

					.step-number {
						width: 40px;
						height: 40px;
						background: linear-gradient(135deg, var(--el-color-primary) 0%, #764ba2 100%);
						color: #fff;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20px;
						font-weight: 700;
						flex-shrink: 0;
					}

					.step-content {
						h3 {
							font-size: 18px;
							font-weight: 600;
							color: var(--text-primary);
							margin-bottom: 8px;
						}

						p {
							font-size: 14px;
							color: var(--text-secondary);
							line-height: 1.6;
						}
					}
				}
			}
		}

		.resources-section {
			h2 {
				font-size: 28px;
				font-weight: 600;
				color: var(--text-primary);
				margin-bottom: 32px;
			}

			.resource-cards {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
				gap: 24px;

				.resource-card {
					background: var(--bg-base);
					border: 1px solid var(--border-light);
					border-radius: 12px;
					padding: 32px;
					text-align: center;
					cursor: pointer;
					transition: all 0.3s ease;

					&:hover {
						border-color: var(--el-color-primary);
						box-shadow: var(--shadow-md);
						transform: translateY(-4px);
					}

					svg {
						font-size: 48px;
						color: var(--el-color-primary);
					}

					h3 {
						font-size: 18px;
						font-weight: 600;
						color: var(--text-primary);
						margin-bottom: 8px;
					}

					p {
						font-size: 14px;
						color: var(--text-secondary);
					}
				}
			}
		}
	}
}
</style>
