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

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

  const helpItems = [
    {
      key: '1',
      label: '账号相关',
      children: (
        <div className="help-qa">
          <div className="qa-item">
            <h4>Q: 账号使用为什么需要手机验证？</h4>
            <p>A: 为保护您的账号安全，当出现异常登录、异地下载等安全风险时，系统会要求手机验证，确保是本人操作。</p>
          </div>
          <div className="qa-item">
            <h4>Q: 账号能绑定手机号码登录吗？</h4>
            <p>A: 可以，在个人中心进行手机号绑定后，即可使用手机号登录。</p>
          </div>
          <div className="qa-item">
            <h4>Q: 为什么需要频繁登录？</h4>
            <p>A: 为了账号安全，系统会在一定时间后自动退出登录，请重新登录即可。</p>
          </div>
        </div>
      )
    },
    {
      key: '2',
      label: '作品相关',
      children: (
        <div className="help-qa">
          <div className="qa-item">
            <h4>Q: 如何使用快速收藏功能？</h4>
            <p>A: 浏览作品时，点击作品卡片上的"收藏"按钮即可快速收藏，在"我的收藏"中查看。</p>
          </div>
          <div className="qa-item">
            <h4>Q: 如何使用以图搜图功能？</h4>
            <p>A: 在首页搜索框旁点击相机图标，上传图片后即可搜索相似作品。</p>
          </div>
          <div className="qa-item">
            <h4>Q: 作品下载失败怎么办？</h4>
            <p>A: 请检查网络连接，清除浏览器缓存后重试。如仍有问题，请联系客服。</p>
          </div>
          <div className="qa-item">
            <h4>Q: 作品错误如何投诉举报？</h4>
            <p>A: 在作品详情页点击"举报"按钮，选择举报原因并提交，我们会及时处理。</p>
          </div>
        </div>
      )
    },
    {
      key: '3',
      label: '资金相关',
      children: (
        <div className="help-qa">
          <div className="qa-item">
            <h4>Q: 作品收益提现多久到账？</h4>
            <p>A: 提现申请审核通过后，一般3-5个工作日到账。</p>
          </div>
          <div className="qa-item">
            <h4>Q: 上传作品有哪几种收益方式？</h4>
            <p>A: 设计师上传的作品被用户下载后，可获得下载分成收益。收益会显示在个人中心。</p>
          </div>
        </div>
      )
    },
    {
      key: '4',
      label: '其它问题',
      children: (
        <div className="help-qa">
          <div className="qa-item">
            <h4>Q: 如何申请开具发票？</h4>
            <p>A: 在个人中心-我的订单中，选择需要开票的订单，填写发票信息后提交申请。</p>
          </div>
          <div className="qa-item">
            <h4>Q: VIP会员有什么权益？</h4>
            <p>A: VIP会员可享受每天10次免费下载、无广告浏览等专属权益。</p>
          </div>
        </div>
      )
    }
  ];

  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')} className="active">帮助中心</a></li>
            <li><a onClick={() => navigate('/upload-guide')}>供稿必读</a></li>
          </ul>
        </div>

        <div className="protocol-content help-content">
          <h1>
            <QuestionCircleOutlined style={{ marginRight: '12px', color: '#ff5a5a' }} />
            帮助中心
          </h1>
          
          <Collapse 
            items={helpItems} 
            defaultActiveKey={['1']}
            className="help-collapse"
          />

          <div className="help-contact">
            <h3>没有找到您要的问题？</h3>
            <p>您也可以联系我们的客服团队</p>
            <div className="contact-info">
              <p>📧 客服邮箱：service@aishej.com</p>
              <p>⏰ 工作时间：工作日 9:00-18:00</p>
            </div>
          </div>
        </div>
      </div>

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

export default Help;
