import { useNavigate } from 'react-router-dom';
import Header from '../components/Header';
import Footer from '../components/Footer';
import './Protocol.css';

const Protocol = () => {
  const navigate = useNavigate();

  return (
    <div className="protocol-page" style={{ paddingTop: '70px' }}>
      <Header />
      
      <div className="protocol-container">
        <div className="protocol-sidebar">
          <h3>相关协议</h3>
          <ul>
            <li><a onClick={() => navigate('/protocol')} className="active">网站协议</a></li>
            <li><a onClick={() => navigate('/pay-protocol')}>支付协议</a></li>
            <li><a onClick={() => navigate('/copyright')}>版权声明</a></li>
            <li><a onClick={() => navigate('/help')}>帮助中心</a></li>
            <li><a onClick={() => navigate('/upload-guide')}>供稿必读</a></li>
          </ul>
        </div>

        <div className="protocol-content">
          <h1>网站协议</h1>
          
          <p>为维护您自身权益，您在注册流程中确认同意本协议之前，应当认真阅读本协议各条款。</p>

          <h2>1. 协议范围</h2>
          <p>1.1 本协议由您与图汇共同缔结，具有合同效力。</p>
          <p>1.2 当您完成注册程序后，即表示您已充分阅读、理解并接受本协议的全部内容。</p>
          <p>1.3 如果您不同意本协议，应立即停止注册程序。</p>

          <h2>2. 用户注册与账号使用</h2>
          <p>2.1 用户需提供真实、准确的个人信息进行注册。</p>
          <p>2.2 符合以下条件方可注册：</p>
          <ul>
            <li>年满十八岁，具有完全民事行为能力的自然人</li>
            <li>提供真实的姓名、身份证和联系方式</li>
          </ul>
          <p>2.3 用户应妥善保管账号与密码，不得转让或出借给他人使用。</p>
          <p>2.4 用户在使用服务过程中，必须遵守相关法律法规。</p>

          <h2>3. 图汇的权利和义务</h2>
          <p>3.1 图汇提供优质的网络服务支持，对作品进行审核。</p>
          <p>3.2 图汇有权在网站投放广告。</p>
          <p>3.3 图汇有权对违规内容进行下架处理。</p>
          <p>3.4 图汇严格保护设计师作品版权，禁止未经授权的转载和二次销售。</p>

          <h2>4. 免责声明</h2>
          <p>4.1 用户使用服务的风险由其自己承担。</p>
          <p>4.2 图汇不保证服务不会中断，对及时性、安全性不作担保。</p>
          <p>4.3 对于不可抗力造成的服务中断，图汇不承担责任。</p>

          <h2>5. 违约赔偿</h2>
          <p>用户如有侵权、违规行为，需承担相应的法律责任和赔偿责任。</p>

          <div className="protocol-footer">
            <p>本协议最后更新日期：2026年1月10日</p>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
};

export default Protocol;
