import * as React from "react"
import classNames from "classnames"
import { Link } from "gatsby"
import { useScroll } from "ahooks"
import Scrollspy from "react-scrollspy"
import { Col, Popup, Row } from "tdesign-react"

import { Container, Layout, Logo, Seo } from "@/components"
import OutLink from "@/components/OutLink"
import BackgroundContainer from "@/components/BackgroundContainer"
import TiDBLogo from "@/components/logo/TiDBLogo"

import * as styles from "./index.module.scss"
import lineLeftSvg from "./line-left.svg"
import lineRightSvg from "./line-right.svg"
import circleBlueSvg from "./circle-blue.svg"
import circleOrangeSvg from "./circle-orange.svg"
import driveSvg from "./drive.svg"
import busSvg from "./bus.svg"
import airplaneSvg from "./airplane.svg"
import avatar倪光南Image from "./avatars/倪光南.png"
import avatar刘奇Image from "./avatars/刘奇.png"
import avatar洪亮Image from "./avatars/洪亮.png"
import avatar汪洋Image from "./avatars/汪洋.png"
import avatar罗水华Image from "./avatars/罗水华.png"
//import avatar杨磊Image from "./avatars/杨磊.png"
import avatar陈煜琦Image from "./avatars/陈煜琦.png"
import avatar唐刘Image from "./avatars/唐刘.png"
import avatar颜正耀Image from "./avatars/颜正耀.png"
import avatar薛港Image from "./avatars/薛港.png"
import avatar邵建军Image from "./avatars/邵建军.png"
import avatar彭敬Image from "./avatars/彭敬.png"
import avatar陈浩Image from "./avatars/陈浩.png"
import avatar何志东Image from "./avatars/何志东.png"
import avatar吕玉良Image from "./avatars/吕玉良.png"
import avatar于伟Image from "./avatars/于伟.png"
import avatar黄东旭Image from "./avatars/黄东旭.png"
import avatar黄蔚Image from "./avatars/黄蔚.png"
import avatar苗正Image from "./avatars/苗正.png"
import avatar区健灵Image from "./avatars/区健灵.png"
//import avatar何志东Image from "./avatars/何志东.png"
import avatar童艺武Image from "./avatars/童艺武.png"
import avatar杜振强Image from "./avatars/杜振强.png"
import avatar何傲Image from "./avatars/何傲.png"
import avatar李家林Image from "./avatars/李家林.png"
import avatar张政俊Image from "./avatars/张政俊.png"
import avatar吴绍辰Image from "./avatars/吴绍辰.png"
//import avatar陈浩Image from "./avatars/陈浩.png"
import avatar戴涛Image from "./avatars/戴涛.png"
import avatar更多嘉宾Image from "./avatars/更多嘉宾.png"

import 神州数码Image from "./partners/神州数码.png"
import vstecsImage from "./partners/vstecs.png"

import always_ahead_image from "./always_ahead.svg"
import three_half_circle_image from "./three_half_circle.png"

import pingcap_user_summit_image from "./review/pingcap_user_summit.png"
import pingcap_devcon_2021_image from "./review/pingcap_devcon_2021.png"

import map_image from "./map/map.jpg"
import picture_image from "./map/picture.jpg"

import title_morning_image from "./title_morning.png"
import title_afternoon_image from "./title_afternoon.png"

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

const seoTitle = "创新涌动于先，PingCAP 用户峰会 2023"
const seoDescription = "PingCAP 用户峰会是汇聚前沿数据科技与商业洞见的年度用户大会，线上线下同时开启，立即报名！"
const seoKeywords = "PingCAP,用户峰会,涌现,Serverless".split(",")

const ctaUrl = 'https://app.ma.scrmtech.com/svip/sapIndex/SapSourceData?pf_uid=19697_1864&sid=78948&source=2&pf_type=3&channel_id=30309&channel_name=pingcap-%E5%AE%98%E7%BD%91&tag_id=dafc115c773f5254'
const mapUrl = 'https://map.baidu.com/poi/%E5%8C%97%E4%BA%AC%E8%A5%BF%E5%8D%97%E5%8D%8E%E9%82%91%E9%85%92%E5%BA%97/@12944621.345000004,4824518.420000001,19z?uid=445da782b037775e15a190a2&ugc_type=3&ugc_ver=1&device_ratio=1&compat=1&pcevaname=pc4.1&querytype=detailConInfo&da_src=shareurl'

const schedule = {
  morning: [
    {timeRange: '9:30-9:35', title: '开场致辞', speakerTitle: '中国工程院院士', speakerName: '倪光南', replayUrl: '#'},
    {timeRange: '9:35-10:35', title: '创新涌动于先', speakerTitle: 'PingCAP 创始人兼 CEO', speakerName: <>刘&nbsp;&nbsp;&nbsp;&nbsp;奇</>, replayUrl: '#'},
    {timeRange: '10:35-10:50', title: '标准化引领数据库高质量发展', speakerTitle: '', speakerName: '', replayUrl: '#'},
    {timeRange: '10:50-11:40', title: 'PingCAP 中国战略', speakerTitle: <>PingCAP 副总裁<br/>PingCAP 研发副总裁</>, speakerName: <>陈煜琦<br/>唐&nbsp;&nbsp;&nbsp;&nbsp;刘</>},
    {timeRange: '11:40-12:10', title: '面向未来的数据库', speakerTitle: 'PingCAP 联合创始人兼 CTO', speakerName: '黄东旭', replayUrl: '#'},
  ],
  afternoon: [
    {timeRange: '13:30-13:50', title: 'TiDB 在微众银行的多场景创新应用', speakerName: '黄蔚', speakerTitle: '微众银行首席数据库架构师'},
    {timeRange: '13:50-14:05', title: '构建新型金融数字底座 助力银行核心系统转型', speakerName: '苗正', speakerTitle: '中电金信核心业务系统首席技术顾问'},
    {timeRange: '14:05-14:25', title: '从数据库整合到一体化数据库服务', speakerName: '区健灵', speakerTitle: '广发证券资深架构师'},
    {timeRange: '14:25-14:40', title: '华锐新一代证劵核心系统的国产化实践', speakerName: '何志东', speakerTitle: '华锐分布式技术实验室主任'},
    {timeRange: '14:40-15:00', title: '数字出海：店匠 DTC 电商商品数据场景应用', speakerName: '童艺武', speakerTitle: '店匠 DBA 负责人'},
    {timeRange: '15:00-15:15', title: 'TiDB 数据库整合方案助力出海企业敏捷发展', speakerName: '杜振强', speakerTitle: 'PingCAP 资深解决方案架构师'},
    {timeRange: '15:15-15:30', title: '神州数码在 TiDB 技术生态能力建设上的探索', speakerName: '何傲', speakerTitle: '神州数码 TiDB 团队技术负责人'},
    {timeRange: '15:30-15:50', title: '智慧物流：TiDB 在安能物流的实时化场景创新', speakerName: '李家林', speakerTitle: '安能物流数据库负责人'},
    {timeRange: '15:50-16:10', title: '中欧财富：从分布式到 HTAP 的数据库进阶之路', speakerName: '张政俊', speakerTitle: '中欧财富高级技术经理'},
    {timeRange: '16:10-16:30', title: '漱玉平民核心系统 CRM 在移动云上的 TiDB 创新', speakerName: '吴绍辰', speakerTitle: '漱玉连锁大药房 CRM 研发负责人'},
    {timeRange: '16:30-16:45', title: '基于一体化数据库的业财融合与价值创造', speakerName: '陈浩', speakerTitle: '甄盈业财联合创始人&产品事业部总经理'},
    {timeRange: '16:45-17:15', title: '激流入海，从核心场景到降本增效', speakerName: '戴涛', speakerTitle: 'PingCAP 解决方案技术部总经理'},
  ],
}

const guests = [
  {name: '倪光南', title: '中国工程院院士', avatarUrl: avatar倪光南Image},
  {name: '刘奇', title: 'PingCAP 创始人兼 CEO', avatarUrl: avatar刘奇Image},
  {name: '罗水华', title: '北京银行研发中心专家', avatarUrl: avatar罗水华Image},
  {name: '洪亮', title: '滔博运动首席架构师', avatarUrl: avatar洪亮Image},
  {name: '汪洋', title: '平安科技数据库总工程师', avatarUrl: avatar汪洋Image},
  //{name: '杨磊', title: '中国电子技术标准化研究院 信息技术中心副主任', avatarUrl: avatar杨磊Image},
  {name: '陈煜琦', title: 'PingCAP 副总裁', avatarUrl: avatar陈煜琦Image},
  {name: '唐刘', title: 'PingCAP 研发副总裁', avatarUrl: avatar唐刘Image},
  {name: '颜正耀', title: '漱玉平民大药房副总裁兼 CIO', avatarUrl: avatar颜正耀Image},
  {name: '薛港', title: '中移（苏州）软件研发公司云原生数据库研发负责人', avatarUrl: avatar薛港Image},
  {name: '邵建军', title: '中电金信副总裁', avatarUrl: avatar邵建军Image},
  {name: '彭敬', title: '中科软副总裁', avatarUrl: avatar彭敬Image},
  {name: '陈浩', title: '甄盈业财联合创始人 & 产品事业部总经理', avatarUrl: avatar陈浩Image},
  {name: '何志东', title: '华锐分布式技术实验室主任', avatarUrl: avatar何志东Image},
  {name: '吕玉良', title: '英方软件行业技术总监', avatarUrl: avatar吕玉良Image},
  {name: '于伟', title: '东软医疗保障行业线技术总监', avatarUrl: avatar于伟Image},
  {name: '黄东旭', title: 'PingCAP 联合创始人兼 CTO', avatarUrl: avatar黄东旭Image},
  {name: '黄蔚', title: '微众银行首席数据库架构师', avatarUrl: avatar黄蔚Image},
  {name: '苗正', title: '中电金信核心业务系统首席技术顾问', avatarUrl: avatar苗正Image},
  {name: '区健灵', title: '广发证券资深架构师', avatarUrl: avatar区健灵Image},
  //{name: '何志东', title: '华锐分布式技术实验室主任', avatarUrl: avatar何志东Image},
  {name: '童艺武', title: '店匠 DBA 负责人', avatarUrl: avatar童艺武Image},
  {name: '杜振强', title: 'PingCAP 资深解决方案架构师', avatarUrl: avatar杜振强Image},
  {name: '何傲', title: '神州数码 TiDB 团队技术负责人', avatarUrl: avatar何傲Image},
  {name: '李家林', title: '安能物流数据库负责人', avatarUrl: avatar李家林Image},
  {name: '张政俊', title: '中欧财富高级技术经理', avatarUrl: avatar张政俊Image},
  {name: '吴绍辰', title: '漱玉连锁大药房 CRM 研发负责人', avatarUrl: avatar吴绍辰Image},
  //{name: '陈浩', title: '甄盈业财联合创始人&产品事业部总经理', avatarUrl: avatar陈浩Image},
  {name: '戴涛', title: 'PingCAP 解决方案技术部总经理', avatarUrl: avatar戴涛Image},
  //{name: '更多嘉宾持续更新中', title: <br />, avatarUrl: avatar更多嘉宾Image},
]

const partner: {[key: string]: {name: string, url: string, image: string, description: React.ReactNode}[]} = {
  赞助: [
    {name: '神州数码', url: 'https://www.digitalchina.com', image: 神州数码Image, description: (
      <>
        <p>神州数码集团股份有限公司（简称：神州数码；股票代码：000034.SZ）。从 2000 年成立伊始，神州数码以“数字中国”为使命，锐意变革，砥砺前行，始终坚持以全球领先科技和自主创新核心技术赋能产业数字化转型和数字经济发展。2022 年，神州数码全年营业收入实现 1158.8 亿元，位列《财富》中国 500 强榜单第 114 位，《福布斯》2022 中国数字经济 100 强第 29 位。</p>
        <p>致力于成为领先的数字化转型合作伙伴，神州数码围绕企业数字化转型的关键要素，开创性的提出“数云融合”战略和技术体系框架，着力在云原生、数字原生、数云融合关键技术和信创产业上架构产品和服务能力，为处在不同数字化转型阶段的快消零售、汽车、金融、医疗、政企、教育、运营商等行业客户提供泛在的敏捷 IT 能力和融合的数据驱动能力，构建跨界融合创新的数字业务场景和新业务模式，助力企业级客户建立面向未来的核心能力和竞争优势，全面推动社会的数字化、智能化转型升级。</p>
      </>
    )},
    {name: '伟仕佳杰', url: 'http://www.vstecs.com', image: vstecsImage, description: (
      <>
        <p>伟仕佳杰控股有限公司成立于 1991 年，2002 年在香港主板上市。伟仕佳杰是亚太地区重要的科技产品渠道开发与技术方案集成服务商。服务网络密布中国、新加坡、马来西亚、泰国、印尼、菲律宾、缅甸、老挝、柬埔寨九个国家，高度覆盖一带一路区域，透过 50,000 家渠道伙伴，服务 19 亿人群；伟仕佳杰是 300 多家世界 500 强科技企业，在亚太地区最重要的合作伙伴；在云生态建设、IT 运维服务、供应链金融、信创产业等拓展出全新版图，为全链路伙伴提供高效、持续、多元的商业生态闭环。</p>
      </>
    )},
  ],
  /*黄金赞助: [
    {name: 'Bytebase', url: 'https://www.bytebase.com', image: bytebaseImage, description: (
      <>
        <p>Bytebase 由前 Google 工程师创立，是基于 Google 的开发最佳实践，推出的一款面向研发工程师和  DBA（数据库管理员）的开源数据库管理工具。用于负责应用开发过程中，从 SQL 审核，数据库变更，记录归档，变更回滚的一整套数据库开发生命周期管理。无论对于 DevOps 组织还是 DBA 组织， Bytebase 都有相应的解决方案。</p>
      </>
    )},
    {name: 'Databend', url: 'https://www.databend.com', image: databendImage, description: (
      <>
        <p>Datafuse Labs 成立于 2021 年 3 月，是开源项目 Databend 的背后团队，团队主要成员来源于 ClickHouse 社区头部贡献者，在云原生数据库领域有着丰富的工程经验，专注于前沿技术领域的创新与实践，以及 Databend 开源生态、社区构建和 Databend Cloud 运作支撑。</p>
        <p>Databend 是一款开源、完全面向云架构、基于对象存储提供实时分析的新一代云原生数据仓库产品。</p>
        <p>Databend Cloud 是一款云上更安全，速度更快、价格更低的大数据云服务平台，为企业提供高性能、低成本的数据分析服务。</p>
      </>
    )},
    {name: '爱可生', url: 'https://www.actionsky.com', image: 爱可生Image, description: (
      <>
        <p>上海爱可生信息技术股份有限公司（简称“爱可生”）成立于 2003 年，深耕数据库行业超过 15 年，为企业数字化转型提供高性价比、快速落地的多数据库智能管理平台、数据库容器云平台、数据库多地多中心跨云容灾平台、分布式数据库、向量数据库等解决方案。爱可生是国内企业级数据处理技术整体解决方案提供商、国内领先的分布式数据库领域优秀企业，致力于用数据驱动企业增长，助力企业数字化转型。</p>
      </>
    )},
    {name: '云启资本', url: 'http://www.yunqi.vc', image: 云启资本Image, description: (
      <>
        <p>云启资本是国内最早专注于「科技创新+产业赋能」的专研型创投机构，连续多年入选清科、投中“中国早期投资机构 TOP10”。2014 年成立伊始，围绕「科技产业化」和「产业数字化」系统化深耕，已投资 150 多家创业公司，30 多家已成长为行业领头羊，包括：360 数科(NASDAQ:QFIN)、英科医疗(SZ:300677)、英科再生(SH:688087)、酷家乐、百布、PingCAP、元戎启行、擎朗智能、XTransfer、环世物流、德风科技、小胖熊、智齿科技等。</p>
        <p>云启也是国内最早系统布局开源的机构，在早期领投了 PingCAP、Zilliz、Jina AI 和 Singularity 等多家优秀企业。2021 年作为唯一投资机构，入选科创中国开源创新机构榜单。</p>
      </>
    )},
    {name: '初心资本', url: 'https://monadventures.com', image: 初心资本Image, description: (
      <>
        <p>初心资本成立于 2015 年 6 月，是一家以科技与互联网为中心、积极布局新兴业态的早期股权投资基金，专注于企业级软件、科技创新等领域的投资。</p>
        <p>初心资本致力于捕捉因科技赋能而改变行业的新格局、企业服务降本增效优化企业新模式并进行投资布局。代表项目包括新型分布式数据库 PingCAP、人工智能客服系统乐言科技、全场景数据智能服务商滴普科技、互联网互助保障社群水滴互助、工业机器人翼菲自动化、RPA 解决方案提供商影刀、视觉 PaaS 平台极视角、跨境电商 Cider、高性能四足机器人公司宇树科技、电商代运营公司云雀科技等。</p>
        <p>我们关注创业的初心，希望在陪伴创业者共同成长的过程中，等待下一个指数级增长公司、下一位新生代的商业领袖，通过科技赋能，让我们的生活方式变得更美好。</p>
      </>
    )},
  ],
  午餐赞助: [
    {name: '华创资本', url: 'http://www.cgcvc.com', image: 华创资本Image, description: (
      <>
        <p>成立于 2006 年的华创资本专注于企业软件、前沿科技、生命科学、消费升级等领域的早期投资。目前华创资本管理的人民币基金和美元基金合计近百亿元人民币，投资范围覆盖天使轮到 C 轮，单笔投资金额从数百万元人民币到亿元人民币。代表投资项目包括：什么值得买、Wish、老虎证券、才云科技（字节跳动收购）、小满科技（阿里巴巴收购）、PingCAP、同盾科技等。</p>
      </>
    )},
  ],*/
}

const ButtonNode = <a className={styles.cta_button} href={ctaUrl} target="_blank">立即报名</a>

const SectionTitle: React.FC<{children: React.ReactNode}> = (props) => {
  return (
    <div className={styles.SectionTitle}>
      <div style={{marginRight: 32}}><img src={lineLeftSvg} alt="" /></div>
      <div style={{width: 36, height: 36, margin: '0 8px', position: 'relative', bottom: 8}}><img src={circleOrangeSvg} alt="" style={{width: 36, height: 36}} /></div>
      <h2>{props.children}</h2>
      <div style={{width: 25, height: 25, margin: '0 8px', position: 'relative', top: 8}}><img src={circleBlueSvg} alt="" style={{width: 25, height: 25}} /></div>
      <div style={{marginLeft: 32}}><img src={lineRightSvg} alt="" /></div>
    </div>
  )
}

export default function (props: IProps) {
  //const { location } = props
  const position = useScroll()
  const transparentCondition = (position?.top ?? 0) > 0

  const headerRender = (
    <nav className={classNames(styles.navbar, {[styles.navbar_non_transparent]: !transparentCondition})}>
      <Container className={styles.navbar_container}>
        <div className={styles.navbar_start}>
          <Link to="/" className={styles.navbar_start_logo}>
            <Logo height={32} />
          </Link>
          <OutLink href="https://tidb.net" className={styles.navbar_start_logo_tidb}>
            <TiDBLogo height={32} />
          </OutLink>
        </div>
        <Scrollspy items={['about', 'schedule', 'guest', 'guide']} currentClassName={styles.navbar_end_link_selected} className={styles.navbar_end}>
          <li className={styles.navbar_end_link}>
            <a href="#about">关于</a>
          </li>
          <li className={styles.navbar_end_link}>
            <a href="#schedule">会议议程</a>
          </li>
          <li className={styles.navbar_end_link}>
            <a href="#guest">演讲嘉宾</a>
          </li>
          <li className={styles.navbar_end_link}>
            <a href="#partner">大会合作伙伴</a>
          </li>
          <li className={styles.navbar_end_link}>
            <a href="#guide">参会须知</a>
          </li>
          <li className={styles.navbar_end_button}>
            {ButtonNode}
          </li>
        </Scrollspy>
      </Container>
    </nav>
  )

  return (
    <Layout headerRender={headerRender} className={styles.body}>
      <Seo
        title={seoTitle}
        description={seoDescription}
        keywords={seoKeywords}
      />

      <header className={styles.header} id={'about'}>
        {/*<div className={styles.header_background}>*/}
        {/*  <video src="https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/banner_background_abf25e9d3a.mp4" loop autoPlay muted />*/}
        {/*</div>*/}
        <div className={styles.header_content}>
          <div className={styles.header_primary}>
            创新涌动于先
          </div>
          <div className={styles.header_english}>
            <img src={always_ahead_image} alt="Always Ahead" />
          </div>
          <h1 className={styles.header_secondary}>
            PingCAP 用户峰会 2023
          </h1>
          <div className={styles.header_address}>
            <span>7 月 13 日</span>
            <img src={three_half_circle_image} alt=" · " style={{margin: '0 16px'}} />
            <span>北京</span>
          </div>
          {/*<div className={styles.header_address_extra}>*/}
          {/*  ( 线上线下同时开启 )*/}
          {/*</div>*/}
          <div className={styles.header_button}>
            {ButtonNode}
          </div>
          <div className={styles.header_summary}>
            PingCAP 中国用户峰会是一个汇聚前沿数据科技与商业洞见的年度盛会，旨在探讨前沿数据技术的发展趋势与行业应用成果，分享行业领袖和专家智囊的实战经验与思想碰撞，构建多元的解决方案与生态合作。
          </div>
        </div>
      </header>

      <div className={classNames(styles.background_1, styles.background_contain)} id={'schedule'} style={{paddingTop: 32}}>
        <BackgroundContainer>
          <SectionTitle>会议议程</SectionTitle>
          <div className={styles.schedule}>
            <Row justify={'center'} style={{width: '100%', margin: '0 auto'}}>
              <Col sm={12} md={10}>
                <div className={styles.schedule_title}>
                  <img src={title_morning_image} alt="7 月 13 日 | 上午" />
                </div>
                <table className={styles.schedule_table_desktop}>
                  <tbody>
                  {schedule.morning.map((value, index) => (
                    <tr key={value.title} style={{backgroundColor: index % 2 === 0 ? '#3A2DFF50': undefined}}>
                      {/*<td>{value.timeRange}</td>*/}
                      <td>{value.timeRange}</td>
                      <td>{value.title}</td>
                      <td style={{whiteSpace: 'nowrap'}}>{value.speakerName}</td>
                      <td>{value.speakerTitle}</td>
                    </tr>
                  ))}
                  </tbody>
                </table>
                <table className={styles.schedule_table_mobile}>
                  <tbody>
                  {schedule.morning.map((value, index) => (
                    <>
                      <tr key={value.title} style={{backgroundColor: index % 2 === 0 ? '#3A2DFF50': undefined}}>
                        {/*<td>{value.timeRange}</td>*/}
                      <td>{value.timeRange}</td>
                        <td colSpan={2}>{value.title}</td>
                      </tr>
                      <tr key={value.title} style={{backgroundColor: index % 2 === 0 ? '#3A2DFF50': undefined}}>
                        <td style={{whiteSpace: 'nowrap'}}>{value.speakerName}</td>
                        <td>{value.speakerTitle}</td>
                      </tr>
                    </>
                  ))}
                  </tbody>
                </table>
              </Col>
            </Row>
            <Row justify={'center'} style={{width: '100%', margin: '0 auto'}}>
              <Col sm={12} md={10}>
                <div className={styles.schedule_title}>
                  <img src={title_afternoon_image} alt="7 月 13 日 | 下午" />
                </div>
                <table className={styles.schedule_table_desktop}>
                  <tbody>
                  {schedule.afternoon.map((value, index) => (
                    <tr key={value.title} style={{backgroundColor: index % 2 === 0 ? '#3A2DFF50': undefined}}>
                      {/*<td>{value.timeRange}</td>*/}
                      <td>{value.timeRange}</td>
                      <td>{value.title}</td>
                      <td style={{whiteSpace: 'nowrap'}}>{value.speakerName}</td>
                      <td>{value.speakerTitle}</td>
                    </tr>
                  ))}
                  </tbody>
                </table>
                <table className={styles.schedule_table_mobile}>
                  <tbody>
                  {schedule.afternoon.map((value, index) => (
                    <>
                      <tr key={value.title} style={{backgroundColor: index % 2 === 0 ? '#3A2DFF50': undefined}}>
                        {/*<td>{value.timeRange}</td>*/}
                        <td>{value.timeRange}</td>
                        <td colSpan={2}>{value.title}</td>
                      </tr>
                      <tr key={value.title} style={{backgroundColor: index % 2 === 0 ? '#3A2DFF50': undefined}}>
                        <td style={{whiteSpace: 'nowrap'}}>{value.speakerName}</td>
                        <td>{value.speakerTitle}</td>
                      </tr>
                    </>
                  ))}
                  </tbody>
                </table>
              </Col>
            </Row>
          </div>
        </BackgroundContainer>
      </div>

      <div className={classNames(styles.background_2, styles.background_contain)} id={'guest'} style={{paddingTop: 32}}>
        <BackgroundContainer>
          <SectionTitle>演讲嘉宾</SectionTitle>
          <Row gutter={[40, 40]} className={classNames(styles.guest_list)}>
            {guests.map((value) => (
              <Col key={value.name} xs={12} sm={6} md={4} lg={3}>
                <div className={styles.guest_list_item}>
                  <div className={styles.guest_list_item_avatar}><img src={value.avatarUrl} alt={value.name} /></div>
                  <div className={styles.guest_list_item_name}>{value.name}</div>
                  <div className={styles.guest_list_item_title}>{value.title}</div>
                </div>
              </Col>
            ))}
          </Row>
        </BackgroundContainer>
      </div>

      <div id={'partner'} style={{paddingTop: 32}}>
        <BackgroundContainer>
          <SectionTitle>大会合作伙伴</SectionTitle>
          <Row gutter={[64, 64]} align={'center'} justify={'center'}>
            {(partner['赞助'] ?? []).map((value: any) => (
              <Col xs={12} sm={6} md={4} lg={2} xl={2}>
                <OutLink href={value.url}>
                  <Popup
                    //visible={true}
                    //overlayStyle={{borderColor: '#051853'}}
                    showArrow={false}
                    overlayInnerStyle={{backgroundColor: '#051853', boxShadow: 'none', color: '#FFF', maxWidth: 540}}
                    placement="bottom"
                    content={(
                      <>
                        {value.description}
                        <p>
                          <OutLink href={value.url} style={{color: '#FFF'}}>{value.url}</OutLink>
                        </p>
                      </>
                    )}
                  >
                    <img src={value.image} alt={value.name} />
                  </Popup>
                </OutLink>
              </Col>
            ))}
          </Row>
        </BackgroundContainer>
      </div>

      {/*<div className={styles.background_3}>*/}
        {/*<BackgroundContainer className={styles.sponsors} id={'sponsors'}>*/}
        {/*  <SectionTitle>赞助合作</SectionTitle>*/}
        {/*  <div className={styles.sponsors_content}>*/}
        {/*    <p>作为年度用户大会，PingCAP 用户峰会的目标受众是企业技术决策人、生态合作伙伴；*/}
        {/*      <br/>*/}
        {/*      PingCAP DevCon 已连续举办 <strong style={{color: '#E55027', fontWeight: 'bold', fontSize: 28}}>6</strong> 年，是观测开源产业、数据库前瞻趋势的风向标，覆盖受众 <strong style={{color: '#E55027', fontWeight: 'bold', fontSize: 28}}>8000+</strong>。*/}
        {/*      <br/>*/}
        {/*      赞助 PingCAP 用户峰会，同步获得 Virtual DevCon 2023 赞助权益。</p>*/}
        {/*    <br />*/}
        {/*    <p style={{fontWeight: 700}}>与 <OutLink href={'mailto:sponsors@pingcap.com'}>sponsors@pingcap.com</OutLink> 联系，获取更多赞助权益详情。</p>*/}
        {/*  </div>*/}

        {/*  {Object.keys(sponsors).map((key) => (*/}
        {/*    <div className={styles.sponsors_section}>*/}
        {/*      <h3 className={styles.sponsors_section_title}>*/}
        {/*        {key}*/}
        {/*      </h3>*/}
        {/*      <div className={styles.sponsors_section_list}>*/}
        {/*        <Row gutter={[64, 64]} align={'center'} justify={'center'}>*/}
        {/*          {(sponsors[key] ?? []).map((value: any) => (*/}
        {/*            <Col xs={12} sm={6} md={4} lg={2} xl={2}>*/}
        {/*              <OutLink href={value.url}>*/}
        {/*                <Popup*/}
        {/*                  //visible={true}*/}
        {/*                  //overlayStyle={{borderColor: '#051853'}}*/}
        {/*                  showArrow={false}*/}
        {/*                  overlayInnerStyle={{backgroundColor: '#051853', boxShadow: 'none', color: '#FFF', maxWidth: 540}}*/}
        {/*                  placement="bottom"*/}
        {/*                  content={(*/}
        {/*                    <>*/}
        {/*                      {value.description}*/}
        {/*                      <p>*/}
        {/*                        <OutLink href={value.url} style={{color: '#FFF'}}>{value.url}</OutLink>*/}
        {/*                      </p>*/}
        {/*                    </>*/}
        {/*                  )}*/}
        {/*                >*/}
        {/*                  <img src={value.image} alt={value.name} />*/}
        {/*                </Popup>*/}
        {/*              </OutLink>*/}
        {/*            </Col>*/}
        {/*          ))}*/}
        {/*        </Row>*/}
        {/*      </div>*/}
        {/*    </div>*/}
        {/*  ))}*/}
        {/*</BackgroundContainer>*/}
      {/*</div>*/}

      <div className={classNames(styles.background_3, styles.background_contain)} id={'guide'} style={{paddingTop: 32}}>
        <BackgroundContainer className={styles.guide}>
          <SectionTitle>参会须知</SectionTitle>
          <div className={styles.guide_map}>
            <img src={picture_image} alt="" />
            {/*<a href={mapUrl} target="_blank">*/}
              <img src={map_image} alt="" />
            {/*</a>*/}
          </div>
          <div className={styles.guide_address}>会议酒店： 北京西南华邑酒店 地址： 北京市海淀区太平路甲 18 号</div>
          <div className={styles.guide_list}>
            <Row gutter={64}>
              <Col sm={12} md={6}>
                <div className={styles.guide_list_item}>
                  <div className={styles.guide_list_item_title}>
                    <img src={driveSvg} alt="" />
                    <span>自驾路线</span>
                  </div>
                  <div className={styles.guide_list_item_content}>
                    导航输入“北京西南华邑酒店”
                  </div>
                </div>
                <div className={styles.guide_list_item}>
                  <div className={styles.guide_list_item_title}>
                    <img src={airplaneSvg} alt="" />
                    <span>首都机场到达</span>
                  </div>
                  <div className={styles.guide_list_item_content}>
                    <span>·地铁</span>：从 2 号 / 3 号航站楼站乘坐首都机场线（北新桥方向），到东直门站换乘 2 号线 （东四十条方向），
                    到建国门站换乘 1 号线（古城方向），到五棵松站下车， D2 西南口出，可选择骑行 10 分钟或步行 17 分钟
                    抵达会场。约 1 小时 26 分钟。
                    <br/>
                    <span>·打车</span>： 1 小时 5 分钟车程，约 45 公里，费用约 100 元。
                  </div>
                </div>
                <div className={styles.guide_list_item}>
                  <div className={styles.guide_list_item_title}>
                    <img src={airplaneSvg} alt="" />
                    <span>大兴机场到达</span>
                  </div>
                  <div className={styles.guide_list_item_content}>
                    <span>·地铁</span>：从大兴机场站（始发站）乘坐大兴机场线（草桥方向），到草桥站换成 10 号线（纪家庙方向），
                    莲花桥站下车， C 口出，步行 18 米至莲花桥公交站，乘坐 890 路或 890 路担礼（下苇甸方向），
                    南沙窝桥站下车，步行 185 米可抵达会场。约 1 小时 24 分钟。
                    <br/>
                    <span>·打车</span>： 50 分钟车程，约 55 公里，费用约 120 元。
                  </div>
                </div>
              </Col>
              <Col sm={12} md={6}>
                <div className={styles.guide_list_item}>
                  <div className={styles.guide_list_item_title}>
                    <img src={busSvg} alt="" />
                    <span>北京南站</span>
                  </div>
                  <div className={styles.guide_list_item_content}>
                    <span>·地铁</span>：从北京南站乘坐 4 号线（安河桥北方向），到西单站换成 1 号线八通线（古城方向），在
                    五棵松站下车（ C2 东南口出），步行 1.1 公里，抵达会场。 约 45 分钟。
                    <br/>
                    <span>·打车</span>： 35 分钟车程，约 15 公里，费用约 45 元。
                  </div>
                </div>
                <div className={styles.guide_list_item}>
                  <div className={styles.guide_list_item_title}>
                    <img src={busSvg} alt="" />
                    <span>北京西站</span>
                  </div>
                  <div className={styles.guide_list_item_content}>
                    <span>·地铁</span>：从北京西站乘坐 9 号线（国家图书馆方向），到军事博物馆站换成 1 号线八通线（古城方向），
                    在五棵松站下车（ C2 东南口出），步行 1.1 公里，抵达会场。约 33 分钟。
                    <br/>
                    <span>·打车</span>： 11 分钟车程，约 4.6 公里，费用约 25 元。
                  </div>
                </div>
                <div className={styles.guide_list_item}>
                  <div className={styles.guide_list_item_title}>
                    <img src={busSvg} alt="" />
                    <span>北京站</span>
                  </div>
                  <div className={styles.guide_list_item_content}>
                    <span>·地铁</span>：从北京站乘坐 2 号线（建国门方向），到建国门站换成 1 号线八通线（古城方向），在五棵松站
                    下车（ C2 东南口出），步行 1.1 公里，抵达会场。 约 43 分钟。
                    <br/>
                    <span>·打车</span>： 40 分钟车程，约 23 公里，费用约 50 元。
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </BackgroundContainer>

        <BackgroundContainer className={styles.cta}>
          {ButtonNode}
        </BackgroundContainer>
      </div>

      <div className={classNames(styles.background_4, styles.background_contain)}>
        <BackgroundContainer className={styles.more}>
          <SectionTitle>往期回顾</SectionTitle>
          <ul className={styles.more_list}>
            <li className={styles.more_list_item}>
              <div className={styles.more_list_item_img}>
                <OutLink href={'/events/pingcap-user-summit-2022'}>
                  <img
                    src={pingcap_user_summit_image}
                    alt="pingcap_user_summit"
                  />
                </OutLink>
              </div>
              <div className={styles.more_list_item_text}>
                PingCAP 用户峰会 2022
              </div>
            </li>
            <li className={styles.more_list_item}>
              <div className={styles.more_list_item_img}>
                <OutLink href={'/events/devcon2021'}>
                  <img
                    src={pingcap_devcon_2021_image}
                    alt="pingcap_devcon_2021"
                  />
                </OutLink>
              </div>
              <div className={styles.more_list_item_text}>
                PingCAP DevCon 2021
              </div>
            </li>
          </ul>
        </BackgroundContainer>
      </div>

    </Layout>
  )
}