import React from "react"
import cls from "classnames"
import * as styles from "./index.module.scss"
import Container from "@/components/container"
import { CustomLink } from "@/components"

const Prize: React.FC = () => {
  return (
    <section
      className={cls("common-bottom-background-primary", styles.container)}
    >
      <Container>
        <div
          className={cls(
            "is-flex is-justify-content-space-between is-align-items-center",
            styles.content
          )}
        >
          <div>
            <h2>有奖问答</h2>
            <div>
              <p>
                看视频的同时，你还可以参与有奖问答，只要全部答对，就有机会获得精美周边
              </p>
              <p>活动详情：</p>
              <p>时间：2021/11/8 -- 2021/11/26</p>
              <p>
                参与方式：答案就在视频及文章中，只要答对所有问题，即可参与抽奖
              </p>
              <p>奖品：TiDB 快充无线充电器（30个）</p>
              <p>
                获奖公布时间：抽奖结果将在{" "}
                <a href="https://asktug.com">asktug.com</a>{" "}
                活动版块中公布，敬请期待
              </p>
            </div>
          </div>
          <div>
            <img
              src="https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/2021_31544cf350.png"
              alt=""
            />
          </div>
          <CustomLink
            linkTo={
              "https://fe.ma.scrmtech.com/quest/answer_sheet?main_id=19697&wx_id=1864&survey_id=123"
            }
            className={cls(
              "button is-medium is-white is-font-color-primary",
              styles.linkButton
            )}
          >
            立即参与
          </CustomLink>
        </div>
      </Container>
    </section>
  )
}

export default Prize