import React, { useState } from "react"
import classNames from "classnames"
import {
  Layout,
  Seo,
  Banner,
  CustomLink,
  LinkModule,
  Container,
  ListLayout,
  ListImg,
  Background,
  Icon,
} from "@/components"
import { ContactFormInner } from "@/components/contact-form/ContactForm"
import VideoPlayer from "@/components/video-play"
import RelatedCards from "@/components/related-cards"

import * as styles from "./index.module.scss"

interface IProps extends React.HTMLAttributes<HTMLDivElement> {
  location?: ILocation
}

const advantages = [
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/advantage-1.png",
    title: "平滑迁移，灵活扩缩",
    content:
      "TiDB Cloud 高度兼容 MySQL 协议，原有业务应用的常见开发框架及语言均可继续使用；支持数据 TB 级到 PB 级的水平线性扩展，帮助出海企业灵活应对业务增长。",
  },
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/advantage-2.png",
    title: "简单敏捷，一库到底",
    content:
      "TiDB  Cloud 无需分库分表，开箱即用，从新建业务到高速增长的全周期，一库到底；SLA 保证，可视化运维管控界面，降低出海企业技术门槛，减少开发、运维成本。",
  },
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/advantage-3.png",
    title: "新鲜数据，实时洞察",
    content:
      "TiDB  Cloud 可同时实现 OLTP 和 Real Time OLAP，最大化新鲜数据的实时数据价值；在大幅降低数据总副本数和同步延时的同时，保障在线业务和分析业务的独立与稳定。",
  },
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/advantage-4.png",
    title: "多云支持，开源中立",
    content:
      "TiDB Cloud 为出海用户提供统一、高效、低成本的全托管分布式数据库服务，支持 AWS 和 Google Cloud 等主流云厂商，为出海企业的多云战略提供天然依托。",
  },
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/advantage-5.png",
    title: "充分验证的企业级稳定性",
    content:
      "TiDB Cloud 保障 ACID，满足金融级高可用要求；TiDB 在全球已获得超过 3000 家用户生产环境的部署与验证，海量用户的广泛应用，是对 TiDB 稳定性的认可与体现。",
  },
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/advantage-6.png",
    title: "企业级安全合规",
    content:
      "为出海业务提供企业级安全能力，满足全球监管组织的安全合规需求。TiDB Cloud 已通过 SOC 2 Type 2、ISO 27001:2013、ISO 27701 等认证，符合 GDPR 要求。",
  },
]

const solutions = [
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/solution-1.svg",
    title: "游戏出海",
    content: (
      <ul>
        <li>TiDB 支持线性水平扩展，解决出海游戏快速增长瓶颈</li>
        <li>
          TiDB 具备 HTAP
          一栈式实时数据分析能力，可帮助出海游戏厂商及时调整运营策略
        </li>
        <li>TiDB 提供秒级 Online DDL，帮助出海游戏不停服快速迭代</li>
        <li>
          TiDB Cloud
          支持全球多云部署，不论用户使用哪个云厂商服务，都可以提供统一、高效、低成本的云数据库服务
        </li>
      </ul>
    ),
    link:
      "https://live.pingcap.com/resources/ResourcePc/ResourcePcInfo?pf_uid=19697_1864&id=37375&source=1&pf_type=3&channel_id=30309&channel_name=pingcap-%E5%AE%98%E7%BD%91&tag_id=dafc115c773f5254",
  },
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/solution-2.svg",
    title: "跨境电商",
    content: (
      <ul>
        <li>TiDB 支持线性水平扩展，解决跨境电商的海量数据处理问题</li>
        <li>
          TiDB 具备实时 HTAP
          能力，基于一个技术栈即可实现数据实时分析，帮助用户及时调整出海电商运营策略
        </li>
        <li>TiDB 高度兼容 MySQL 生态，代码零改造，迁移低门槛</li>
        <li>TiDB 支持多云部署，提供统一的云数据库服务</li>
      </ul>
    ),
    link:
      "https://live.pingcap.com/resources/ResourcePc/ResourcePcInfo?pf_uid=19697_1864&id=37376&source=1&pf_type=3&channel_id=30309&channel_name=pingcap-%E5%AE%98%E7%BD%91&tag_id=dafc115c773f5254",
  },
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/solution-3.svg",
    title: "金融支付",
    content: (
      <ul>
        <li>TiDB 可根据需要进行弹性扩缩容，无需分库分表</li>
        <li>
          TiDB 提供 100%
          ACID（金融级保障），分布式事务性能良好，显著提升业务开发效率
        </li>
        <li>
          HTAP 架构同时支持 OLTP 与 OLAP 负载，有助于实时检测和防止欺诈交易
        </li>
        <li>支持同城多中心、两地三中心等金融级高可用方案</li>
      </ul>
    ),
    link:
      "https://live.pingcap.com/resources/ResourcePc/ResourcePcInfo?pf_uid=19697_1864&id=37374&source=1&pf_type=3&channel_id=30309&channel_name=pingcap-%E5%AE%98%E7%BD%91&tag_id=dafc115c773f5254",
  },
]

const cases = [
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/case-1.png",
    content: (
      <>
        <p>
          IGG 是一家全球领先的手游开发商及运营商，用户遍及全球 200
          多个国家和地区。最受欢迎的游戏包括“王国纪元”、“城堡争霸”等。
        </p>
        <p>
          IGG 将游戏日志业务、用户画像业务、订单和报表等业务的 MySQL 集群迁移至
          TiDB ，实现了数据节点的弹性扩展，且性能随节点增加而线性增长，突破了
          MySQL 单机容量限制及扩展性问题，请求量平均达 8000
          QPS，报表数据查询缩短至几十秒。
        </p>
      </>
    ),
    link: "#",
  },
  {
    imageUrl: "/tidb-enabling-china-enterprise-go-global/case-2.png",
    content: (
      <>
        <p>
          作为一家杰出的全球独立站（Shopping Cart
          SaaS）公司，店匠科技通过一站式零编程的 SaaS
          建站系统，为商户提供品牌出海、订单管理等方案，在全球累计服务商户超过
          36 万家。
        </p>
        <p>
          店匠通过使用 TiDB Cloud
          存储商品信息数据，解决了出海业务不断增长的数据处理瓶颈，业务数据增长再无顾虑，复杂查询达到
          500ms
          以下。同时，云上托管的分布式数据库服务，降低了技术门槛，减少开发、运维成本，解决了店匠
          DBA 不足的困境。
        </p>
      </>
    ),
    link: "#",
  },
]

const relatedCases = [
  {
    id: "case-1",
    title: "TiDB x 老虎国际 | 降低架构复杂性，保障全球用户安全可靠投资",
    customUrl: "user-case-tiger-brokers",
    description:
      "出于对开源技术的信任和认同，老虎国际很早就在数据中台业务中应用了 TiDB 3.0 版本，此后一路升级到 TiDB 5.0，解决了业务挑战与数据安全挑战。",
    logo: {
      alt: "老虎国际 logo",
      media: {
        url: "https://img1.www.pingcap.com/prod/_64a1290a98.png",
      },
    },
  },
  {
    id: "case-2",
    title: "TiDB x LiveMe丨单表数据量 39 亿条，简化架构新体验",
    customUrl: "user-case-liveme",
    description:
      "LiveMe 作为全球领先的直播平台，在全球范围内取得了巨大的成功。本文将介绍 LiveMe 如何利用 TiDB 实现技术架构的升级，以及在此过程中取得的成功经验。",
    logo: {
      alt: "LiveMe logo",
      media: {
        url: "https://img1.www.pingcap.com/prod/liveme_logo_f0b8cf68e0.png",
      },
    },
  },
  {
    id: "case-3",
    title: "TiDB x 同盾科技丨实时数据架构为风控智能决策保驾护航",
    customUrl: "user-case-tongdun",
    description:
      "为了确保服务的低延迟和高可用性，同盾技术团队最终选择了 TiDB 作为离线层的核心数据库，基于 TiDB 打造的实时数据架构为风控智能决策保驾护航。",
    logo: {
      alt: "同盾 logo",
      media: {
        url: "https://img1.www.pingcap.com/prod/LOGO_2x_8476ee7e9c.png",
      },
    },
  },
  {
    id: "case-4",
    title: "TiDB x vivo | 解决云服务海量数据挑战",
    customUrl: "user-case-vivo",
    description:
      "随着 vivo 业务发展，用户量增长迅速，存储在云端的数据量越来越大，海量数据给后端存储和数据库带来了巨大的挑战。vivo 采用 TiDB 实现了海量数据实时 OLAP 、云服务业务中的元数据管理等。",
    logo: {
      alt: "vivo-logo",
      media: {
        url: "https://img1.www.pingcap.com/prod/vivo_1fff14a44d.svg",
      },
    },
  },
  {
    id: "case-5",
    title: "TiDB x NFTScan | 一栈式 HTAP 数据库为 Web3 数据服务提供毫秒级多维查询",
    customUrl: "user-case-nftscan",
    description:
      "NFTScan 在快速发展中发现传统的 MySQL 数据库无法满足业务的快速增长，而 TiDB 能够提供毫秒级多维查询的能力，为 NFTScan 提供了更高效的服务，于是选择 TiDB 作为核心数据架构。",
    logo: {
      alt: "NFTScan-logo",
      media: {
        url: "https://img1.www.pingcap.com/prod/nftscan_logo_7208588597.png",
      },
    },
  },
]

export default function (props: IProps) {
  const [isPlaying, setPlayState] = useState(false)
  const handleClose = () => {
    setPlayState(!isPlaying)
  }

  return (
    <Layout>
      <Seo
        title="TiDB 助力中国企业扬帆出海"
        description="TiDB Cloud 广泛应用于游戏、电商、Fintech、社交娱乐等出海领域，支持全球多云部署，致力于为出海企业提供安全合规、稳定可靠的数据库服务，成为企业开展全球化业务的重要基础设施和数据底座。"
        keywords={"TiDB,出海业务,中国企业出海".split(",")}
      />
      <Banner
        title="TiDB Cloud 助力中国企业扬帆出海"
        subtitle="TiDB Cloud 广泛应用于游戏、电商、Fintech、社交娱乐等出海领域，支持全球多云部署，致力于为出海企业提供安全合规、稳定可靠的数据库服务，成为企业开展全球化业务的重要基础设施和数据底座。"
        image={{
          media: {
            url: "/tidb-enabling-china-enterprise-go-global/banner.png",
            width: 0,
            height: 0,
          },
        }}
        withoutMask
      >
        <a className="button is-white is-medium" href="#contact">
          立即咨询
        </a>
      </Banner>

      <section className={styles.section}>
        <Container>
          <h1>TiDB Cloud 出海技术优势</h1>
          <ListLayout className={styles.listWrapper} listData={advantages}>
            {item => (
              <div className={styles.inner}>
                <ListImg
                  className={styles.imgContent}
                  imgInfo={{
                    media: { url: item.imageUrl, width: 0, height: 0 },
                  }}
                  scale={[416, 171]}
                />
                <h4>{item.title}</h4>
                <div>{item.content}</div>
              </div>
            )}
          </ListLayout>
        </Container>
      </section>

      <section
        className={classNames(styles.section, styles.contact)}
        id="contact"
      >
        <div className={styles.bg}></div>
        <Container>
          <h1>立即咨询</h1>
          <div className="columns is-variable is-4-desktop is-2-tablet">
            <div className="column is-6">
              <p className={styles.text}>
                填写信息，与 PingCAP 专家建立联系，您将获得：
              </p>
              <div className="columns is-mobile is-multiline">
                <div className="column is-6">
                  <img
                    src="/tidb-enabling-china-enterprise-go-global/contact-1.svg"
                    alt=""
                  />
                  <p>基于具体业务的架构建议</p>
                </div>
                <div className="column is-6">
                  <img
                    src="/tidb-enabling-china-enterprise-go-global/contact-2.svg"
                    alt=""
                  />
                  <p>行业通行的最佳实践</p>
                </div>
                <div className="column is-6">
                  <img
                    src="/tidb-enabling-china-enterprise-go-global/contact-3.svg"
                    alt=""
                  />
                  <p>实施方案的建议</p>
                </div>
                <div className="column is-6">
                  <img
                    src="/tidb-enabling-china-enterprise-go-global/contact-4.svg"
                    alt=""
                  />
                  <p>技术互动与答疑</p>
                </div>
              </div>
            </div>
            <div className="column is-6">
              <div className={styles.formWrapper}>
                <ContactFormInner isShowHeader={false} />
              </div>
            </div>
          </div>
        </Container>
      </section>

      <section className={classNames(styles.section, styles.solutions)}>
        <Container>
          <h1>出海业务典型场景及解决方案</h1>
          <ListLayout className={styles.listWrapper} listData={solutions}>
            {({ imageUrl, title, content, link }) => (
              <div className={styles.inner}>
                <ListImg
                  className={styles.imgContent}
                  imgInfo={{
                    media: { url: imageUrl, width: 0, height: 0 },
                  }}
                  scale={[200, 90]}
                />
                <h3>{title}</h3>
                <div>{content}</div>
                <LinkModule to={link} target="_blank">
                  下载白皮书
                </LinkModule>
              </div>
            )}
          </ListLayout>
        </Container>
      </section>

      <section className={classNames(styles.section, styles.cases, styles.removePaddingBottom)}>
        <Container className={styles.casesInner}>
          <h1>出海企业的成功实践</h1>
          <div className={styles.videoContainer}>
            <Background
              className="is-flex is-flex-direction-column is-align-items-center is-justify-content-center"
              image={{
                media: {
                  url: "/tidb-enabling-china-enterprise-go-global/video-bg.jpg",
                  width: 0,
                  height: 0,
                },
              }}
              isShowMask={false}
            >
              <h1>只有真正的全球化公司，才能服务全球化客户</h1>
              <div className="pb-4">柳锴 | 老虎国际 | 技术 VP</div>
              <div
                className={styles.playIcon}
                onClick={() => {
                  setPlayState(true)
                }}
              >
                <Icon name="play" />
              </div>
            </Background>
          </div>
          <VideoPlayer
            link="https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/_7c8e01bb82.mp4"
            play={isPlaying}
            close={handleClose}
          />
          </Container>
      </section>

      <RelatedCards
        type="case"
        cards={relatedCases}
        title=''
        footer=''
        styleName='removePadding'
      />

      <section className={classNames(styles.section, styles.cases, styles.removePaddingTop)}>
        <Container>
          <div className={styles.logo}>
            <div className="columns is-mobile is-centered is-align-items-center is-flex-wrap-wrap">
              <div className="column is-6-mobile">
                <img src="/tidb-enabling-china-enterprise-go-global/logo-1.png" />
              </div>
              <div className="column is-6-mobile">
                <img src="/tidb-enabling-china-enterprise-go-global/logo-2.png" />
              </div>
              <div className="column is-6-mobile">
                <img src="/tidb-enabling-china-enterprise-go-global/logo-3.png" />
              </div>
              <div className="column is-6-mobile">
                <img src="/tidb-enabling-china-enterprise-go-global/logo-4.png" />
              </div>
              <div className="column is-6-mobile">
                <img src="/tidb-enabling-china-enterprise-go-global/logo-5.png" />
              </div>
            </div>
          </div>
        </Container>
      </section>

      <section className={classNames(styles.freeExperience)}>
        <Container>
          <div
            className={classNames(
              "is-flex is-justify-content-space-between is-align-items-center",
              styles.content
            )}
          >
            <h1>免费体验全新的分布式 HTAP 数据库</h1>

            <a
              className={classNames("button is-white is-medium", styles.button)}
              href="#contact"
            >
              立即咨询
            </a>
          </div>
        </Container>
      </section>
    </Layout>
  )
}