"use client";

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

interface ContactForm {
  name: string;
  email: string;
  contact: string;
  message: string;
  accepted:boolean;
}

export default function ContactScreen() {
  const [form, setForm] = useState<ContactForm>({
    name: "",
    email: "",
    contact: "",
    message: "",
    accepted:false,
  });

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

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

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

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

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

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

  return (
    <main className="flex flex-col justify-center items-center">

    <section className="relative container  flex flex-col justify-center items-center px-6 py-10 overflow-hidden">
      <motion.div
        initial={{ opacity: 0, y: -40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="text-center mb-10"
      >
        <h1 className=" text-[#E9500F] mb-4">Get in Touch</h1>
        <p className="text-[#F76B1C] font-medium max-w-4xl mx-auto">
          We’d love to hear from you. Whether you’re planning a family meal,
          placing a bulk order, or exploring partnership opportunities, drop us
          a message and the Kulcha King team will be happy to help.
        </p>
      </motion.div>

      {/* Contact Form Card */}
      <motion.form
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 0.2 }}
        onSubmit={handleSubmit}
        className="w-full max-w-2xl bg-white/80 backdrop-blur-md border border-orange-100 shadow-2xl rounded-3xl p-10"
      >
        <div className="grid grid-cols-1 gap-6">
          <input
            type="text"
            name="name"
            placeholder="Enter your full name*"
            value={form.name}
            onChange={handleChange}
            className="w-full border-b-2 border-gray-300 focus:border-[#E9500F] bg-transparent outline-none py-3 placeholder-gray-500"
            required
          />

          <input
            type="email"
            name="email"
            placeholder="Enter your email address*"
            value={form.email}
            onChange={handleChange}
            className="w-full border-b-2 border-gray-300 focus:border-[#E9500F] bg-transparent outline-none py-3 placeholder-gray-500"
            required
          />

          <PhoneInput
            country={"ae"}
            value={form.contact}
            placeholder="Include your mobile number (optional)"
            onChange={(value) =>
              setForm((prev) => ({ ...prev, contact: value }))
            }
            inputStyle={{
              width: "100%",
              border: "none",
              borderBottom: "2px solid #d1d5db", 
              background: "transparent",
              outline: "none",
              paddingLeft: "48px",
              paddingTop: "12px", 
              paddingBottom: "12px", 
              borderRadius: 0,
              transition: "all 0.3s ease",
            }}
            buttonStyle={{
              border: "none",
              background: "transparent",
            }}
            containerClass="phone-input-wrapper"
            inputClass="phone-input-field"
          />

          <textarea
            name="message"
            placeholder="Tell us how we can help you – reservations, catering, feedback, or general enquiry*"
            value={form.message}
            onChange={handleChange}
            rows={4}
            className="w-full border-b-2 border-gray-300 focus:border-[#E9500F] bg-transparent outline-none py-3 resize-none placeholder-gray-500"
            required
          />
          <div className=" flex items-start gap-3">
            <input
              type="checkbox"
              name="accepted"
              checked={form.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>

          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            type="submit"
            className="w-full cursor-pointer bg-[#E9500F] hover:bg-[#C23D0A] text-white font-semibold py-3 rounded-full transition-all mt-4"
          >
            Send Message
          </motion.button>
        </div>
      </motion.form>
    </section>
        </main>

  );
}