<script setup>
import Head_menu from "@/module/head_menu.vue";
import Footer from "@/module/footer.vue";

// 公司信息
const companyInfo = {
  name: '团队名',
  founded: '2020年',
  location: '中国·北京',
  employees: '200+',
  mission: '子标题 使命 的内容',
  vision: '子标题 愿景 的内容'
}

// 团队成贝
const teamMembers = [
  {
    name: '姓名',
    position: '职位',
    avatar: '👨‍💼',
    description: '简单的描述'
  },
  {
    name: '姓名',
    position: '职位',
    avatar: '👨‍💻',
    description: '简单的描述'
  },
  {
    name: '姓名',
    position: '职位',
    avatar: '👩‍💼',
    description: '简单的描述'
  },
  {
    name: '姓名',
    position: '职位',
    avatar: '👨‍🎨',
    description: '简单的描述'
  }
]

// 发展历程
const milestones = [
  {
    year: 'xxxx年',
    title: 'xxxxxx',
    description: '简要描述'
  },
  {
    year: 'xxxx年',
    title: 'xxxxxx',
    description: '简要描述'
  },
  {
    year: 'xxxx年',
    title: 'xxxxxx',
    description: '简要描述'
  },
  {
    year: 'xxxx年',
    title: 'xxxxxx',
    description: '简要描述'
  },
  {
    year: 'xxxx年',
    title: 'xxxxxx',
    description: '简要描述'
  },
  {
    year: 'xxxx年',
    title: 'xxxxxx',
    description: '简要描述'
  }
]

// 核心价值
const values = [
  {
    icon: '🎯',
    title: '核心价值 标题',
    description: '核心价值 简介'
  },
  {
    icon: '💡',
    title: '核心价值 标题',
    description: '核心价值 简介'
  },
  {
    icon: '🤝',
    title: '核心价值 标题',
    description: '核心价值 简介'
  },
  {
    icon: '⚡',
    title: '核心价值 标题',
    description: '核心价值 简介'
  }
]
</script>

<template>
  <div class="about-page">
    <!--顶部导航栏-->
    <head_menu></head_menu>

    <!--简介区域-->
    <section class="hero-section">
      <div class="container">
        <h1 class="page-title">关于我们</h1>
        <p class="page-subtitle">了解我们的故事和愿景</p>
      </div>
    </section>

    <!--介绍区域-->
    <section class="intro-section container">
      <div class="intro-content card">
        <div class="intro-text">
          <h2 class="intro-title">简介</h2>
          <p class="intro-desc">这里填写一大串的介绍文本</p>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">成立于：</span>
              <span class="info-value">{{ companyInfo.founded }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">地点：</span>
              <span class="info-value">{{ companyInfo.location }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">规模：</span>
              <span class="info-value">{{ companyInfo.employees }}</span>
            </div>
          </div>
          <div class="mission-vision">
            <div class="mv-item">
              <h3>使命</h3>
              <p>{{ companyInfo.mission }}</p>
            </div>
            <div class="mv-item">
              <h3>愿景</h3>
              <p>{{ companyInfo.vision }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--核心价值区域-->
    <section class="values-section">
      <div class="container">
        <h2 class="section-title">核心价值</h2>
        <p class="section-subtitle">我们的价值观指引着每一步前行</p>
        <div class="values-grid">
          <div v-for="(value, index) in values" :key="index" class="value-card card">
            <div class="value-icon">{{ value.icon }}</div>
            <h3 class="value-title">{{ value.title }}</h3>
            <p class="value-desc">{{ value.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!--团队展示区域-->
    <section class="team-section container">
      <h2 class="section-title">核心团队</h2>
      <p class="section-subtitle">优秀的团队成就卓越的事业</p>
      <div class="team-grid">
        <div v-for="(member, index) in teamMembers" :key="index" class="team-card card">
          <div class="member-avatar">{{ member.avatar }}</div>
          <h3 class="member-name">{{ member.name }}</h3>
          <p class="member-position">{{ member.position }}</p>
          <p class="member-desc">{{ member.description }}</p>
        </div>
      </div>
    </section>

    <!--发展历程区域-->
    <section class="timeline-section">
      <div class="container">
        <h2 class="section-title">发展历程</h2>
        <p class="section-subtitle">记录我们的成长足迹</p>
        <div class="timeline">
          <div v-for="(milestone, index) in milestones" :key="index" class="timeline-item">
            <div class="timeline-marker"></div>
            <div class="timeline-content card">
              <div class="timeline-year">{{ milestone.year }}</div>
              <h3 class="timeline-title">{{ milestone.title }}</h3>
              <p class="timeline-desc">{{ milestone.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--页脚-->
    <Footer/>
  </div>
</template>

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

/* 顶部区域 */
.hero-section {
  background: var(--gradient-primary);
  padding: 80px 20px;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.95;
}

/* 公司介绍区域 */
.intro-section {
  padding: 80px 20px;
}

.intro-content {
  padding: 50px;
}

.intro-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.intro-desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  font-size: 14px;
  color: var(--text-light);
}

.info-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
}

.mission-vision {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.mv-item h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--primary-color);
}

.mv-item p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 核心价值区域 */
.values-section {
  background: var(--bg-light);
  padding: 80px 20px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.value-card {
  text-align: center;
  padding: 40px 30px;
}

.value-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.value-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

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

/* 团队展示区域 */
.team-section {
  padding: 80px 20px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.team-card {
  text-align: center;
  padding: 40px 30px;
}

.member-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.member-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.member-position {
  font-size: 14px;
  color: var(--primary-color);
  margin-bottom: 12px;
  font-weight: 500;
}

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

/* 发展历程区域 */
.timeline-section {
  background: var(--bg-light);
  padding: 80px 20px;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 40px auto 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--border-color);
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
}

.timeline-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.timeline-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--primary-color);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 3px var(--primary-color);
  z-index: 1;
}

.timeline-content {
  width: 45%;
  padding: 24px;
}

.timeline-year {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
}

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

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

@media (max-width: 768px) {
  .page-title {
    font-size: 36px;
  }

  .intro-content {
    padding: 30px 20px;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-marker {
    left: 20px;
  }

  .timeline-item,
  .timeline-item:nth-child(odd) {
    flex-direction: row;
    padding-left: 50px;
  }

  .timeline-content {
    width: 100%;
  }
}
</style>