"use client";

import { useState, ChangeEvent, FormEvent } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";

interface FormData {
  name: string;
  email: string;
  contact: string;
  message: string;
  accepted: boolean,

}

export default function ContactSection() {
  const [formData, setFormData] = useState<FormData>({
    name: "",
    email: "",
    contact: "",
    message: "",
   accepted: false,

  });

   const handleChange = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value, type } = e.target;

    setFormData((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value,
    }));
  };

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!formData.accepted) {
      alert("Please accept the Terms & Conditions before submitting.");
      return;
    }

    console.log("Form submitted:", formData);

    setFormData({
      name: "",
      email: "",
      contact: "",
      message: "",
      accepted: false,
    });
  };


  return (
    <section className="relative  w-full flex justify-center bg-[#FFF7EE] text-[#E9500F] py-10">
      <div className=" w-full container max-w-4xl bg-[#FFF7EE] px-10 ">
        <div className="mb-12 text-center">
          <h2 className="text-4xl md:text-5xl  font-bold text-center  text-[#E9500F]">
            CONTACT US
          </h2>
          <p className=" mt-2">
            Planning a group booking, have feedback, or want to talk
            partnerships? We’d love to hear from you.
          </p>
        </div>

        <form
          onSubmit={handleSubmit}
          className="grid grid-cols-1 w-full md:grid-cols-2 gap-8 text-[#333]"
        >
          {/* Name */}
          <div className="flex  flex-col">
            <label className="text-sm font-semibold mb-1">Full Name*</label>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
              required
              className="border-b border-gray-400 focus:border-[#E9500F] outline-none py-2"
            />
          </div>

          {/* Email */}
          <div className="flex flex-col">
            <label className="text-sm font-semibold mb-1">Email Address*</label>
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              required
              className="border-b border-gray-400 bg-[#FFF7EE] focus:border-[#E9500F] outline-none py-2"
            />
          </div>

          {/* Phone Input with Country Code */}
          <div className="flex flex-col">
            <label className="text-sm font-semibold mb-1">Phone Number*</label>
            <PhoneInput
              country={"ae"} // UAE by default
              value={formData.contact}
              onChange={(value) =>
                setFormData((prev) => ({ ...prev, contact: value }))
              }
              inputStyle={{
                width: "100%",
                border: "none",
                borderBottom: "1px solid #ccc",
                borderRadius: 0,
                paddingLeft: "48px",
                background: "#FFF7EE",
                height: "40px",
              }}
              buttonStyle={{
                border: "none",
                background: "transparent",
              }}
            />
          </div>

          {/* Message */}
          <div className="flex flex-col">
            <label className="text-sm font-semibold mb-1">Message</label>
            <textarea
              name="message"
              value={formData.message}
              onChange={handleChange}
              required
              rows={1}
              className="border-b border-gray-400 focus:border-[#E9500F] outline-none py-2 resize-none"
            />
          </div>
          <div className="md:col-span-2 flex items-start gap-3 mt-4">
            <input
              type="checkbox"
              name="accepted"
              checked={formData.accepted}
              onChange={handleChange}
              className="mt-1 w-4 h-4 cursor-pointer "
              required
            />

            <p className="text-sm">
              I agree to the{" "}
              <a
                href="/privacy-policy"
                className="text-[#E9500F] underline font-semibold"
                target="_blank"
              >
                Privacy Policy
              </a>{" "}
            </p>
          </div>

          {/* Submit */}
          <div className="md:col-span-2 flex justify-center mt-6">
            <button
              type="submit"
              className="bg-[#E9500F] cursor-pointer text-white px-10 py-3 rounded-full font-semibold hover:bg-[#c63d0c] transition"
            >
              Submit
            </button>
          </div>
        </form>
      </div>
    </section>
  );
}