/**
 * 非遗文化传承网站 - 页脚组件
 */

import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Space, Typography, Divider } from 'antd'
import {
  WechatOutlined,
  WeiboOutlined,
  MailOutlined,
  PhoneOutlined,
  EnvironmentOutlined,
} from '@ant-design/icons'
import './Footer.css'

const { Title, Text, Paragraph } = Typography

const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear()

  return (
    <footer className="heritage-footer">
      <div className="footer-main">
        <div className="footer-container">
          <Row gutter={[48, 32]}>
            {/* 关于我们 */}
            <Col xs={24} sm={12} lg={6}>
              <div className="footer-section">
                <Title level={5} className="footer-title">
                  非遗传承
                </Title>
                <Paragraph className="footer-description">
                  让千年技艺重焕新生，用数字科技守护文化根脉。
                  致力于中国非物质文化遗产的数字化保护、传承与推广。
                </Paragraph>
                <Space size="middle" className="footer-social">
                  <a href="#" className="social-link">
                    <WechatOutlined />
                  </a>
                  <a href="#" className="social-link">
                    <WeiboOutlined />
                  </a>
                  <a href="#" className="social-link">
                    <MailOutlined />
                  </a>
                </Space>
              </div>
            </Col>

            {/* 快速链接 */}
            <Col xs={12} sm={12} lg={6}>
              <div className="footer-section">
                <Title level={5} className="footer-title">
                  快速链接
                </Title>
                <ul className="footer-links">
                  <li>
                    <Link to="/heritage">非遗项目</Link>
                  </li>
                  <li>
                    <Link to="/inheritors">传承人</Link>
                  </li>
                  <li>
                    <Link to="/news">活动资讯</Link>
                  </li>
                  <li>
                    <Link to="/data">数据可视化</Link>
                  </li>
                  <li>
                    <Link to="/about">关于我们</Link>
                  </li>
                </ul>
              </div>
            </Col>

            {/* 项目分类 */}
            <Col xs={12} sm={12} lg={6}>
              <div className="footer-section">
                <Title level={5} className="footer-title">
                  非遗分类
                </Title>
                <ul className="footer-links">
                  <li>
                    <Link to="/heritage/categories/traditional-craft">传统技艺</Link>
                  </li>
                  <li>
                    <Link to="/heritage/categories/traditional-art">传统美术</Link>
                  </li>
                  <li>
                    <Link to="/heritage/categories/traditional-music">传统音乐</Link>
                  </li>
                  <li>
                    <Link to="/heritage/categories/traditional-opera">传统戏剧</Link>
                  </li>
                  <li>
                    <Link to="/heritage/categories/folk-custom">民俗</Link>
                  </li>
                  <li>
                    <Link to="/heritage/categories/traditional-medicine">传统医药</Link>
                  </li>
                </ul>
              </div>
            </Col>

            {/* 联系我们 */}
            <Col xs={24} sm={12} lg={6}>
              <div className="footer-section">
                <Title level={5} className="footer-title">
                  联系我们
                </Title>
                <Space direction="vertical" size="middle" className="footer-contact">
                  <div className="contact-item">
                    <PhoneOutlined className="contact-icon" />
                    <Text>400-123-4567</Text>
                  </div>
                  <div className="contact-item">
                    <MailOutlined className="contact-icon" />
                    <Text>heritage@example.com</Text>
                  </div>
                  <div className="contact-item">
                    <EnvironmentOutlined className="contact-icon" />
                    <Text>北京市朝阳区文化创意产业园</Text>
                  </div>
                </Space>
              </div>
            </Col>
          </Row>
        </div>
      </div>

      {/* 版权信息 */}
      <Divider className="footer-divider" />
      <div className="footer-bottom">
        <div className="footer-container">
          <div className="footer-copyright">
            <Text className="copyright-text">
              © {currentYear} 非遗文化传承平台. All Rights Reserved.
            </Text>
            <Space split={<Divider type="vertical" />} className="footer-legal">
              <Link to="/privacy">隐私政策</Link>
              <Link to="/terms">服务条款</Link>
              <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer">
                京ICP备xxxxxxxx号
              </a>
            </Space>
          </div>
        </div>
      </div>
    </footer>
  )
}

export default Footer