<template>
  <section id="about" class="about">
    <div class="container">
      <div class="about-layout">
        <div class="about-text">
          <div class="tag">关于我们</div>
          <h2 class="section-title" style="margin-top:16px">
            专注 AI 落地<br>深耕企业场景
          </h2>
          <p class="section-sub" style="margin-top:16px">
            北京硅基伙伴科技有限公司，成立于 2019 年，
            总部位于北京。我们由一批来自顶级互联网公司和 AI 研究院的技术专家创立，
            专注于企业 AI 数字化转型技术服务，致力于让先进的 AI 能力真正在企业中落地生根。
          </p>
          <p class="section-sub" style="margin-top:12px; font-size: 15px;">
            我们相信，AI 不应该只是大企业的特权。
            通过我们的产品和服务，让每一家企业都能享受到 AI 带来的生产力革命。
          </p>

          <div class="team-tags">
            <span v-for="t in teamTags" :key="t">{{ t }}</span>
          </div>
        </div>

        <div class="about-cards">
          <div class="about-card" v-for="c in aboutCards" :key="c.title">
            <div class="about-card-icon" v-html="c.icon"></div>
            <h3>{{ c.title }}</h3>
            <p>{{ c.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const teamTags = [
  '前阿里巴巴', '前腾讯', '前百度 AI', '清华大学 CS',
  '北京大学', '斯坦福大学', 'IEEE Fellow'
]

const aboutCards = [
  {
    title: '使命',
    desc: '让 AI 成为每家企业的核心竞争力，推动中国企业数字化转型进入智能时代。',
    icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>`,
  },
  {
    title: '愿景',
    desc: '成为中国企业 AI 数字化转型领域最受信赖的技术伙伴，服务超过 10,000 家企业。',
    icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.8"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`,
  },
  {
    title: '价值观',
    desc: '客户成功优先、技术诚实透明、持续创新迭代、共赢长期主义。',
    icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.8"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>`,
  },
]
</script>

<style scoped>
.about {
  padding: 120px 0;
  background: var(--white);
}
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.team-tags span {
  padding: 6px 14px;
  background: var(--gray-100);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
}
.about-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1.5px solid var(--gray-100);
  transition: all .2s;
}
.about-card:hover {
  border-color: var(--green-200);
  background: var(--green-50);
  box-shadow: var(--shadow);
}
.about-card-icon {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}
.about-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.about-card p {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .about-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .about { padding: 80px 0; }
}
</style>
