import React from "react";

import Image from "next/image";
import { useTranslation } from "next-i18next";

import classNames from "classnames";

import styles from "./ContactUs.module.scss";

import icon1 from "../../../public/icons/contact-us/1.svg";
import icon2 from "../../../public/icons/contact-us/2.svg";
import icon3 from "../../../public/icons/contact-us/3.svg";
import ContactUsForm from "../contact-us-form";

const getItems = (t: any) => [
  {
    icon: icon1,
    title: t("We are Professional"),
    des: t("we-are-professional-content"),
  },
  {
    icon: icon2,
    title: t("We are Trusted"),
    des: t("we-are-trusted-content"),
  },
  {
    icon: icon3,
    title: t("We are Expert"),
    des: t("we-are-expert-content"),
  },
];

const ContactUs = () => {
  const { t } = useTranslation("common");

  const items = getItems(t);

  return (
    <article className={styles.contactUs}>
      <div className="bg-image"></div>

      <div className="container">
        <div className="flex justify-center">
          <div className="wrapper">
            <div className="lg:flex justify-between">
              <div className="lg:basis-2/5 mb-10">
                <div className="flex items-baseline">
                  <h2 className="title ltr:mr-10 rtl:ml-10 mb-7">{t("Contact us")}</h2>

                  <hr className="flex-1 ltr:mr-4 rtl:ml-4 border-white" />
                </div>

                <div>
                  {items.map(({ icon, title, des }, index) => (
                    <div
                      key={index}
                      className={classNames("flex", { "mb-12": index + 1 < items.length })}
                    >
                      <div className="icon basis-16 ltr:mr-8 rtl:ml-8">
                        <Image src={icon} alt="" />
                      </div>

                      <div>
                        <h4 className="title text-color-1 font-semibold">{title}</h4>
                        <p>{des}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="lg:basis-2/5">
                <ContactUsForm />
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
};

export default ContactUs;