import { Link } from 'react-router-dom'
import PageContainer from '../components/PageContainer'
import PageHeader from '../components/PageHeader'
import './RiskDutiesOverview.css'

/** 风险职责总览页：各方关注 / 各方职责入口（申办者、持有人、受试者、研究中心、CXO） */
function RiskDutiesOverview() {
  return (
    <PageContainer>
      <div className="risk-duties-overview module-dashboard-container">
        <PageHeader
          variant="module"
          title="风险职责"
          description="为临床试验各方提供专业的风险管理支持"
        />
        <div className="module-content">
      <section className="section">
        <div className="container">
          <div className="card">
            <h2>关于风险职责</h2>
            <p>
              在临床试验中，不同角色承担着不同的职责和关注点。RMO为各方提供针对性的风险管理支持，
              确保临床试验过程中受试者的安全，同时帮助各方更好地履行其职责。
            </p>
            <p>
              我们为申办者、研究中心、CXO（CRO、CDMO、SMO）等各方提供专业的风险管理服务，
              帮助各方识别风险、评估风险、管理风险，确保临床试验的顺利进行。
            </p>
          </div>
        </div>
      </section>

      <section className="section nav-section">
        <div className="container">
          <h2 className="section-title">各方职责</h2>
          <div className="nav-grid">
            <Link to="/sponsor" className="nav-card">
              <div className="nav-icon">💼</div>
              <h3>申办者职责</h3>
              <p>风险管理体系</p>
            </Link>
            <Link to="/Holder" className="nav-card">
              <div className="nav-icon">📋</div>
              <h3>持有人职责</h3>
              <p>负责上市后药物安全</p>
            </Link>
            <Link to="/participant" className="nav-card">
              <div className="nav-icon">👤</div>
              <h3>受试者专区</h3>
              <p>临床试验介绍、权益保障、损害救济</p>
            </Link>
            <Link to="/institution" className="nav-card">
              <div className="nav-icon">🏥</div>
              <h3>研究中心</h3>
              <p>机构、研究者、伦理委员会支持</p>
            </Link>
            <Link to="/service-provider" className="nav-card">
              <div className="nav-icon">🤝</div>
              <h3>CXO职责</h3>
              <p>CRO、CDMO、SMO支持服务</p>
            </Link>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="card">
            <h2>各方职责概述</h2>
            <div className="responsibility-grid">
              <div className="responsibility-item">
                <h3>申办者</h3>
                <ul>
                  <li>• 承担受试者保护的主要责任</li>
                  <li>• 提供法律上、经济上的保险或保证</li>
                  <li>• 建立完善的风险管理体系</li>
                  <li>• 确保临床试验的质量和安全</li>
                </ul>
              </div>
              <div className="responsibility-item">
                <h3>持有人</h3>
                <ul>
                  <li>• 建立药物警戒体系，开展上市后安全性监测</li>
                  <li>• 收集、评价和报告药品不良反应</li>
                  <li>• 开展药品上市后研究，持续评估风险与获益</li>
                  <li>• 制定并实施药品风险管理计划</li>
                </ul>
              </div>
              <div className="responsibility-item">
                <h3>研究中心</h3>
                <ul>
                  <li>• 协助风险管理，保障受试者安全</li>
                  <li>• 研究者负责临床试验的执行</li>
                  <li>• 伦理委员会负责伦理审查</li>
                  <li>• 及时报告不良事件</li>
                </ul>
              </div>
              <div className="responsibility-item">
                <h3>受试者</h3>
                <ul>
                  <li>• 了解临床试验基本知识</li>
                  <li>• 知情同意与权益保障</li>
                  <li>• 损害救济与补偿机制</li>
                </ul>
              </div>
              <div className="responsibility-item">
                <h3>CXO服务方</h3>
                <ul>
                  <li>• CRO：协助申办者进行临床试验</li>
                  <li>• CDMO：提供药物开发和生产服务</li>
                  <li>• SMO：提供现场管理服务</li>
                  <li>• 协助风险管理流程的执行</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
        </div>
      </div>
    </PageContainer>
  )
}

export default RiskDutiesOverview