import PageContainer from '../components/PageContainer'
import PageHeader from '../components/PageHeader'
import './AboutOverview.css'

function AboutOverview() {
  return (
    <PageContainer>
      <div className="about-overview">
        <PageHeader
          title="RMO概述"
          description="生命科学风险管理平台"
        />
        <div className="page-body">
          <section className="section">
            <div className="container">
              <h2 className="section-title">关于RMO</h2>
              <div className="content-grid">
                <div className="content-card">
                  <h3>我们的使命</h3>
                  <p>
                    RMO致力于为生命科学行业提供全方位的风险管理解决方案，通过系统化的数据收集、监测和分析，识别潜在风险信号，为风险管理决策提供科学依据。
                  </p>
                </div>
                <div className="content-card">
                  <h3>我们的愿景</h3>
                  <p>
                    成为生命科学领域最具影响力的风险管理平台，为临床试验和上市后药物安全提供专业、高效的风险管理服务。
                  </p>
                </div>
                <div className="content-card">
                  <h3>核心价值</h3>
                  <ul>
                    <li>专业：基于行业最佳实践和法规要求</li>
                    <li>高效：系统化的流程和智能化的工具</li>
                    <li>可靠：严格的质量控制和数据安全</li>
                    <li>创新：持续的技术创新和服务优化</li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          <section className="section">
            <div className="container">
              <h2 className="section-title">服务范围</h2>
              <div className="services-grid">
                <div className="service-item">
                  <div className="service-icon">📊</div>
                  <h3>药物警戒</h3>
                  <p>系统化的数据收集、监测和分析服务</p>
                </div>
                <div className="service-item">
                  <div className="service-icon">🛡️</div>
                  <h3>临床保险</h3>
                  <p>为临床试验提供全面的保险保障服务</p>
                </div>
                <div className="service-item">
                  <div className="service-icon">💼</div>
                  <h3>产品保险</h3>
                  <p>上市后药物安全与风险管理保障</p>
                </div>
                <div className="service-item">
                  <div className="service-icon">📚</div>
                  <h3>知识资源</h3>
                  <p>法规指南、保险知识、行业洞见</p>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </PageContainer>
  )
}

export default AboutOverview