import * as React from "react"
import {useState} from "react"
import classNames from "classnames"
import {Link} from "gatsby"
import {useScroll} from "ahooks"
import Scrollspy from 'react-scrollspy'
import { Col, Row, Popup } 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 scheduleTitleImage from './schedule_title_background.png'
import guestTitleImage from './guest_title_background.png'
import guestCardBackgroundImage from './guest_card_background.png'
import avatar刘奇Image from './avatars/01_嘉宾头像_刘奇.png'
import avatar唐刘Image from './avatars/02_嘉宾头像_唐刘.png'
import avatar李冬Image from './avatars/03_嘉宾头像_李冬.png'
import avatar陈煜琦Image from './avatars/04_嘉宾头像_陈煜琦.png'
import avatar何阳Image from './avatars/05_嘉宾头像_何阳.png'
import avatar聂丽琴Image from './avatars/北京金融产业联盟-聂丽琴.png'
import avatar李超群Image from './avatars/06_嘉宾头像_李超群.png'
import avatar刘传博Image from './avatars/嘉宾头像_刘传博.png'
import avatar刘洋Image from './avatars/07_嘉宾头像_刘洋.png'
import avatar张政俊Image from './avatars/08_嘉宾头像_张政俊.png'
import avatar李盛Image from './avatars/09_嘉宾头像_李盛.png'
import avatar程鹏辉Image from './avatars/10_嘉宾头像_程鹏辉.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 hotelImageUrl from './hotel.jpg'

import 神州数码Image from './sponsors/神州数码.png'
import 云启资本Image from './sponsors/云启资本.png'
import 初心资本Image from './sponsors/初心资本.png'
import 爱可生Image from './sponsors/爱可生.png'
import bytebaseImage from './sponsors/bytebase.png'
import databendImage from './sponsors/databend.png'
import 华创资本Image from './sponsors/华创资本.png'
import { PlayCircleFilled } from "@ant-design/icons"

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

const seoTitle = "PingCAP 用户峰会"
const seoDescription = "PingCAP 用户峰会是汇聚前沿数据科技与商业洞见的年度用户大会，线上线下同时开启，立即报名！"
const seoKeywords = "PingCAP,用户峰会,中国企业出海".split(",")

const ctaUrl = 'https://app.ma.scrmtech.com/meetings/MeetingPc/Detail?pf_uid=19697_1864&sid=66318&source=2&pf_type=3&id=66318'

const schedule = {
  speech: [
    {timeRange: '9:30-9:35', title: '开场致辞', speakerTitle: '中国工程院院士', speakerName: '倪光南', replayUrl: 'https://www.bilibili.com/video/BV17P411g744/'},
    {timeRange: '9:35-10:55', title: '现在决定未来', speakerTitle: 'PingCAP | 创始人兼 CEO', speakerName: '刘  奇', replayUrl: 'https://www.bilibili.com/video/BV1VW4y1x7Q2/'},
    {timeRange: '10:55-11:25', title: 'PingCAP 技术如何服务企业级用户', speakerTitle: 'PingCAP | 研发副总裁', speakerName: '唐  刘', replayUrl: 'https://www.bilibili.com/video/BV12841187xQ/'},
    {timeRange: '11:25-11:40', title: '中国数据库产业发展研究', speakerTitle: '中国赛宝实验室 ', speakerName: '李  冬（博士）'},
    {timeRange: '11:40-12:30', title: '深耕行业场景 构建多元生态', speakerTitle: 'PingCAP | 副总裁 ', speakerName: '陈煜琦', replayUrl: 'https://www.bilibili.com/video/BV1zG411F7FW/'},
  ],
  subConference: [
    {timeRange: '14:00-14:15', title: '金融行业技术创新路径分析', speakerName: '何阳', speakerTitle: '信通院 | 金融科技研究中心主任'},
    {timeRange: '14:15-14:30', title: <><p>搭建金融科技产业创新工作平台</p><p>推动金融科技产业良性可持续发展</p></>, speakerName: '聂丽琴', speakerTitle: '北京金融科技产业联盟 | 副秘书长'},
    {timeRange: '14:30-14:55', title: '数字化创新与TiDB 解决方案', speakerName: '李超群', speakerTitle: 'PingCAP | 中国区技术服务总经理', replayUrl: 'https://www.bilibili.com/video/BV1vv4y1m7iL/'},
    {timeRange: '14:55-15:15', title: '中体骏彩分布式数据库之实践', speakerName: '刘传博', speakerTitle: '中体骏彩 | 技术总监', replayUrl: 'https://www.bilibili.com/video/BV1784y1174t/'},
    {timeRange: '15:15-15:35', title: '中欧财富分布式数据库实践之路', speakerName: '张政俊', speakerTitle: '中欧财富 | IT 数据库主管'},
    {timeRange: '15:35-15:50', title: '茶歇', speakerName: '', speakerTitle: ''},
    {timeRange: '15:50-16:10', title: '神州数码与 TiDB 的合作之旅', speakerName: '李盛', speakerTitle: '神州数码 | 数字技术研究院总经理', replayUrl: 'https://www.bilibili.com/video/BV1mt4y1N7tK/'},
    {timeRange: '16:10-16:30', title: '金融风控 AI SaaS 创新及 TiDB 使用 ', speakerName: '程鹏辉', speakerTitle: '百融云创 | 产品研发高级总监', replayUrl: 'https://www.bilibili.com/video/BV1Ad4y187rt/'},
    {timeRange: '16:30-16:50', title: 'TiDB 助力新医疗保障平台落地与业务创新', speakerName: '郭晓龙', speakerTitle: '东软 | 医疗保障事业部开发中心主任', replayUrl: 'https://www.bilibili.com/video/BV1KD4y1s7oB/'},
    {timeRange: '16:50-17:10', title: '疾病防控与健康大数据应用场景分级实践与展望', speakerName: '王明耀', speakerTitle: '中科软 | 公共健康事业部副总经理', replayUrl: 'https://www.bilibili.com/video/BV1uG411c7ye/'},
    {timeRange: '17:10-17:30', title: '北京银行分布式数据库最佳实践 ', speakerName: '刘洋', speakerTitle: '北京银行 | 运维副总', replayUrl: 'https://www.bilibili.com/video/BV1rM411k7gL/'},
    {timeRange: '17:30-19:00', title: '展区酒会', speakerName: '', speakerTitle: ''},
  ],
}

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: '传音移动互联 | CTO', avatarUrl: avatar史团委Image},
  {name: '柳锴', title: '老虎国际 | 技术 VP', avatarUrl: avatar柳锴Image},
  {name: '唐刘', title: 'PingCAP | 研发副总裁', avatarUrl: avatar唐刘Image},
  {name: '李冬', title: '中国赛宝实验室', avatarUrl: avatar李冬Image},
  {name: '陈煜琦', title: 'PingCAP | 副总裁', 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 | 中国区技术服务总经理', avatarUrl: avatar李超群Image},
  {name: '刘传博', title: '中体骏彩 | 技术总监', avatarUrl: avatar刘传博Image},
  {name: '张政俊', title: '中欧财富 | IT 数据库主管', 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},
]

const sponsors: {[key: string]: {name: string, url: string, image: string, description: React.ReactNode}[]} = {
  钻石赞助: [
    {name: '神州数码', url: 'https://www.digitalchina.com', image: 神州数码Image, description: (
      <>
        <p>神州数码集团股份有限公司（简称：神州数码；股票代码：000034.SZ）。从 2000 年成立伊始，神州数码以“数字中国”为使命，锐意变革，砥砺前行，始终坚持以全球领先科技和自主创新核心技术赋能产业数字化转型和数字经济发展。2021 年，神州数码全年营业收入实现 1224 亿元，位列《财富》中国 500 强榜单第 114 位，《福布斯》2022 中国数字经济 100 强第 29 位。</p>
        <p>作为领先的云及数字化服务商之一，神州数码围绕企业数字化转型的关键要素，开创性的提出“数云融合”战略和技术体系框架，着力在云原生、数字原生、数云融合关键技术和产业上架构产品和服务能力，为处在不同数字化转型阶段的快消零售、汽车、金融、医疗、政企、教育、运营商等行业客户提供泛在的敏捷 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={'#schedule'}>观看回放</a>

export default function (props: IProps) {
  //const { location } = props
  const [tab, setTab] = useState<'会场分布'|'交通路线'|'住宿推荐'|'防疫措施'>('交通路线')
  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', 'sponsors', '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="#sponsors">赞助合作</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_primaryEnglish}>
            THE FUTURE IS NOW
          </div>
          <div className={styles.header_primary}>
            现在决定未来
          </div>
          <h1 className={styles.header_secondary}>
            PingCAP 用户峰会
          </h1>
          <div className={styles.header_address}>
            2022.09.22 北京 · 富力万丽酒店
          </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)}>
        <BackgroundContainer className={styles.schedule} id={'schedule'}>
          <Row justify={'center'} align={'center'} style={{width: '100%'}}>
            <Col lg={12} xl={10}>
              <div className={styles.schedule_title}>
                <img src={scheduleTitleImage} alt="会议议程" />
                <h2>会议议程</h2>
              </div>
              <h3 className={styles.schedule_section_title}>9 月 22 日 | 上午</h3>
              <div className={styles.schedule_section_title_line} />
              <ul className={styles.schedule_section_list}>
                {schedule.speech.map((value) => (
                  <li key={value.title} className={styles.schedule_section_list_item}>
                    <div className={styles.schedule_section_list_item_start}>
                      <div className={styles.schedule_section_list_item_start_timeRange}>{value.timeRange}</div>
                      <div className={styles.schedule_section_list_item_start_title}>
                        <div className={styles.schedule_section_list_item_start_title_text}>
                          {value.title}
                        </div>
                        {value.replayUrl && (
                          <div className={styles.schedule_section_list_item_start_title_replay}>
                            <OutLink href={value.replayUrl} style={{fontSize: 20}}>
                              <PlayCircleFilled />
                            </OutLink>
                          </div>
                        )}
                      </div>
                    </div>
                    <div className={styles.schedule_section_list_item_end}>
                      <div className={styles.schedule_section_list_item_end_speakerName}>{value.speakerName}</div>
                      <div className={styles.schedule_section_list_item_end_speakerTitle}>{value.speakerTitle}</div>
                    </div>
                  </li>
                ))}
              </ul>
              <h3 className={styles.schedule_section_title}>9 月 22 日 | 下午</h3>
              <div className={styles.schedule_section_title_line} />
              <ul className={styles.schedule_section_list}>
                {schedule.subConference.map((value) => (
                  <li key={value.speakerName} className={styles.schedule_section_list_item}>
                    <div className={styles.schedule_section_list_item_start}>
                      <div className={styles.schedule_section_list_item_start_timeRange}>{value.timeRange}</div>
                      <div className={styles.schedule_section_list_item_start_title}>
                        <div className={styles.schedule_section_list_item_start_title_text}>
                          {value.title}
                        </div>
                        {value.replayUrl && (
                          <div className={styles.schedule_section_list_item_start_title_replay}>
                            <OutLink href={value.replayUrl} style={{fontSize: 20}}>
                              <PlayCircleFilled />
                            </OutLink>
                          </div>
                        )}
                      </div>
                    </div>
                    <div className={styles.schedule_section_list_item_end}>
                      <div className={styles.schedule_section_list_item_end_speakerName}>{value.speakerName}</div>
                      <div className={styles.schedule_section_list_item_end_speakerTitle}>{value.speakerTitle}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </Col>
          </Row>
        </BackgroundContainer>
      </div>

      <BackgroundContainer className={styles.guest} id={'guest'}>
        <div className={styles.guest_title}>
          <img src={guestTitleImage} alt="演讲嘉宾" />
          <h2>演讲嘉宾</h2>
        </div>
        <div className={classNames(styles.guest_list, "columns", "is-multiline")}>
          {guests.map((value) => (
            <div key={value.name} className={classNames("column", 'is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd')}>
              <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>
            </div>
          ))}
        </div>
      </BackgroundContainer>

      <div className={classNames(styles.background_2, {[styles.background_contain]: tab === '防疫措施'})}>
        <BackgroundContainer className={styles.sponsors} id={'sponsors'}>
          <div className={styles.sponsors_title}>
            <img src={scheduleTitleImage} alt="赞助合作" />
            <h2>赞助合作</h2>
          </div>

          <div className={styles.sponsors_content}>
            <p>作为年度用户大会，PingCAP 用户峰会的目标受众是企业技术决策人、生态合作伙伴；PingCAP DevCon 已连续举办 5 年，是观测开源产业、数据库前瞻趋势的风向标，覆盖受众 8000+。 赞助 PingCAP 用户峰会，同步获得 Virtual DevCon 2022 赞助权益。</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>

        <BackgroundContainer className={styles.guide} id={'guide'}>
          <div className={styles.guide_title}>
            <img src={guestCardBackgroundImage} alt="参会须知" />
            <h2>参会须知</h2>
          </div>
          <ul className={styles.guide_tab}>
            {/*<li className={classNames(styles.guide_tab_item, {[styles.guide_tab_item_selected]: tab === '会场分布'})} onClick={() => setTab('会场分布')}>会场分布</li>*/}
            <li className={classNames(styles.guide_tab_item, {[styles.guide_tab_item_selected]: tab === '交通路线'})} onClick={() => setTab('交通路线')}>交通路线</li>
            {/*<li className={classNames(styles.guide_tab_item, {[styles.guide_tab_item_selected]: tab === '住宿推荐'})} onClick={() => setTab('住宿推荐')}>住宿推荐</li>*/}
            <li className={classNames(styles.guide_tab_item, {[styles.guide_tab_item_selected]: tab === '防疫措施'})} onClick={() => setTab('防疫措施')}>防疫措施</li>
          </ul>
          <div className={styles.guide_content}>
            {tab === '会场分布' && (
              <div>tab === '会场分布'</div>
            )}
            {tab === '交通路线' && (
              <div>
                <p className={styles.guide_content_image}><img src={hotelImageUrl} alt="北京富力万丽酒店"/></p>
                <p>会议酒店：北京富力万丽酒店</p>
                <p>地址：北京市朝阳区东三环中路 61 号</p>
                <br/>
                <h3>一、自驾路线：</h3>
                <p>导航屏会显示“北京富力万丽酒店”。</p>
                <br/>
                <h3>二、首都机场到达：</h3>
                <p>
                  地铁：从 2 号 / 3 号航站楼站乘坐首都机场线（三元桥方向），到三元桥站换乘 10 号线 （亮马桥方向），在双井站下车（A 西北口出）步行 634 米，抵达会场。约 1 小时 10 分钟。
                  <br/>
                  打车：50 分钟车程，约 30 公里，费用约 90 元。
                </p>
                <br/>
                <h3>三、大兴机场到达：</h3>
                <p>
                  地铁：从大兴机场站（始发站）乘坐大兴机场线（草桥方向），到草桥站换乘 10 号线（角门西方向），在双井站下车（A 西北口出），步行 634 米，抵达会场。约 1 小时 10 分钟。
                  <br/>
                  打车：1 小时车程，约 55 公里，费用约 160 元。
                </p>
                <br/>
                <h3>四、北京南站：</h3>
                <p>
                  地铁：从北京南站乘坐 14 号线（善各庄方向），到十里河站换乘 10 号线（潘家园方向），在双井站下车（A 西北口出），步行 634 米，抵达会场。约 40 分钟。
                  <br/>
                  打车：30 分钟车程，约 12 公里，费用约 40 元。
                </p>
                <br/>
                <h3>五、北京西站：</h3>
                <p>
                  地铁：从北京西站乘坐 7 号线（环球度假区方向），在双井站下车（A 西北口出），步行 634 米，抵达会场。约 40 分钟。
                  <br/>
                  打车：40 分钟车程，约 20 公里，费用约 45 元。
                </p>
                <br/>
                <h3>六、北京站：</h3>
                <p>
                  地铁：从北京站乘坐 2 号线（建国门方向），到建国门站换乘 1 号线八通线（环球度假区方向），到国贸站换乘 10 号线（双井方向），在双井站下车（A 西北口出），步行 634 米，抵达会场。约 30 分钟。
                  <br/>
                  打车：15 分钟车程，约 6 公里，费用约 20 元。
                </p>
              </div>
            )}
            {tab === '住宿推荐' && (
              <div>tab === '住宿推荐'</div>
            )}
            {tab === '防疫措施' && (
              <div>
                <ul>
                  <li>所有进场人员必须佩戴口罩，出示【北京健康宝】且数据显示无异常</li>
                  <li>持有 48 小时内核酸检测阴性证明，并通过现场测温</li>
                  <li>大会期间，如出现发热、干咳等不适情况，请及时向会场的医疗保障人员报告</li>
                </ul>
                <p>注：现场相关防疫措施将根据北京市防疫政策动态调整</p>
              </div>
            )}
          </div>
        </BackgroundContainer>
      </div>

      <div className={styles.background_1}>

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

        <BackgroundContainer className={styles.more}>
          <h2 className={styles.more_title}>更多 PingCAP 活动季系列</h2>
          <ul className={styles.more_list}>
            <li className={styles.more_list_item}>
              <div className={styles.more_list_item_img}>
                <OutLink href={'https://tidb.net/events/hackathon2022'}>
                  <img
                    src="https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_hackathon_2022_cover_6cb2fbd792.jpg"
                    alt="TiDB Hackathon"
                  />
                </OutLink>
              </div>
              <div className={styles.more_list_item_text}>
                2022.09 盛大启动
              </div>
            </li>
            <li className={styles.more_list_item}>
              <div className={styles.more_list_item_img}>
                <OutLink href={'/events/devcon2022'}>
                  <img
                    src="https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/Dev_Con2022_754a0df980.png"
                    alt="Virtual DevCon 2022"
                  />
                </OutLink>
              </div>
              <div className={styles.more_list_item_text}>
                2022.12.1-3
              </div>
            </li>
          </ul>
        </BackgroundContainer>

      </div>

    </Layout>
  )
}