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"

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="/product#SelectProduct"
            >
              {t("free experience now")}
            </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