import React from "react"
import Seo from "@/components/seo"
import { BannerResponsible, Icon, SolutionList } from "@/components"
import Markdown from "@/components/markdown"
import Layout from "@/components/layout"
import * as styles from "./index.module.scss"
import CardWithTextMask from "@/components/CardWithTextMask"
import BackgroundContainer from "@/components/BackgroundContainer"
import TalkSection from "@/components/talk-section"
import { graphql } from "gatsby"
import ContactUs from "@/components/solution/contact-us"
import LinkModule from "@/components/link-module"
import OutLink from "@/components/OutLink"
import avatarMale from "./avatar-male.svg"
import avatarFemale from "./avatar-female.svg"
import classnames from "classnames";
import useContactForm from "@/hooks/useContactForm";

interface IProps {
  data: {
    allStrapiSolutions: {
      nodes: RelatedCard[]
    }
  }
  location: ILocation
}

const seoTitle = "新经济 DTC 转型背后的数据库"
const seoDescription =
  "新经济企业纷纷引入 DTC（Direct to Customer，即“直接面向消费者”）战略，建设和运营线上线下一体化的服务平台，保持了业务经营强健的稳定性。本专题将带您探索这些企业 DTC 转型背后的数据库"
const seoKeywords = "新经济,业财一体化,数据服务化,TiDB，实时数据服务平台".split(",")
const bannerImage =
  "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/pc_8e94a58afe.svg"
const imageMobile =
  "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/mobile_33aa7ca44e.svg"

const whiteBookDownloadUrl = `https://app.ma.scrmtech.com/resources/ResourcePc/ResourcePcInfo?pf_uid=19697_1864&id=30372&source=1&pf_type=3&channel_id=9034&channel_name=%E7%BD%91%E7%AB%99-PingCAP&tag_id=3139bdcef9046473`

export default function({ location, ...props }: IProps) {
  const {
    data: { allStrapiSolutions },
  } = props
  allStrapiSolutions.nodes[0].image = {media:{url: "https://img1.www.pingcap.com/prod/Ti_DB_T_0_a4eea3eaf5.svg"}}
  allStrapiSolutions.nodes[3].image = {media:{url: "https://img1.www.pingcap.com/prod/Ti_DB_ECIF_2a79658592.svg"}}

  const { dom: ContactFormDOM, handleOpen } = useContactForm(location)

  return (
    <>
      <Layout>
        <Seo
          title={seoTitle}
          description={seoDescription}
          keywords={seoKeywords}
        />
        <BannerResponsible image={bannerImage} imageMobile={imageMobile} onClick={handleOpen} />
        <Summary />
        <Trend />
        <Opinion handleOpen={handleOpen} />
        {/*<Conference />*/}
        <Cases handleOpen={handleOpen} />
        <Download />
        {/*<CaseList*/}
        {/*  title="延展案例"*/}
        {/*  data={customerCases}*/}
        {/*  className={styles.caseList}*/}
        {/*/>*/}
        <SolutionList title="相关解决方案" data={allStrapiSolutions.nodes} />
        <ContactUs location={location} />
      </Layout>
      {ContactFormDOM}
    </>
  )
}

const Summary: React.FC = () => {
  const summary = `新冠疫情让许多行业充满了不确定性，新经济企业纷纷引入 DTC（Direct to Customer，即“直接面向消费者”）战略，建设和运营线上线下一体化的服务平台（如自营电商、微信小程序、超级 APP 等），在疫情期间保持了业务经营强健的稳定性。

产品迭代不断提速，营销手段推陈出新……这一系列变化都对新经济企业的数据服务平台提出了更严苛的要求：既要支撑海量的消费者，实现快速的前端应用迭代，又要提升营销侧的转化率，以全链条的数据驱动企业经营的实时决策。
`
  return (
    <BackgroundContainer className={styles.summary}>
      <Markdown body={summary} needAnchor={false} />
    </BackgroundContainer>
  )
}

const Trend = () => {
  const trends = [
    {
      title: "消费者在线",
      description: "更多的消费者转移到线上，企业与消费者在获取资讯、购物路径方面的数字触点也在极速地增加，这些数据的获取和连接能力成为关注的焦点。",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/events_dtc_trend_1_cfa22b1418.jpg"
    },
    {
      title: "业务在线",
      description: "业务在线使得新一代应用都成为了数据密集型应用，企业的业务已经进入了一个以秒为单位的实时体验时代：实时分析、实时反馈和秒级响应。",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/events_dtc_trend_2_1b2515e753.jpg"
    },
    {
      title: "数据在线",
      description: "数据服务平台作为企业的经营大脑，需要整合实时、多源的数据，进行永远在线的实时数据分析，进而实现瞬时的行动和无处不在的运营。",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/events_dtc_trend_3_31a919fbeb.jpg"
    }
  ]
  return (
    <BackgroundContainer className={styles.trend}>
      <h2 className={styles.trend_title}>DTC 三大发展趋势</h2>
      <div className={styles.trend_list}>
        {trends.map(value => (
          <div className={styles.trend_list_item} key={value.title}>
            <CardWithTextMask {...value} />
          </div>
        ))}
      </div>
    </BackgroundContainer>
  )
}

const Opinion = ({handleOpen}) => {
  const opinions = [
    {
      avatarUrl: avatarMale,
      title: "快餐企业数据库运维经理",
      body: "线上业务和 APP 用户增长太快，现有数据库扛不住。",
    },
    {
      avatarUrl: avatarFemale,
      title: "零售企业技术总监",
      body: "数据平台时效性差，销售业绩第二天才能得到汇总结果。",
    },
    {
      avatarUrl: avatarMale,
      title: "地产企业技术架构师",
      body: "公有云故障造成在线业务中断，应该怎么避免？",
    },
    {
      avatarUrl: avatarFemale,
      title: "电商平台大数据工程师",
      body: "好不容易做了一个促销活动，被薅了羊毛怎么办？",
    },
  ]
  const description = "本白皮书一次讲透新经济五大场景下的数据挑战和数据架构设计，解析新餐饮、新零售、商业地产、高科技制造、旅游酒店等头部企业的最佳实践。"
  return (
    <BackgroundContainer hasBackgroundColor className={styles.opinion}>
      <OutLink href={whiteBookDownloadUrl}>
        <h2 className={styles.opinion_title}>
          新经济 DTC 用户场景白皮书
        </h2>
      </OutLink>
      <div className={`${styles.opinion_list} columns`}>
        {opinions.map(value => (
          <div className={`${styles.opinion_list_item} column`} key={value.title}>
            <div className={styles.opinion_list_item_quote}>
              “
            </div>
            <div className={styles.opinion_list_item_avatar}>
              <img src={value.avatarUrl} alt={value.title} />
            </div>
            <div className={styles.opinion_list_item_title}>
              {value.title}
            </div>
            <div className={styles.opinion_list_item_body}>
              {value.body}
            </div>
          </div>
        ))}
      </div>
      <div className={styles.opinion_description}>
        {description}
      </div>
      <div className={styles.opinion_action}>
        <div className={styles.opinion_action_button}>
          <OutLink className={classnames("button", styles.opinion_action_button_green)} href={whiteBookDownloadUrl}>
            下载白皮书
          </OutLink>
        </div>
        <div className={styles.opinion_action_button}>
          <OutLink className={classnames("button", styles.opinion_action_button_blue)} onClick={handleOpen}>
            企业版免费试⽤
          </OutLink>
        </div>
        <div className={styles.opinion_action_button}>
          <OutLink className={classnames("button", styles.opinion_action_button_blue)} href={"https://tidbcloud.com/signup"}>
            TiDB Cloud
          </OutLink>
          <p>
            适用于中国出海企业和开发者
            {/*<br />*/}
            {/*注册 Developer Tier，即可享受一年免费试用 TiDB Cloud*/}
          </p>
        </div>
      </div>
    </BackgroundContainer>
  )
}

const Conference = () => {
  const schedule = [
    {
      time: "14:00-14:20",
      title: "DTC 趋势下新经济企业的转型之道",
      speaker: "PingCAP 副总裁，刘松",
    },
    {
      time: "14:20-14:40",
      title: "理想汽车",
      speaker: "",
    },
    {
      time: "14:40-15:00",
      title: "业财一体化场景下的数据架构选型",
      speaker: "多点Dmall  数据库团队负责人，冯光普",
    },
    {
      time: "15:00-15:20",
      title: "携程 or 龙湖",
      speaker: "",
    },
    {
      time: "15:20-15:50",
      title: "TiDB 面向海量消费者场景解决方案",
      speaker: "PingCAP 解决方案架构师，李振环",
    },
    {
      time: "15:50-16:00",
      title: "Q&A",
      speaker: "",
    },
  ]
  return (
    <BackgroundContainer className={styles.conference}>
      <h2 className={styles.conference_title}>
        线上研讨会
      </h2>
      <div className={styles.conference_description}>
        面向 DTC 的数据服务架构设计与应用实践
      </div>
      <div className={styles.conference_datetime}>
        2022 年 3 月 29 日 14:00-16:00
      </div>
      <div className={styles.conference_table}>
        <table className="table">
          <thead>
            <tr>
              <th>时间</th>
              <th>议题</th>
              <th>演讲嘉宾</th>
            </tr>
          </thead>
          <tbody>
            {schedule.map(value => (
              <tr key={value.title}>
                <td>{value.time}</td>
                <td>{value.title}</td>
                <td>{value.speaker}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className={styles.conference_action}>
        {/*TODO: need to replace apply link url*/}
        <OutLink className={classnames("button", "is-primary", styles.opinion_action_button)} href={"https://page.ma.scrmtech.com/landing-page/index?id=4397&pf_uid=19697_1864"}>
          立即报名
        </OutLink>
      </div>
    </BackgroundContainer>
  )
}

const Cases = ({handleOpen}) => {
  const cases = [
    {
      title: "TiDB 数据库成就快餐巨头 DTC 转型",
      content: `在忙碌的工作中，一顿口味不错、能量满满、质量可靠且快速方便的汉堡、薯条、炸鸡的确是不错的选择。快餐企业在运营成百上千家门店的同时是如何做到线上买券、线下提货，在家下单、快递上门、手机下单、门店取货等一系列高级别数字化操作的……

[查看完整内容>>](/blog/tidb-enables-fast-food-giant-dtc-transform?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtc)
`,
      media: { url: "" },
      mediaCover: {
        url: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/events_dtc_case_1_c2acb225f5.png",
        width: 600,
        height: 360
      },
      titleLink: "/blog/tidb-enables-fast-food-giant-dtc-transform?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtc"
    },
    {
      title: "您有多点会员吗——数据库渐进式创新助力多点稳步推进经营大脑实践",
      content: `多点是面向新零售的数字解决方案提供商，旗下拳头产品 Dmall OS 是物美、麦德龙等超市顾客每天都会用到的系统，也是 CFO 和 CEO 每天都会关注的系统，在底层帮助 Dmall OS 实现“业财一体化”关键转型的赋能工具正是 TiDB……

[查看完整内容>>](/blog/do-you-have-a-dmall-membership?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtc)
`,
      media: { url: "" },
      mediaCover: {
        url: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/events_dtc_case_2_8f16b66234.png",
        width: 600,
        height: 360
      },
      titleLink: "/blog/do-you-have-a-dmall-membership?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtc"
    },
    {
      title: "新经济 DTC 转型，一个靠谱的数据平台至关重要",
      content: `新经济 DTC 转型过程中，大多数企业无法参考大型互联网公司的复杂架构，也没有规模化的技术和运维团队来支撑业务变化，采用一个简单、强大、一栈式的数据服务平台应对 DTC 的挑战是越来越多新经济企业的选择……

[查看完整内容>>](/blog/new-economy-dtc-transformation?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtcm)
`,
      media: { url: "" },
      mediaCover: {
        url: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/events_dtc_case_3_b669b34878.png",
        width: 600,
        height: 360
      },
      titleLink: "/blog/new-economy-dtc-transformation?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtcm"
    },
    {
      title: "TiDB 助力携程实时标签处理平台提速",
      content: `携程旅行的数据来源广泛、形式多样、离线数据处理与在线数据处理兼有，如何对这些数据进行采集、管理、加工，形成满足运营、市场需求的数据和标签并运用到业务场景中，对数据处理系统的时效性、准确性、稳定性和灵活性提出了更高的要求……

[查看完整内容>>](/case/user-case-ctrip?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtc)
`,
      media: { url: "" },
      mediaCover: {
        url: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/events_dtc_case_4_2c670d4059.png",
        width: 600,
        height: 360
      },
      titleLink: "/case/user-case-ctrip?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtc"
    },
    {
      title: "造好新能源车需要想象力和技术，卖好新能源车则需要实时分析能力",
      content: `快速扩张、快速应变对造车新势力“蔚小理”的生存和发展至关重要，需要更快、更强的数据技术架构才能实现。通过部署新一代 TiDB 分布式数据库，该车企使用自己编写的前端及 SQL 语句构建了一套性能强大、能够服务多种角色的实时数据分析平台……

[查看完整内容>>](/blog/tidb-enable-new-energy-vehicle-manufacturers/?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtc)
`,
      media: { url: "" },
      mediaCover: {
        url: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/events_dtc_case_5_036e1fca40.png",
        width: 600,
        height: 360
      },
      titleLink: "/blog/tidb-enable-new-energy-vehicle-manufacturers/?utm_source=special-topic&utm_medium=banner&utm_campaign=new-economy-dtc"
    },
  ]
  return (
    <BackgroundContainer className={styles.cases}>
      <h2 className={styles.cases_title}>
        案例故事与媒体观点
      </h2>
      <div className={styles.cases_list}>
        {cases.map(value => (
          <div className={styles.cases_list_item} key={value.title}>
            <TalkSection {...value} />
          </div>
        ))}
      </div>
      <div className={styles.cases_more}>
        <LinkModule onClick={handleOpen}>方案咨询</LinkModule>
      </div>
    </BackgroundContainer>
  )
}

export const Download = ({ title = "资料下载" }) => {
  const linkStyle = { marginRight: "8px" }
  const downloads = [
    {
      title: <span>TiDB 产品和解决方案宣传手册 <Icon name="download" /></span>,
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/1_3dbea40bf3.jpg"
    },
    {
      title: <span>TiDB 行业案例集 <Icon name="download" /></span>,
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/2_0f7730e8ad.jpg"
    },
    {
      title: <span>新经济 DTC 用户场景白皮书 <Icon name="download" /></span>,
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/DTC_66e9d09c82.jpg",
      link: whiteBookDownloadUrl,
    }
  ]
  return (
    <BackgroundContainer hasBackgroundColor className={styles.download}>
      <h2 className={styles.download_title}>{title}</h2>
      <div className={styles.download_list}>
        {downloads.map(value => (
          <OutLink href={value.link} className={styles.download_list_item}>
            <CardWithTextMask {...value} />
          </OutLink>
        ))}
      </div>
    </BackgroundContainer>
  )
}

export const query = graphql`
  query DatabaseBehindNewEconomyDigitalTransformation {
    allStrapiSolutions(filter: {strapiId: {in: [1,8,5,6]}}) {
      nodes {
        customUrl
        description
        title
        strapiId
        id
        image {
          media {
            url
          }
        }
      }
    }
  }
`