'use client';

import Image from 'next/image';
import Link from 'next/link';
import { Col, Row } from 'antd';

import { useContactForm } from '@/components/ContactForm/ContactFormModal';
import { BlueButton } from '@/components/BlueButton/BlueButton';

import styles from './page.module.sass';

import architectureImage from './architecture.svg';

import feature1Svg from './assets/feature-1.svg';
import feature2Svg from './assets/feature-2.svg';
import feature3Svg from './assets/feature-3.svg';
import feature4Svg from './assets/feature-4.svg';
import feature5Svg from './assets/feature-5.svg';
import feature6Svg from './assets/feature-6.svg';
import advantage1Svg from './assets/advantage-1.svg';
import advantage2Svg from './assets/advantage-2.svg';
import advantage3Svg from './assets/advantage-3.svg';
import supportedFeatureIconSvg from './assets/supported-feature-icon.svg';
import { ArrowRightOutlined } from '@ant-design/icons';

const features = [
  {
    icon: <Image src={feature1Svg} alt={''} width={64} height={64} />,
    title: '自主研发、代码级可控',
  },
  {
    icon: <Image src={feature2Svg} alt={''} width={64} height={64} />,
    title: '高度兼容 MySQL，平滑迁移替换',
  },
  {
    icon: <Image src={feature3Svg} alt={''} width={64} height={64} />,
    title: '新一代 HTAP 架构，加速业务实时洞察',
  },
  {
    icon: <Image src={feature4Svg} alt={''} width={64} height={64} />,
    title: '金融级可用性、可靠性和可维护性',
  },
  {
    icon: <Image src={feature5Svg} alt={''} width={64} height={64} />,
    title: '丰富的企业级配套工具',
  },
  {
    icon: <Image src={feature6Svg} alt={''} width={64} height={64} />,
    title: '完善的信息安全保护能力',
  },
];

const advantages = [
  {
    icon: <Image src={advantage1Svg} alt={''} />,
    title: '更多国产化企业级功能',
    description:
      '可视化管控平台（TEM）轻松管理上百个集群，全链路数据迁移平台（TMS）提供全流程的迁移工具和实施方案，高级安全特性构建多层次的数据安全防护体系。',
  },
  {
    icon: <Image src={advantage2Svg} alt={''} />,
    title: '更完善的国产化生态',
    description:
      '遵守国家标准和各项行业标准规范，全面兼容国产芯片、操作系统、中间件和软硬件生态，深耕中国企业级用户需求，交付全栈国产化解决方案。',
  },
  {
    icon: <Image src={advantage3Svg} alt={''} />,
    title: '更多元的服务支持方案',
    description:
      '专家级团队为您量身定制多种技术支持和高级服务方案，降低数据库迁移、上线和使用的风险，助您从容应对严峻的业务挑战，为业务连续性保驾护航。',
  },
];

const comparison = [
  {
    product: '基础组件',
    feature: [
      { index: '分布式计算引擎', base: 'check', community: 'check' },
      { index: '分布式行存储引擎', base: 'check', community: 'check' },
      { index: '分布式列存储引擎', base: 'check', community: 'check' },
      { index: '分布式调度管理引擎', base: 'check', community: 'check' },
    ],
  },
  {
    product: '生态工具',
    feature: [
      { index: 'TiUP 自动化部署管控', base: 'check', community: 'check' },
      {
        index: 'TiDB Operator 云原生部署管控',
        base: 'check',
        community: 'check',
      },
      {
        index: 'TiDB Data Migration 数据迁入',
        base: 'check',
        community: 'check',
      },
      { index: 'TiDB Dumpling 全量导出', base: 'check', community: 'check' },
      { index: 'TiDB Lightning 全量导入', base: 'check', community: 'check' },
      { index: 'TiCDC 增量数据同步', base: 'check', community: 'check' },
      {
        index: 'Sync-diff-inspector 数据校验',
        base: 'check',
        community: 'check',
      },
      {
        index: 'Backup & Restore 备份和恢复',
        base: 'check',
        community: 'check',
      },
    ],
  },
  {
    product: '企业级通用特性',
    feature: [
      { index: '支持 GB18030-2022 字符集', base: 'check', community: '' },
      {
        index: '支持存储过程（兼容 MySQL 语法）',
        base: 'check',
        community: '',
      },
    ],
  },
  {
    product: '企业级安全特性',
    feature: [
      { index: '安全审计增强', base: 'check', community: '' },
      { index: '权限管理增强', base: 'check', community: '' },
      { index: '访问控制增强', base: 'check', community: '' },
      { index: '数据加解密增强，支持国密算法', base: 'check', community: '' },
    ],
  },
  {
    product: '图形化平台',
    feature: [
      { index: '提供企业级运维管理平台', base: 'check', community: '' },
      { index: '提供企业级异构迁移平台', base: 'check', community: '' },
    ],
  },
  {
    product: '国产化生态',
    feature: [
      { index: '支持国产化芯片', base: 'check', community: '' },
      { index: '支持国产化操作系统', base: 'check', community: '' },
      { index: '支持国产化中间件', base: 'check', community: '' },
    ],
  },
  {
    product: '企业级服务',
    feature: [
      {
        index: '研发支持服务 - 24 小时在线值班响应',
        base: 'check',
        community: '社区论坛互助问答',
      },
      {
        index: '在线技术支持 - 400 电话 - 工单系统 - 邮件支持',
        base: 'check',
        community: '',
      },
      {
        index: '原厂专家服务 - 数据库交付工程师 - 高级产品专家服务 - 项目经理',
        base: 'check',
        community: '',
      },
      {
        index:
          '联合支持服务 - 合作伙伴数据库交付工程师 - 合作伙伴高级产品专家服务 - 项目经理',
        base: 'check',
        community: '',
      },
      {
        index:
          '发行版支持服务 - 内核级代码技术支持 - 高级产品专家服务 - 项目经理',
        base: 'check',
        community: '',
      },
      {
        index:
          '培训支持服务 - 核心原理与架构 - 数据库管理 - 数据库开发 - 故障处理与性能优化 - 技术资格认证',
        base: '平凯数据库培训支持服务',
        community: 'TiDB 培训支持服务',
      },
    ],
  },
];

// const nodeChecked = <Image src={supportedFeatureIconSvg} alt={'√'} />

export default function Home() {
  const { node, handleOpen } = useContactForm();

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <section className={styles.banner}>
          <div className={styles.banner_start}>
            {/*<Image className={styles.banner_start_logo} src={bannerLogoImage} alt={'TiDB - 分布式数据库企业版软件'} />*/}
            <h1>平凯数据库</h1>
            <p>
              平凯数据库是平凯星辰公司基于 TiDB
              开发的、适应中国客户需求和使用场景的企业级分布式数据库产品，具备数据强一致、水平弹性扩缩容、金融级高可用、实时
              HTAP
              等特性，为企业客户提供安全可靠、功能全面、性能卓越的分布式数据库能力和服务支持，助力企业加速释放数据价值。
            </p>
            <span className={styles.banner_start_button}>
              <a href="#comparison">
                详细功能参数对比
                <ArrowRightOutlined
                  style={{ marginLeft: 4, marginRight: 32 }}
                />
              </a>
              <a onClick={handleOpen}>
                立即咨询
                <ArrowRightOutlined style={{ marginLeft: 4 }} />
              </a>
            </span>
          </div>
          <Link href="/news/announcement-sep-30">
            <Image
              className={styles.banner_end_image}
              width={520}
              height={360}
              src="/banner.png"
              alt={'平凯数据库 = TiDB Open Core + 增强型企业级功能'}
              style={{ padding: 32 }}
            />
          </Link>
        </section>
        <section className={styles.feature}>
          <Row gutter={[64, 128]} align={'middle'} justify={'center'}>
            {features.map((value) => (
              <Col key={value.title} lg={8} md={12} sm={24}>
                <div className={styles.feature_icon}>{value.icon}</div>
                <div className={styles.feature_title}>{value.title}</div>
              </Col>
            ))}
          </Row>
        </section>
        <section className={styles.architecture} id={'product'}>
          <h2>产品架构</h2>
          <div className={styles.architecture_summary}>
            平凯数据库采用了基于 NewSQL
            理论的新一代分布式技术架构，相比于其他传统的技术路线，具有原生分布式存算分离、分布式事务、实时
            HTAP
            等架构特性，在大数据时代的数据存储与处理方面具备强大的优势，不仅能够满足企业的高性能、高可用性需求，又可以降低运维管理成本，提升工作效率，应对复杂业务场景不断变化的数据挑战。
          </div>
          <div className={styles.architecture_image}>
            <img src={architectureImage.src} alt={'产品架构'} />
          </div>
        </section>

        <section className={styles.comparison} id={'comparison'}>
          <h2>详细功能参数对比</h2>
          {/*<Table*/}
          {/*  bordered*/}
          {/*  className={styles.comparison_table}*/}
          {/*  dataSource={comparison}*/}
          {/*  pagination={false}*/}
          {/*  rowClassName={styles.comparison_row}*/}
          {/*>*/}
          {/*  <Table.Column title={''} dataIndex={'index'} key={'index'} render={(value, record, index) => {*/}
          {/*    if (record['平凯数据库'] == null && record['TiDB 社区版'] == null) {*/}
          {/*      return <span style={{fontWeight: 600, textAlign: 'center'}}>{value}</span>*/}
          {/*    } else {*/}
          {/*      return value*/}
          {/*    }*/}
          {/*  }} />*/}
          {/*  <Table.Column title={'平凯数据库'} dataIndex={'平凯数据库'} key={'平凯数据库'} render={(value, record, index) => {*/}
          {/*    return value ? <Image src={supportedFeatureIconSvg} alt={'√'} /> : ''*/}
          {/*  }} />*/}
          {/*  <Table.Column title={'TiDB 社区版'} dataIndex={'TiDB 社区版'} key={'TiDB 社区版'} render={(value, record, index) => {*/}
          {/*    return value ? <Image src={supportedFeatureIconSvg} alt={'√'} /> : ''*/}
          {/*  }} />*/}
          {/*</Table>*/}
          <div className={styles.comparison_table}>
            <table cellSpacing={0}>
              <thead>
                <tr className={styles.comparison_table_head}>
                  <th className={styles.comparison_table_title}></th>
                  <th className={styles.comparison_table_title}></th>
                  <th>平凯数据库</th>
                  <th>TiDB 社区版</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className={styles.comparison_table_title} rowSpan={4}>基础组件</td>
                  <td>分布式计算引擎</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>分布式行存储引擎</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>分布式列存储引擎</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>分布式调度管理引擎</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td className={styles.comparison_table_title} rowSpan={8}>生态工具</td>
                  <td>TiUP 自动化部署管控</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>TiDB Operator 云原生部署管控</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>TiDB Data Migration 数据迁入</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>TiDB Dumpling 全量导出</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>TiDB Lightning 全量导入</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>TiCDC 增量数据同步</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>Sync-diff-inspector 数据校验</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td>Backup & Restore 备份和恢复</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                </tr>
                <tr>
                  <td className={styles.comparison_table_title} rowSpan={2}>企业级通用特性</td>
                  <td>支持 GB18030-2022 字符集</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>支持存储过程（兼容 MySQL 语法）</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td className={styles.comparison_table_title} rowSpan={4}>企业级安全特性</td>
                  <td>安全审计增强</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>权限管理增强</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>访问控制增强</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>数据加解密增强，支持国密算法</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td className={styles.comparison_table_title} rowSpan={2}>图形化平台</td>
                  <td>提供企业级运维管理平台</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>提供企业级异构迁移平台</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td className={styles.comparison_table_title} rowSpan={3}>国产化生态</td>
                  <td>支持国产化芯片</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>支持国产化操作系统</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>支持国产化中间件</td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td className={styles.comparison_table_title} rowSpan={6}>企业级服务</td>
                  <td>
                    研发支持服务
                    <br />- 24 小时在线值班响应
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}>
                    社区论坛互助问答
                  </td>
                </tr>
                <tr>
                  <td>
                    在线技术支持
                    <br /> - 400 电话
                    <br /> - 工单系统
                    <br /> - 邮件支持
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>
                    原厂专家服务<br /> - 数据库交付工程师<br /> - 高级产品专家服务<br /> -
                    项目经理
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>
                    联合支持服务<br /> - 合作伙伴数据库交付工程师<br /> -
                    合作伙伴高级产品专家服务<br /> - 项目经理
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>
                    发行版支持服务<br /> - 内核级代码技术支持<br /> - 高级产品专家服务<br /> -
                    项目经理
                  </td>
                  <td className={styles.comparison_table_title}>
                    <Image src={supportedFeatureIconSvg} alt={'√'} />
                  </td>
                  <td className={styles.comparison_table_title}></td>
                </tr>
                <tr>
                  <td>
                    培训支持服务<br /> - 核心原理与架构<br /> - 数据库管理<br /> - 数据库开发<br /> -
                    故障处理与性能优化<br /> - 技术资格认证
                  </td>
                  <td className={styles.comparison_table_title}>
                    平凯数据库培训支持服务
                  </td>
                  <td className={styles.comparison_table_title}>
                    TiDB 培训支持服务
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          {
            <BlueButton style={{ marginTop: 32 }} onClick={handleOpen}>
              立即咨询
            </BlueButton>
          }
        </section>
        {node}
      </main>
    </div>
  );
}