import { Row, Col, Input, Button, Divider } from 'antd';
import { MailOutlined, QrcodeOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './Footer.css';

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

  const navLinks = [
    { title: '网站协议', url: '/protocol' },
    { title: '支付协议', url: '/pay-protocol' },
    { title: '版权声明', url: '/copyright' },
  ];

  const navLinks2 = [
    { title: '帮助中心', url: '/help' },
    { title: '供稿必读', url: '/upload-guide' },
  ];

  const handleLinkClick = (url) => {
    navigate(url);
  };

  return (
    <footer className="footer">
      <div className="footer-main">
        <div className="footer-container">
          <Row gutter={[48, 24]}>
            <Col xs={24} sm={24} md={8} lg={6}>
              <div className="footer-links-group">
                {navLinks.map(link => (
                  <a 
                    key={link.title} 
                    onClick={() => handleLinkClick(link.url)} 
                    className="footer-link"
                  >
                    {link.title}
                  </a>
                ))}
              </div>
              <div className="footer-links-group">
                {navLinks2.map(link => (
                  <a 
                    key={link.title} 
                    onClick={() => handleLinkClick(link.url)} 
                    className="footer-link"
                  >
                    {link.title}
                  </a>
                ))}
              </div>
            </Col>
            
            <Col xs={24} sm={24} md={8} lg={10}>
              <div className="footer-contact">
                <h4 className="contact-title">客服邮箱</h4>
                <div className="contact-email">
                  <Input 
                    readOnly
                    value="service@aishej.com （工作日9:00-18:00）"
                    suffix={<MailOutlined />}
                    className="email-input"
                  />
                </div>
              </div>
            </Col>
            
            <Col xs={24} sm={24} md={8} lg={8}>
              <div className="footer-qrcodes">
                <div className="qrcode-item">
                  <div className="qrcode-placeholder">
                    <QrcodeOutlined className="qrcode-icon" />
                  </div>
                  <span className="qrcode-text">移动端网站</span>
                </div>
                <div className="qrcode-item">
                  <div className="qrcode-placeholder">
                    <QrcodeOutlined className="qrcode-icon" />
                  </div>
                  <span className="qrcode-text">微信公众号</span>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </div>
      
      <div className="footer-bottom">
        <div className="footer-container">
          <p className="copyright-text">
            图汇作为网络服务平台方，平台上的作品均由供稿设计师上传并发布，若您的权利被侵害，请联系客服邮箱：
            <a href="mailto:service@aishej.com" className="email-link">service@aishej.com</a>
            ，我们将及时为您处理 | 本站法律顾问：张明律师
          </p>
          <p className="copyright-links">
            <a href="#">京ICP备2024068521号-1</a> | 
            增值电信业务经营许可证：京B2-20240312 | 
            <a href="#">京公网安备11010802045678号</a> | 
            Copyright © 2024-2026 图汇 AiSheji.com
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;