"use client"

import { useEffect } from "react"
import { useLocation } from "react-router-dom"
import ReCAPTCHA from "react-google-recaptcha"
import { motion, useAnimation } from "framer-motion"
import { useInView } from "react-intersection-observer"
import useRecaptcha from "./Recaptcha/useRecaptcha"
import { img10 } from "./asset"

const ContactForm = () => {
  const { capchaToken, handleRecaptcha } = useRecaptcha()
  const location = useLocation()
  const controls = useAnimation()
  const [ref, inView] = useInView({
    threshold: 0.1, // Trigger when 10% of the element is in view
  })

  useEffect(() => {
    if (inView) {
      controls.start("visible")
    } else {
      controls.start("hidden")
    }
  }, [controls, inView])

  useEffect(() => {
    if (location.hash) {
      const element = document.querySelector(location.hash)
      if (element) {
        element.scrollIntoView({ behavior: "smooth" })
      }
    }
  }, [location])

  const textVariants = {
    hidden: { opacity: 0, x: -50 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.8, ease: "easeOut" } },
  }

  const formVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
  }

  return (
    <div
      className="relative flex min-h-screen w-full items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
      id="form"
      style={{
        background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
      }}
      ref={ref}
    >
      <div className="container mx-auto flex flex-col lg:flex-row items-center justify-center gap-8 py-16 px-4 lg:px-8">
        {/* Left Section */}
        <motion.div
          className="w-full md:mt-[-650px] md:ml-14 lg:w-[50%] space-y-6"
          initial="hidden"
          animate={controls}
          variants={textVariants}
        >
          <h2 className="text-2xl md:text-[32px] font-[550] leading-tight md:leading-[48px] tracking-[0.005em] 2xl:text-[36px] 2xl:leading-[52px]">
            Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
          </h2>
          <p className="text-base md:text-[18px]  font-[400] leading-relaxed md:leading-[30px] tracking-[0.005em] 2xl:text-[20px] 2xl:leading-[34px]">
            Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan
            bisnis Anda bersama Rekan AI!
          </p>
        </motion.div>

        {/* Form Section */}
        <motion.div className="w-full lg:w-7/12 xl:w-6/12" initial="hidden" animate={controls} variants={formVariants}>
          <div className="bg-white text-[#212121] rounded-[25px] p-6 md:p-[40px] border-[8px] border-[#F086A4] 2xl:px-[60px] 2xl:py-[50px] max-w-[794px] mx-auto">
            <h3 className="text-2xl md:text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
              Hubungi Tim Terbaik Kami
            </h3>
            <p className="mb-6 text-[#212121] 2xl:text-[18px]">Silakan isi data diri Anda pada formulir di bawah ini</p>

            <form className="flex flex-col gap-4">
              <div>
                <label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
                <input
                  type="text"
                  placeholder="Masukkan nama Anda"
                  required
                  maxLength={50}
                  className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
                />
              </div>
              <div>
                <label className="text-[#6B5CEA]">Nomor Telepon*</label>
                <input
                  type="tel"
                  placeholder="Masukkan nomor telepon Anda"
                  required
                  maxLength={20}
                  className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
                  pattern="[0-9]*"
                  onInput={(e) => {
                    e.target.value = e.target.value.replace(/[^0-9]/g, "")
                  }}
                />
              </div>
              <div>
                <label className="text-[#6B5CEA]">Email*</label>
                <input
                  type="email"
                  placeholder="Masukkan email Anda"
                  required
                  className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
                />
              </div>
              <div>
                <label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
                <input
                  type="text"
                  maxLength={50}
                  placeholder="Masukkan nama organisasi/perusahaan Anda"
                  className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
                />
              </div>
              <div className="relative">
                <label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
                <select
                  required
                  className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
                >
                  <option value="">Pilih kebutuhan Anda</option>
                  <option value="konsultasi">Konsultasi</option>
                  <option value="pelatihan">Pelatihan</option>
                  <option value="pengembangan">Pengembangan</option>
                </select>
                <div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
                  <svg
                    className="w-8 mt-7 text-[#5B59E8]"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                  </svg>
                </div>
              </div>

              <div className="flex items-center gap-2">
                <ReCAPTCHA sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW" onChange={handleRecaptcha} />
              </div>

              <button
                type="submit"
                className="bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
                disabled={!capchaToken}
              >
                Kirim Pesan
              </button>
            </form>
          </div>
        </motion.div>
      </div>
    </div>
  )
}

export default ContactForm