<script setup>
import { ref, computed } from 'vue'
import { useI18n } from '../composables/useI18n'
import { useTheme } from '../composables/useTheme'

// 国际化
const { t } = useI18n()

// 主题系统
const { currentTheme } = useTheme()

// 数据
const technologies = ref([
  {
    category: '前端框架',
    items: [
      { name: 'Vue 3', version: '3.4.0', description: '渐进式JavaScript框架', icon: '🏗️' },
      { name: 'Vue Router', version: '4.3.0', description: '官方路由管理器', icon: '🛣️' },
      { name: 'Pinia', version: '2.1.0', description: 'Vue生态状态管理', icon: '🗃️' }
    ]
  },
  {
    category: '开发工具',
    items: [
      { name: 'Vite', version: '5.0.0', description: '下一代前端构建工具', icon: '⚡' },
      { name: 'ESLint', version: '8.50.0', description: '代码质量检查工具', icon: '🔍' },
      { name: 'Prettier', version: '3.0.0', description: '代码格式化工具', icon: '✨' }
    ]
  },
  {
    category: '样式方案',
    items: [
      { name: 'CSS Variables', version: 'Native', description: '原生CSS变量系统', icon: '🎨' },
      { name: 'CSS Grid', version: 'Native', description: '现代网格布局系统', icon: '📐' },
      { name: 'Flexbox', version: 'Native', description: '弹性盒子布局', icon: '📏' }
    ]
  },
  {
    category: '国际化',
    items: [
      { name: 'Vue I18n', version: '9.5.0', description: 'Vue官方国际化方案', icon: '🌍' },
      { name: '自定义配置', version: 'v1.0', description: '个性化语言切换', icon: '🗣️' }
    ]
  }
])

const features = ref([
  {
    title: '响应式设计',
    description: '采用移动优先的设计理念，支持移动端(<768px)、平板(768px-1024px)和桌面端(>1024px)的完美适配。',
    icon: '📱',
    highlights: ['CSS Grid + Flexbox布局', '媒体查询断点设计', '响应式图片适配']
  },
  {
    title: '主题系统',
    description: '内置浅色、深色和高对比度三种主题模式，支持实时切换，满足不同使用场景和用户偏好。',
    icon: '🌓',
    highlights: ['CSS变量驱动', '主题状态持久化', '平滑过渡动画']
  },
  {
    title: '国际化支持',
    description: '完整的中英文双语支持，支持动态语言切换和扩展更多语言，便于项目国际化。',
    icon: '🌍',
    highlights: ['Vue I18n集成', '动态语言切换', '本地化存储支持']
  },
  {
    title: '现代化开发',
    description: '基于Vue 3 Composition API，使用Vite构建工具，提供热重载和优化的打包体验。',
    icon: '⚡',
    highlights: ['Composition API', 'Vite快速构建', '现代化工具链']
  }
])

const stats = ref([
  { label: '技术栈版本', value: '最新稳定版', color: 'primary' },
  { label: '响应式断点', value: '3个主要', color: 'success' },
  { label: '主题模式', value: '3种主题', color: 'info' },
  { label: '国际化语言', value: '2种语言', color: 'warning' }
])

// 计算属性
const pageTitle = computed(() => t('about.title'))
const pageDescription = computed(() => t('about.description'))
</script>

<template>
  <div class="about-page">
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="header-container">
        <h1 class="page-title">{{ pageTitle }}</h1>
        <p class="page-description">{{ pageDescription }}</p>
      </div>
    </section>

    <!-- 功能特性 -->
    <section class="features-section">
      <div class="section-container">
        <h2 class="section-title">核心特性</h2>
        <div class="features-grid">
          <div 
            v-for="feature in features" 
            :key="feature.title"
            class="feature-card"
          >
            <div class="feature-header">
              <div class="feature-icon">{{ feature.icon }}</div>
              <h3 class="feature-title">{{ feature.title }}</h3>
            </div>
            <p class="feature-description">{{ feature.description }}</p>
            <ul class="feature-highlights">
              <li v-for="highlight in feature.highlights" :key="highlight">
                {{ highlight }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术栈 -->
    <section class="tech-section">
      <div class="section-container">
        <h2 class="section-title">技术栈详解</h2>
        <div class="tech-categories">
          <div 
            v-for="category in technologies" 
            :key="category.category"
            class="tech-category"
          >
            <h3 class="category-title">{{ category.category }}</h3>
            <div class="tech-items">
              <div 
                v-for="tech in category.items" 
                :key="tech.name"
                class="tech-item"
              >
                <div class="tech-header">
                  <div class="tech-icon">{{ tech.icon }}</div>
                  <div class="tech-info">
                    <h4 class="tech-name">{{ tech.name }}</h4>
                    <span class="tech-version">{{ tech.version }}</span>
                  </div>
                </div>
                <p class="tech-description">{{ tech.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 项目统计 -->
    <section class="stats-section">
      <div class="section-container">
        <h2 class="section-title">项目亮点</h2>
        <div class="stats-grid">
          <div 
            v-for="stat in stats" 
            :key="stat.label"
            class="stat-card"
            :class="`stat-${stat.color}`"
          >
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 架构说明 -->
    <section class="architecture-section">
      <div class="section-container">
        <h2 class="section-title">架构设计</h2>
        <div class="architecture-content">
          <div class="arch-item">
            <h3 class="arch-title">🎯 组件化开发</h3>
            <p class="arch-description">
              遵循Vue 3最佳实践，采用Composition API和组件化开发模式，
              代码结构清晰，便于维护和复用。
            </p>
          </div>
          <div class="arch-item">
            <h3 class="arch-title">🗃️ 状态管理</h3>
            <p class="arch-description">
              使用Pinia进行状态管理，支持响应式数据流，
              提供类型安全和良好的开发体验。
            </p>
          </div>
          <div class="arch-item">
            <h3 class="arch-title">🛣️ 路由管理</h3>
            <p class="arch-description">
              集成Vue Router 4，支持动态路由、路由守卫、
              和嵌套路由配置。
            </p>
          </div>
          <div class="arch-item">
            <h3 class="arch-title">🎨 样式系统</h3>
            <p class="arch-description">
              基于CSS变量和作用域样式，支持主题切换、
              响应式设计和组件样式隔离。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 快速开始 -->
    <section class="getting-started-section">
      <div class="section-container">
        <h2 class="section-title">快速开始</h2>
        <div class="getting-started-content">
          <div class="code-block">
            <div class="code-header">
              <span>安装依赖</span>
              <button class="copy-btn">复制</button>
            </div>
            <pre><code>pnpm install</code></pre>
          </div>
          <div class="code-block">
            <div class="code-header">
              <span>启动开发服务器</span>
              <button class="copy-btn">复制</button>
            </div>
            <pre><code>pnpm dev</code></pre>
          </div>
          <div class="code-block">
            <div class="code-header">
              <span>构建生产版本</span>
              <button class="copy-btn">复制</button>
            </div>
            <pre><code>pnpm build</code></pre>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.about-page {
  min-height: 100%;
}

/* 页面头部 */
.page-header {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  text-align: center;
}

.header-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.page-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

.page-description {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 通用样式 */
.section-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xl) 0;
}

/* 核心特性 */
.features-section {
  background-color: var(--bg-primary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--spacing-xl);
}

.feature-card {
  background-color: var(--bg-secondary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-xl);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
}

.feature-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.feature-icon {
  font-size: 2.5rem;
}

.feature-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.feature-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--spacing-md) 0;
}

.feature-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-highlights li {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 0;
  position: relative;
  padding-left: var(--spacing-md);
}

.feature-highlights li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

/* 技术栈 */
.tech-section {
  background-color: var(--bg-secondary);
}

.tech-categories {
  display: grid;
  gap: var(--spacing-xl);
}

.tech-category {
  background-color: var(--bg-tertiary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
}

.category-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
  text-align: center;
}

.tech-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.tech-item {
  background-color: var(--bg-secondary);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
}

.tech-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.tech-icon {
  font-size: 1.5rem;
}

.tech-info {
  display: flex;
  flex-direction: column;
}

.tech-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.tech-version {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background-color: var(--bg-tertiary);
  padding: 2px var(--spacing-xs);
  border-radius: var(--border-radius-sm);
  align-self: flex-start;
}

.tech-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* 项目统计 */
.stats-section {
  background-color: var(--bg-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.stat-card {
  background-color: var(--bg-secondary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  text-align: center;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-card.stat-primary {
  border-color: var(--primary-color);
}

.stat-card.stat-success {
  border-color: var(--success-color);
}

.stat-card.stat-info {
  border-color: var(--info-color);
}

.stat-card.stat-warning {
  border-color: var(--warning-color);
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.stat-primary .stat-value {
  color: var(--primary-color);
}

.stat-success .stat-value {
  color: var(--success-color);
}

.stat-info .stat-value {
  color: var(--info-color);
}

.stat-warning .stat-value {
  color: var(--warning-color);
}

.stat-label {
  color: var(--text-secondary);
  font-weight: 500;
}

/* 架构设计 */
.architecture-section {
  background-color: var(--bg-secondary);
}

.architecture-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
}

.arch-item {
  background-color: var(--bg-tertiary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
}

.arch-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

.arch-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* 快速开始 */
.getting-started-section {
  background-color: var(--bg-primary);
}

.getting-started-content {
  display: grid;
  gap: var(--spacing-lg);
}

.code-block {
  background-color: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.code-header span {
  font-weight: 600;
  color: var(--text-primary);
}

.copy-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.copy-btn:hover {
  background-color: var(--primary-color-hover);
}

pre {
  margin: 0;
  padding: var(--spacing-lg);
  overflow-x: auto;
}

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: var(--font-size-3xl);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .tech-items {
    grid-template-columns: 1fr;
  }
  
  .architecture-content {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: var(--spacing-lg);
  }
}
</style>