RMO-Front/src/pages/Participant.tsx

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

function Participant() {
  return (
    <PageContainer>
      <div className="participant">
        <PageHeader
          title="受试者专区"
          description="了解临床试验，保障您的权益"
        />
        <div className="page-body">
      <section className="section">
        <div className="container">
          <div className="card">
            <h2>受试者专区概述</h2>
            <ul className="responsibility-overview">
              <li>了解临床试验基本知识</li>
              <li>知情同意与权益保障</li>
              <li>损害救济与补偿机制</li>
            </ul>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="card main-card">
            <h2>临床试验介绍</h2>
            <div className="content-section">
              <h3>什么是临床试验</h3>
              <p>
                临床试验是指在人体（病人或健康志愿者）进行的系统性研究，
                以证实或揭示试验药物的作用、不良反应及/或试验药物的吸收、分布、代谢和排泄，
                目的是确定试验药物的疗效与安全性。
              </p>
              <h3>参与临床试验的意义</h3>
              <ul>
                <li>✓ 为医学进步做出贡献</li>
                <li>✓ 可能获得新的治疗机会</li>
                <li>✓ 获得专业的医疗监测和照护</li>
                <li>✓ 帮助更多患者获得更好的治疗</li>
              </ul>
              <h3>基本流程</h3>
              <div className="process-flow">
                <div className="flow-step">
                  <div className="flow-number">1</div>
                  <p>知情同意</p>
                </div>
                <div className="flow-arrow">→</div>
                <div className="flow-step">
                  <div className="flow-number">2</div>
                  <p>筛选入组</p>
                </div>
                <div className="flow-arrow">→</div>
                <div className="flow-step">
                  <div className="flow-number">3</div>
                  <p>试验治疗</p>
                </div>
                <div className="flow-arrow">→</div>
                <div className="flow-step">
                  <div className="flow-number">4</div>
                  <p>随访监测</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="card">
            <h2>受试者权益</h2>
            <div className="rights-grid">
              <div className="right-item">
                <div className="right-icon">📋</div>
                <h3>知情同意权</h3>
                <p>
                  您有权充分了解试验的目的、方法、可能的风险和获益，
                  在充分理解的基础上自愿决定是否参与试验。
                </p>
              </div>
              <div className="right-item">
                <div className="right-icon">🛡️</div>
                <h3>安全保障权</h3>
                <p>
                  您有权获得安全的医疗照护，试验过程中发生的任何不良事件
                  都会得到及时、专业的处理和救治。
                </p>
              </div>
              <div className="right-item">
                <div className="right-icon">💰</div>
                <h3>损害救济权</h3>
                <p>
                  如果因参与试验而受到损害，您有权获得及时、充分的医疗救治
                  和经济补偿，无需垫付医疗费用。
                </p>
              </div>
              <div className="right-item">
                <div className="right-icon">🔄</div>
                <h3>退出权</h3>
                <p>
                  您有权在任何时候退出试验，无需说明理由，
                  且不会影响您获得其他医疗服务的权利。
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="card">
            <h2>损害救济</h2>
            <div className="content-section">
              <h3>赔偿/补偿原则</h3>
              <div className="compensation-principles">
                <div className="principle-item">
                  <h4>最大范围医疗报销原则</h4>
                  <p>
                    <strong>覆盖范围：</strong>与试验相关的一切风险<br />
                    <strong>报销比例：</strong>必要且合理的医疗支出100%报销<br />
                    <strong>特点：</strong>高频、时效、便捷、最好无垫付
                  </p>
                </div>
                <div className="principle-item">
                  <h4>身故、伤残赔偿金</h4>
                  <p>
                    对于因试验导致的严重损害，提供身故和伤残赔偿金保障（低频事件）
                  </p>
                </div>
                <div className="principle-item">
                  <h4>无过错责任补偿金</h4>
                  <p>
                    即使无过错，只要与试验相关，也会提供补偿（低频事件）
                  </p>
                </div>
                <div className="principle-item">
                  <h4>精算损失赔偿金</h4>
                  <p>
                    对于其他损失，根据精算原则提供合理赔偿（低频事件）
                  </p>
                </div>
              </div>
              <h3>救济流程</h3>
              <div className="relief-process">
                <div className="process-item">
                  <div className="process-icon">1</div>
                  <h4>出险通知</h4>
                  <p>医院第一时间通知RMO服务方</p>
                </div>
                <div className="process-item">
                  <div className="process-icon">2</div>
                  <h4>快速响应</h4>
                  <p>24小时内与医院、受试者沟通</p>
                </div>
                <div className="process-item">
                  <div className="process-icon">3</div>
                  <h4>医疗救治</h4>
                  <p>及时安排并承诺受试者救治</p>
                </div>
                <div className="process-item">
                  <div className="process-icon">4</div>
                  <h4>费用结算</h4>
                  <p>与医院直接结算，无需受试者垫付</p>
                </div>
              </div>
              <h3>联系方式</h3>
              <div className="contact-info">
                <p><strong>紧急热线：</strong>4009-606-520（24小时）</p>
                <p><strong>服务邮箱：</strong>service@rmo.com</p>
                <p><strong>服务时间：</strong>全天候24小时服务</p>
              </div>
            </div>
          </div>
        </div>
      </section>
        </div>
      </div>
    </PageContainer>
  )
}

export default Participant