import React, { useState } from "react"
import cls from "classnames"
import * as styles from "./index.module.scss"
import Container from "@/components/container"
import t from "@/constants/wording"
import useContactForm from "@/hooks/useContactForm";

const ContactUs: React.FC<{ outLink?: string; location: ILocation }> = ({
  outLink,
  location,
}) => {
  const { dom: ContactFormDOM, handleOpen } = useContactForm(location)

  return (
    <>
      <section
        className={cls("common-bottom-background-primary", styles.contactUs)}
      >
        <Container>
          <div
            className={cls(
              "is-flex is-justify-content-space-between is-align-items-center",
              styles.content
            )}
          >
            {outLink ? (
              <h2>{t("Consult our team of experts")}</h2>
            ) : (
              <div>
                <h2>{t("Solution and architecture consulting")}</h2>
                <h5>
                  {t(
                    "For more inquiries about usage scenarios and technical architecture, please contact our sales and technical support team"
                  )}
                </h5>
              </div>
            )}
            <div
              onClick={handleOpen}
              className={cls(
                "button is-medium is-white is-font-color-primary",
                styles.contactUsButton
              )}
            >
              {t("immediately consult")}
            </div>
          </div>
        </Container>
      </section>
      {ContactFormDOM}
    </>
  )
}

export default ContactUs