import { useTranslation } from "react-i18next";
import {
  FaMapMarkerAlt,
  FaPhoneAlt,
  FaEnvelope,
  FaWhatsapp,
} from "react-icons/fa";
import emailjs from "@emailjs/browser";
import { useRef, useState } from "react";

const Contact = () => {
  const { t } = useTranslation();
  const form = useRef();
  const [message, setMessage] = useState({ text: "", type: "" });
  const [isLoading, setIsLoading] = useState(false);
const Background = "https://i.imgur.com/IVqkUJO.jpg";
  const sendEmail = (e) => {
    e.preventDefault();
    setIsLoading(true);
    setMessage({ text: "", type: "" });

    emailjs
      .sendForm(
        "service_dynf5hg",
        "template_l4ik4he",
        form.current,
        "rRjr_WNgPp7_rGno1"
      )
      .then(
        (result) => {
          console.log("✅ Message sent:", result.text);
          setMessage({
            text: t("contact.successMessage") || "Message sent successfully!",
            type: "success",
          });
          form.current.reset();
          setIsLoading(false);
          // Clear message after 5 seconds
          setTimeout(() => setMessage({ text: "", type: "" }), 5000);
        },
        (error) => {
          console.error("❌ Failed to send message:", error.text);
          setMessage({
            text:
              t("contact.errorMessage") ||
              "Failed to send message. Please try again.",
            type: "error",
          });
          setIsLoading(false);
          // Clear message after 5 seconds
          setTimeout(() => setMessage({ text: "", type: "" }), 5000);
        }
      );
  };

  return (
    <section id="contact" className="relative min-h-screen">
      <div className="absolute inset-0">
        <img
          src={Background}
          alt="Contact Background"
          className="w-full h-full object-cover"
          loading="eager"
          fetchPriority="high"
        />
        <div className="absolute inset-0 bg-[#10375C]/65 mix-blend-multiply"></div>
      </div>
      <div className="relative z-10 px-4 py-10 md:px-20 text-white">
        <h1 className="pt-6 mb-4 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
          <span
            className="text-transparent bg-clip-text"
            style={{
              backgroundImage:
                "linear-gradient(to right, #10375C 0%, #F3C623 40%, #F3C623 100%)",
            }}
          >
            {t("contact.title")}
          </span>
        </h1>

        <p className="text-center text-lg md:text-xl max-w-3xl mx-auto text-[#D1D5DB] leading-relaxed mb-12">
          {t("contact.subtitle")}
        </p>
        <div className="flex flex-col md:flex-row-reverse gap-10 items-start">
          {/* Enhanced Contact Information Section */}
          <div className="space-y-6 text-right md:w-1/2">
            {/* Address Card */}
            <div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm rounded-2xl p-6 border border-[#F3C623]/30 shadow-xl hover:shadow-2xl hover:shadow-[#F3C623]/20 transition-all duration-500 hover:scale-105 hover:border-[#F3C623]/60">
              <div className="flex flex-row-reverse items-start gap-6">
                <div className="relative">
                  <div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
                    <FaMapMarkerAlt className="text-white text-2xl group-hover:scale-110 transition-transform duration-300" />
                  </div>
                  <div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-bold text-[#F3C623] mb-2 group-hover:text-white transition-colors duration-300">
                    {t("contact.address")}
                  </h3>
                  <p className="text-[#D1D5DB] leading-relaxed group-hover:text-white transition-colors duration-300">
                    {t("contact.addressText")}
                  </p>
                </div>
              </div>
            </div>

            {/* Phone Card */}
            <div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm rounded-2xl p-6 border border-[#F3C623]/30 shadow-xl hover:shadow-2xl hover:shadow-[#F3C623]/20 transition-all duration-500 hover:scale-105 hover:border-[#F3C623]/60">
              <div className="flex flex-row-reverse items-start gap-6">
                <div className="relative">
                  <div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
                    <FaPhoneAlt className="text-white text-2xl group-hover:scale-110 transition-transform duration-300" />
                  </div>
                  <div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-bold text-[#F3C623] mb-3 group-hover:text-white transition-colors duration-300">
                    {t("contact.phone")}
                  </h3>
                  <div className="space-y-3">
                    <div className="flex items-center gap-3 justify-end bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-all duration-300">
                      <span className="text-white font-medium tracking-wide">
                        0965656631
                      </span>
                      <div className="flex items-center gap-2">
                        <FaPhoneAlt
                          className="text-[#F3C623] text-lg hover:scale-125 transition-transform duration-300 cursor-pointer"
                          title="اتصال"
                        />
                      </div>
                    </div>
                    <div className="flex items-center gap-3 justify-end bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-all duration-300">
                      {/* <FaWhatsapp className="text-xl" /> */}
                      <a
                        href="https://wa.me/963965656631"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
                      >
                        <span>963965656631</span>
                      </a>
                      <div className="flex items-center gap-2">
                        <FaWhatsapp
                          className="text-green-400 text-xl hover:scale-125 transition-transform duration-300 cursor-pointer"
                          title="واتساب"
                        />
                        <FaPhoneAlt
                          className="text-[#F3C623] text-lg hover:scale-125 transition-transform duration-300 cursor-pointer"
                          title="اتصال"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Email Card */}
            <div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm rounded-2xl p-6 border border-[#F3C623]/30 shadow-xl hover:shadow-2xl hover:shadow-[#F3C623]/20 transition-all duration-500 hover:scale-105 hover:border-[#F3C623]/60">
              <div className="flex flex-row-reverse items-start gap-6">
                <div className="relative">
                  <div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
                    <FaEnvelope className="text-white text-2xl group-hover:scale-110 transition-transform duration-300" />
                  </div>
                  <div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-bold text-[#F3C623] mb-2 group-hover:text-white transition-colors duration-300">
                    {t("contact.email")}
                  </h3>
                  <p className="text-white font-medium bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-all duration-300 cursor-pointer hover:text-[#F3C623]">
                    <a href="mailto:info@TPS-STATIONS.COM">
                      <span>Info@TPS-STATIONS.COM</span>
                    </a>
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Contact Form - keeping existing styling */}
          <div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm text-white p-8 rounded-2xl shadow-2xl border border-[#F3C623]/30 hover:border-[#F3C623]/60 md:w-1/2 w-full min-h-[450px] hover:shadow-[0px_20px_50px_rgba(243,198,35,0.2)] transition-all duration-500 hover:scale-[1.02]">
            <div className="relative">
              <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-[#F3C623] to-[#EB8317] leading-snug">
                {t("contact.formTitle")}
              </h2>
              <div className="absolute -top-2 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-gradient-to-r from-[#F3C623] to-[#EB8317] rounded-full"></div>
            </div>

            <form
              ref={form}
              onSubmit={sendEmail}
              className="space-y-5 text-right"
            >
              {/* Name Field */}
              <div className="group/field">
                <label className="block mb-2 font-semibold text-[#F3C623] text-base transition-colors duration-300 group-hover/field:text-white">
                  {t("contact.name")}
                </label>
                <div className="relative">
                  <input
                    type="text"
                    name="user_name"
                    required
                    className="w-full border-2 border-[#F3C623]/30 p-3 rounded-xl bg-white/95 backdrop-blur-sm text-black text-base placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#F3C623]/30 focus:border-[#F3C623] transition-all duration-300 hover:border-[#F3C623]/50 hover:shadow-lg hover:shadow-[#F3C623]/10"
                    placeholder={t("contact.nameePlaceholder")}
                  />
                  <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#F3C623]/5 to-[#EB8317]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
                </div>
              </div>

              {/* Email Field */}
              <div className="group/field">
                <label className="block mb-2 font-semibold text-[#F3C623] text-base transition-colors duration-300 group-hover/field:text-white">
                  {t("contact.email")}
                </label>
                <div className="relative">
                  <input
                    type="email"
                    name="user_email"
                    required
                    className="w-full border-2 border-[#F3C623]/30 p-3 rounded-xl bg-white/95 backdrop-blur-sm text-black text-base placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#F3C623]/30 focus:border-[#F3C623] transition-all duration-300 hover:border-[#F3C623]/50 hover:shadow-lg hover:shadow-[#F3C623]/10"
                    placeholder={t("contact.emailPlaceholder")}
                  />
                  <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#F3C623]/5 to-[#EB8317]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
                </div>
              </div>

              {/* Message Field */}
              <div className="group/field">
                <label className="block mb-2 font-semibold text-[#F3C623] text-base transition-colors duration-300 group-hover/field:text-white">
                  {t("contact.message")}
                </label>
                <div className="relative">
                  <textarea
                    name="user_message"
                    required
                    className="w-full border-2 border-[#F3C623]/30 p-3 rounded-xl resize-none bg-white/95 backdrop-blur-sm text-black text-base placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#F3C623]/30 focus:border-[#F3C623] transition-all duration-300 hover:border-[#F3C623]/50 hover:shadow-lg hover:shadow-[#F3C623]/10"
                    rows="4"
                    placeholder={t("contact.messagePlaceholder")}
                  ></textarea>
                  <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#F3C623]/5 to-[#EB8317]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
                </div>
              </div>

              {/* Success/Error Message */}
              {message.text && (
                <div
                  className={`p-4 rounded-xl text-center font-medium transition-all duration-500 transform ${
                    message.type === "success"
                      ? "bg-green-500/20 border border-green-400/50 text-green-300 shadow-lg shadow-green-500/20"
                      : "bg-red-500/20 border border-red-400/50 text-red-300 shadow-lg shadow-red-500/20"
                  } animate-pulse`}
                >
                  <div className="flex items-center justify-center gap-2">
                    {message.type === "success" ? (
                      <svg
                        className="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M5 13l4 4L19 7"
                        />
                      </svg>
                    ) : (
                      <svg
                        className="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    )}
                    {message.text}
                  </div>
                </div>
              )}

              {/* Submit Button */}
              <div className="pt-2">
                <button
                  type="submit"
                  disabled={isLoading}
                  className={`group/btn relative w-full bg-gradient-to-r from-[#EB8317] to-[#F3C623] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:from-[#F3C623] hover:to-[#EB8317] transition-all duration-500 transform hover:scale-105 hover:shadow-2xl hover:shadow-[#F3C623]/30 active:scale-95 overflow-hidden ${
                    isLoading ? "opacity-70 cursor-not-allowed" : ""
                  }`}
                >
                  <span className="relative z-10 flex items-center justify-center gap-2">
                    {isLoading ? (
                      <>
                        <svg
                          className="animate-spin w-5 h-5"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                          ></circle>
                          <path
                            className="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                          ></path>
                        </svg>
                        Sending...
                      </>
                    ) : (
                      <>
                        {t("contact.send")}
                        <svg
                          className="w-5 h-5 transform group-hover/btn:translate-x-1 transition-transform duration-300"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                          />
                        </svg>
                      </>
                    )}
                  </span>
                  {!isLoading && (
                    <div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transform -skew-x-12 -translate-x-full group-hover/btn:translate-x-full transition-transform duration-1000"></div>
                  )}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Contact;
