<template>
	<div class="about-container">
		<div class="hero-section">
			<div class="logo-area">
				<div class="logo-circle">
					<span class="logo-text">AI</span>
				</div>
				<h1>AI Agent</h1>
			</div>
			<p class="version">{{ t('pages.about.version') }}</p>
		</div>

		<div class="content-section">
			<div class="info-card">
				<h2>{{ t('pages.about.aboutUs') }}</h2>
				<p>{{ t('pages.about.description') }}</p>
			</div>

			<div class="features-grid">
				<div v-for="feature in features" :key="feature.title" class="feature-card">
					<SvgIcon :name="feature.icon" class="feature-icon" size="30" />
					<h3>{{ feature.title }}</h3>
					<p>{{ feature.desc }}</p>
				</div>
			</div>

			<div class="footer-text">
				<p>&copy; 2026 AI Agent. All rights reserved.</p>
			</div>
		</div>
	</div>
</template>

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

const { tm, t } = useI18n()
const features = computed(
	() =>
		(tm('pages.about.features') as Array<{ icon: string; title: string; desc: string }>) || []
)
</script>

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

	.hero-section {
		text-align: center;
		padding: 60px 0;
		background: linear-gradient(135deg, var(--el-color-primary) 0%, #764ba2 100%);
		border-radius: 20px;
		margin-bottom: 40px;
		color: #fff;

		.logo-area {
			margin-bottom: 16px;

			.logo-circle {
				width: 120px;
				height: 120px;
				background: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(10px);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto 24px;
				border: 3px solid rgba(255, 255, 255, 0.3);

				.logo-text {
					font-size: 48px;
					font-weight: 900;
					letter-spacing: -2px;
				}
			}

			h1 {
				font-size: 42px;
				font-weight: 700;
				margin: 0;
			}
		}

		.version {
			font-size: 16px;
			opacity: 0.9;
		}
	}

	.content-section {
		.info-card {
			background: var(--bg-base);
			border-radius: 12px;
			padding: 32px;
			margin-bottom: 24px;
			box-shadow: var(--shadow-sm);

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

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

		.features-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 20px;
			margin-bottom: 24px;

			.feature-card {
				background: var(--bg-base);
				border-radius: 12px;
				padding: 28px;
				text-align: center;
				box-shadow: var(--shadow-sm);
				transition: all 0.3s;

				&:hover {
					transform: translateY(-4px);
					box-shadow: var(--shadow-lg);
				}

				.feature-icon {
					font-size: 40px;
				color: var(--el-color-primary);
					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;
				}
			}
		}

		.footer-text {
			text-align: center;
			padding: 20px 0;

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