import { useNavigate } from 'react-router-dom';
import { CheckCircleOutlined } from '@ant-design/icons';
import Header from '../components/Header';
import Footer from '../components/Footer';
import './Protocol.css';
import './Help.css';

const UploadGuide = () => {
  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')}>网站协议</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')} className="active">供稿必读</a></li>
          </ul>
        </div>

        <div className="protocol-content">
          <h1>供稿必读</h1>
          
          <p>为了保障您的权益且规范使用供稿服务，请认真阅读本协议。</p>

          <h2>1. 作品供稿流程</h2>
          <p>供稿需经过4个阶段：</p>
          <ul>
            <li><CheckCircleOutlined style={{ color: '#52c41a', marginRight: '8px' }} />上传作品文件</li>
            <li><CheckCircleOutlined style={{ color: '#52c41a', marginRight: '8px' }} />编辑作品内容和类别</li>
            <li><CheckCircleOutlined style={{ color: '#52c41a', marginRight: '8px' }} />作品审核</li>
            <li><CheckCircleOutlined style={{ color: '#52c41a', marginRight: '8px' }} />通过上架</li>
          </ul>

          <h2>2. 作品要求</h2>
          <p><strong>必须包含设计分层源文件</strong>，不够分层或无价值的作品将不予通过。</p>
          <p>文件格式：需将源文件和预览图压缩成 <code>RAR</code>、<code>ZIP</code> 或 <code>7Z</code> 格式。</p>
          <p>建议上传低版本源文件，方便更多用户使用。</p>

          <h2>3. 禁止内容</h2>
          <div className="warning-box">
            <p>⚠️ 禁止上传第三方素材网站模板</p>
            <p>⚠️ 禁止包含第三方广告信息</p>
            <p>⚠️ 禁止上传未分层的作品</p>
          </div>

          <h2>4. 关键词填写规范</h2>
          <p>关键词用空格分开，包含以下要素：</p>
          <ul>
            <li>作品类型（如：海报、背景板、电商详情页）</li>
            <li>作品行业或节日（如：房地产、圣诞节、旅游）</li>
            <li>作品主题（如：发布会、招聘、活动）</li>
            <li>作品风格（如：中式、小清新、科技）</li>
            <li>突出元素（如：人物、山水、礼物）</li>
          </ul>

          <div className="highlight-box">
            <h3>示例</h3>
            <p>✅ 海报 节日 圣诞节 红金 插画 圣诞老人 礼物</p>
            <p>✅ 背景板 房地产 发布会 科技 炫酷 城市</p>
            <p>✅ 电商详情页 旅游 云南 小清新 风景</p>
          </div>

          <h2>5. 设计师等级</h2>
          <p>职称晋升根据上架作品数量分为六个等级：</p>
          <table className="level-table">
            <tbody>
              <tr>
                <td>Lv.1 设计爱好者</td>
                <td>作品数 10个以下</td>
              </tr>
              <tr>
                <td>Lv.2 设计助理</td>
                <td>作品数 10-49个</td>
              </tr>
              <tr>
                <td>Lv.3 设计师</td>
                <td>作品数 50-199个</td>
              </tr>
              <tr>
                <td>Lv.4 资深设计师</td>
                <td>作品数 200-499个</td>
              </tr>
              <tr>
                <td>Lv.5 设计经理</td>
                <td>作品数 500-999个</td>
              </tr>
              <tr>
                <td>Lv.6 设计总监</td>
                <td>作品数 1000个以上</td>
              </tr>
            </tbody>
          </table>

          <h2>6. 实名认证</h2>
          <p>供稿设计师须进行实名登记，上传身份证和手机号码验证，对作品版权负责。</p>

          <h2>7. 收益结算</h2>
          <p>收益按劳务报酬结算，实名信息（姓名、身份证、结算账户）必须一致。</p>
          <p>禁止设计师与用户直接进行交易。</p>

          <h2>8. AIGC内容标识</h2>
          <p>若作品包含AI生成的素材或元素，上传时应选择"包含AIGC元素"标识。</p>

          <h2>9. 禁止上传的内容</h2>
          <p>不得制作、上传含有以下内容的作品：</p>
          <ul>
            <li>反对宪法基本原则的</li>
            <li>危害国家安全的</li>
            <li>散布淫秽、色情、暴力的</li>
            <li>侵犯他人合法权益的</li>
            <li>其他违法违规内容</li>
          </ul>

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

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

export default UploadGuide;
