<script setup lang="ts">
import { NCard, NButton, NIcon } from 'naive-ui'
import { PersonAddOutline } from '@vicons/ionicons5'
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<template>
  <div class="about-page">
    <section class="about-hero">
      <h1>关于 OncoLit</h1>
      <p class="hero-sub">肿瘤科研文献速递 — 让肿瘤学进展触手可及</p>
    </section>

    <n-card class="about-card" style="margin-bottom: 24px">
      <h2>我们的使命</h2>
      <p>OncoLit 致力于解决肿瘤领域科研人员面临的「信息过载」问题。全球每天发表数百篇肿瘤相关论文，传统检索方式难以高效跟踪领域前沿。我们通过自动化 PubMed 数据管道、AI 摘要与分层推送机制，帮助临床医生和科研工作者快速定位高价值文献。</p>
    </n-card>

    <n-card class="about-card" style="margin-bottom: 24px">
      <h2>核心功能</h2>
      <div class="features-grid">
        <div class="feature-item">
          <div class="feature-icon">📡</div>
          <div class="feature-title">每日自动更新</div>
          <p>基于 NCBI E-utilities 的自动管道，每日精搜 + 每周宽搜，确保不漏掉重要文献。</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">🏷️</div>
          <div class="feature-title">精准标签体系</div>
          <p>基于 MeSH 术语的肿瘤科标签树，按癌种、靶点、治疗方式、研究类型等多维度组织。</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">🤖</div>
          <div class="feature-title">AI 摘要</div>
          <p>接入 LLM 自动生成文献中文摘要与核心发现，帮助快速判断文献相关性。</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">📊</div>
          <div class="feature-title">Meta 分析套件</div>
          <p>内置 PICO 抽取、研究质量评估、森林图生成与 RevMan 导出工具。</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">👥</div>
          <div class="feature-title">团队协作</div>
          <p>科室共享收藏夹、Journal Club 排期、MDT 多学科讨论，助力科室知识管理。</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">🔬</div>
          <div class="feature-title">新药与指南追踪</div>
          <p>FDA/NMPA 新药审批日历、临床指南更新对比，紧跟行业动态。</p>
        </div>
      </div>
    </n-card>


    <section class="about-cta">
      <NButton type="primary" size="large" @click="router.push('/auth/register')" class="sky-btn"><template #icon><NIcon size="14"><PersonAddOutline /></NIcon></template>免费注册使用</NButton>
    </section>
  </div>
</template>

<style scoped>
.about-page { max-width: 800px; margin: 0 auto; padding: 0 20px 60px; }
.about-hero { text-align: center; padding: 40px 0 24px; }
.about-hero h1 { font-size: 28px; font-weight: 800; color: #1a5276; margin: 0 0 6px; }
.hero-sub { font-size: 15px; color: var(--text-secondary); margin: 0; }
.about-card h2 { font-size: 18px; font-weight: 600; color: #1a5276; margin: 0 0 12px; }
.about-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin: 0; }

.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feature-icon { font-size: 28px; margin-bottom: 6px; }
.feature-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.feature-item p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

.about-cta { text-align: center; padding: 20px 0; }

@media (max-width: 768px) {
  .about-hero { padding: 24px 0 16px; }
  .about-hero h1 { font-size: 24px; }
  .features-grid { grid-template-columns: 1fr; }
}
</style>
