import React from 'react';
import { Typography, Divider, Row, Col } from 'antd';
import { useIntl } from 'umi';
import styles from './about.less';

const { Title, Paragraph } = Typography;

const AboutPage: React.FC = () => {
  const intl = useIntl();

  return (
    <div className={styles.aboutContainer}>
      <div className={styles.aboutContent}>
        <div className={styles.aboutTitle}>
          <Title level={2}>{intl.formatMessage({ id: 'about.title' })}</Title>
        </div>

        <div className={styles.aboutSection}>
          <Title level={3} className={styles.sectionTitle}>
            {intl.formatMessage({ id: 'about.company.title' })}
          </Title>
          <div className={styles.sectionContent}>
            <Paragraph>
              中远海运电子招投标平台是中国远洋海运集团有限公司旗下专业的采购与招标管理平台，
              致力于为集团内外部用户提供高效、透明、规范的电子化招投标服务。平台依托集团强大的资源优势，
              结合现代信息技术，构建了覆盖招标、采购、供应商管理等全流程的电子化解决方案。
            </Paragraph>

            <div className={styles.imageWrapper}>
              <img
                src="/home_bg.png"
                alt="公司总部"
                className={styles.aboutImage}
              />
            </div>

            <Paragraph>
              作为国内领先的航运物流企业集团的电子招投标平台，我们秉承&ldquo;公开、公平、公正&rdquo;的原则，
              通过标准化、信息化、智能化手段，持续优化招投标流程，提升采购效率，降低采购成本，
              为集团战略实施和业务发展提供有力支撑。
            </Paragraph>
          </div>
        </div>

        <Divider />

        <div className={styles.aboutSection}>
          <Title level={3} className={styles.sectionTitle}>
            {intl.formatMessage({ id: 'about.advantages.title' })}
          </Title>
          <div className={styles.sectionContent}>
            <Row gutter={[24, 24]}>
              <Col xs={24} md={8}>
                <div>
                  <Title level={4}>全流程电子化</Title>
                  <Paragraph>
                    从招标公告发布到开标评标，再到结果公示，全流程在线操作，
                    减少纸质文档，提高工作效率，降低运营成本。
                  </Paragraph>
                </div>
              </Col>
              <Col xs={24} md={8}>
                <div>
                  <Title level={4}>安全可靠</Title>
                  <Paragraph>
                    采用先进的加密技术和安全措施，确保招投标过程的安全性和数据的保密性，
                    有效防范信息泄露和网络攻击风险。
                  </Paragraph>
                </div>
              </Col>
              <Col xs={24} md={8}>
                <div>
                  <Title level={4}>公开透明</Title>
                  <Paragraph>
                    严格遵循国家招投标法律法规，确保招投标过程公开、透明、可追溯，
                    有效防范舞弊行为，维护各方合法权益。
                  </Paragraph>
                </div>
              </Col>
            </Row>

            <div className={styles.imageWrapper}>
              <img
                src="/home_bg.png"
                alt="平台功能展示"
                className={styles.aboutImage}
              />
            </div>

            <Row gutter={[24, 24]}>
              <Col xs={24} md={8}>
                <div>
                  <Title level={4}>智能化服务</Title>
                  <Paragraph>
                    引入人工智能和大数据分析技术，为招标采购决策提供数据支持，
                    实现精准匹配和智能推荐，提升用户体验。
                  </Paragraph>
                </div>
              </Col>
              <Col xs={24} md={8}>
                <div>
                  <Title level={4}>供应商管理</Title>
                  <Paragraph>
                    建立完善的供应商库和评价体系，实现供应商全生命周期管理，
                    促进供应商良性竞争，提升供应链质量。
                  </Paragraph>
                </div>
              </Col>
              <Col xs={24} md={8}>
                <div>
                  <Title level={4}>合规监管</Title>
                  <Paragraph>
                    内置合规检查机制，确保招投标活动符合国家法律法规和集团规章制度，
                    降低合规风险，提升管理水平。
                  </Paragraph>
                </div>
              </Col>
            </Row>
          </div>
        </div>

        <Divider />

        <div className={styles.aboutSection}>
          <Title level={3} className={styles.sectionTitle}>
            {intl.formatMessage({ id: 'about.history.title' })}
          </Title>
          <div className={styles.sectionContent}>
            <Paragraph>
              <strong>2018年</strong> - 中远海运电子招投标平台正式启动建设，完成顶层设计和技术选型。
            </Paragraph>
            <Paragraph>
              <strong>2019年</strong> - 平台一期建设完成并上线试运行，实现基础招投标功能。
            </Paragraph>
            <Paragraph>
              <strong>2020年</strong> - 平台功能全面升级，增加供应商管理、合同管理等模块，用户规模快速增长。
            </Paragraph>
            <Paragraph>
              <strong>2021年</strong> - 平台二期建设完成，引入大数据分析和人工智能技术，提升平台智能化水平。
            </Paragraph>
            <Paragraph>
              <strong>2022年</strong> - 平台实现与集团ERP系统的深度集成，构建完整的采购管理生态。
            </Paragraph>
            <Paragraph>
              <strong>2023年</strong> - 平台进行全面技术改造，采用微服务架构，提升系统性能和可扩展性。
            </Paragraph>
            <Paragraph>
              <strong>2024年</strong> - 平台3.0版本发布，引入区块链技术，进一步提升数据安全性和业务透明度。
            </Paragraph>
          </div>
        </div>

        <Divider />

        <div className={styles.aboutSection}>
          <Title level={3} className={styles.sectionTitle}>
            {intl.formatMessage({ id: 'about.contact.title' })}
          </Title>
          <div className={styles.sectionContent}>
            <div className={styles.companyInfo}>
              <div className={styles.infoItem}>
                <span className={styles.label}>{intl.formatMessage({ id: 'about.address' })}：</span>
                <span>上海市虹口区东大名路666号中远海运大厦</span>
              </div>
              <div className={styles.infoItem}>
                <span className={styles.label}>{intl.formatMessage({ id: 'about.phone' })}：</span>
                <span>021-65966666</span>
              </div>
              <div className={styles.infoItem}>
                <span className={styles.label}>{intl.formatMessage({ id: 'about.hotline' })}：</span>
                <span>400-888-9999</span>
              </div>
              <div className={styles.infoItem}>
                <span className={styles.label}>{intl.formatMessage({ id: 'about.email' })}：</span>
                <span>service@ebidding.cosco.com</span>
              </div>
              <div className={styles.infoItem}>
                <span className={styles.label}>{intl.formatMessage({ id: 'about.worktime' })}：</span>
                <span>周一至周五 9:00-17:30（法定节假日除外）</span>
              </div>
            </div>
          </div>
        </div>

        <div className={styles.aboutFooter}>
          <Paragraph>{intl.formatMessage({ id: 'about.copyright' })}</Paragraph>
        </div>
      </div>
    </div>
  );
};

export default AboutPage;