import React from "react";
import { useTranslation } from "react-i18next";

const ContactView: React.FC = () => {
  const { t } = useTranslation();
  return (
    <div className="bg-white">
      <section className="max-w-7xl mx-auto px-6 md:px-12 py-16 md:py-24">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
          <div className="space-y-8">
            <h1 className="text-5xl md:text-7xl font-black text-[#EE0434] tracking-tight leading-tight">
              {t("getInTouch")} <br /> {t("withUs")}
            </h1>
            <p className="text-slate-500 text-lg md:text-xl font-medium leading-relaxed max-w-lg">
              {t("weAreAlwaysHereToSupportYou")}
            </p>
            <div className="space-y-6 pt-4">
              <div className="space-y-2">
                <div className="flex items-center space-x-3 text-slate-800">
                  <svg
                    className="w-6 h-6 text-[#EE0434]"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span className="font-bold text-lg">Email</span>
                </div>
                <a
                  href="mailto:klinhnguyen@viettech.asia"
                  className="block text-[#EE0434] font-black text-lg md:text-xl pl-9 hover:underline"
                >
                  klinhnguyen@viettech.asia
                </a>
              </div>
            </div>
          </div>
          <div className="bg-white p-2">
            <form className="space-y-8" onSubmit={(e) => e.preventDefault()}>
              <div className="space-y-3">
                <label className="block text-slate-800 font-bold text-lg">
                  {t("fullName")}
                </label>
                <input
                  type="text"
                  placeholder={t("enterName")}
                  className="w-full bg-white border border-slate-200 rounded-xl py-4 px-6 focus:outline-none focus:ring-2 focus:ring-red-50 focus:border-[#EE0434] transition-all"
                />
              </div>
              <div className="space-y-3">
                <label className="block text-slate-800 font-bold text-lg">
                  {t("specificRequirements")}
                </label>
                <textarea
                  rows={6}
                  placeholder={t("describeRequirements")}
                  className="w-full bg-white border border-slate-200 rounded-2xl py-4 px-6 focus:outline-none focus:ring-2 focus:ring-red-50 focus:border-[#EE0434] transition-all"
                />
              </div>
              <button
                type="submit"
                className="w-full bg-[#EE0434] text-white py-5 rounded-[40px] font-black text-2xl shadow-lg hover:shadow-xl transition-all"
              >
                {t("submitSubmit")}
              </button>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
};

export default ContactView;
