import Container from "@/components/container"
import React from "react"
import cls from "classnames"
import t from "@/constants/wording"
import { Link } from "gatsby"

import * as styles from "./index.module.scss"
import { contactFormId } from "@/pages/contact-us-now"

const FreeExperience: React.FC = () => {
  return (
    <section className={cls(styles.freeExperience)}>
      <Container>
        <div
          className={cls(
            "is-flex is-justify-content-space-between is-align-items-center",
            styles.content
          )}
        >
          <h1>{t("free experience title")}</h1>
          <div
            className={cls(
              "is-flex is-justify-content-space-between",
              styles.buttonGroup
            )}
          >
            <Link
              className={cls("button is-white is-medium", styles.button)}
              to={`#${contactFormId}`}
            >
              立即咨询
            </Link>
            {/*<Link*/}
            {/*  className={cls("button is-outlined is-white is-medium")}*/}
            {/*  to="/contact"*/}
            {/*>*/}
            {/*  {t("free experience contact")}*/}
            {/*</Link>*/}
          </div>
        </div>
      </Container>
    </section>
  )
}

export default FreeExperience