import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { Send, CheckCircle2, AlertCircle } from "lucide-react";
const initialState = {
  name: "",
  email: "",
  mobile: "",
  companyName: "",
  designation: "",
  message: ""
};
export default function ContactForm() {
  const [form, setForm] = useState(initialState);
  const [status, setStatus] = useState("idle");
  const [errorMsg, setErrorMsg] = useState("");
  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm((f) => ({ ...f, [name]: value }));
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    setErrorMsg("");
    try {
      await new Promise((resolve) => setTimeout(resolve, 1200));
      setStatus("sent");
      setForm(initialState);
    } catch (err) {
      setStatus("error");
      setErrorMsg("Something went wrong. Please try again.");
    }
  };
  return <div className="relative w-full">
      <AnimatePresence mode="wait">
        {status === "sent" ? <motion.div
    key="success"
    initial={{ opacity: 0, scale: 0.98 }}
    animate={{ opacity: 1, scale: 1 }}
    exit={{ opacity: 0, scale: 0.98 }}
    transition={{ duration: 0.3 }}
    className="p-8 md:p-12 flex flex-col items-center text-center bg-white border border-slate-100 rounded-2xl shadow-xl"
  >
            <div className="w-14 h-14 rounded-full bg-emerald-50 flex items-center justify-center mb-5 border border-emerald-100">
              <CheckCircle2 className="w-7 h-7 text-emerald-600" />
            </div>
            <h3 className="font-heading text-xl text-slate-900 font-extrabold tracking-tight">Message Received</h3>
            <p className="text-slate-500 mt-3 max-w-md font-light leading-relaxed text-sm">
              Thank you for reaching out to Masar NDT. Our expert engineering team will review your enquiry and get back to you within 24 hours.
            </p>
            <button
    className="mt-8 text-xs text-white bg-orange-500 hover:bg-orange-600 px-8 py-3.5 font-bold tracking-wider uppercase rounded-xl transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5 duration-200"
    onClick={() => setStatus("idle")}
  >
              Send another message
            </button>
          </motion.div> : <motion.form
    key="form"
    initial={{ opacity: 0, y: 10 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -10 }}
    transition={{ duration: 0.3 }}
    onSubmit={handleSubmit}
    className="p-6 md:p-8 space-y-6 bg-white border border-slate-100 shadow-xl rounded-2xl"
  >
            <div className="grid sm:grid-cols-2 gap-6">
              <Field label="Your Name" name="name" value={form.name} onChange={handleChange} required />
              <Field label="Email Address" name="email" type="email" value={form.email} onChange={handleChange} required />
              <Field label="Mobile Number" name="mobile" type="tel" value={form.mobile} onChange={handleChange} />
              <Field label="Company Name" name="companyName" value={form.companyName} onChange={handleChange} />
            </div>
            <Field label="Designation / Job Title" name="designation" value={form.designation} onChange={handleChange} />
            
            <div className="flex flex-col">
              <label htmlFor="message" className="text-[11px] font-bold text-slate-700 uppercase tracking-wider mb-2 font-heading">
                Message / Scope Details *
              </label>
              <textarea
    id="message"
    name="message"
    rows={4}
    value={form.message}
    onChange={handleChange}
    required
    className="w-full bg-slate-50/50 border border-slate-200 hover:border-orange-500/30 rounded-xl px-4 py-3 text-sm text-slate-900 focus:border-orange-500 focus:bg-white focus:ring-2 focus:ring-orange-500/10 outline-none transition-all resize-y font-normal leading-relaxed"
    placeholder="Describe your NDT, inspection, or technical manpower requirements..."
  />
            </div>

            {status === "error" && <div className="flex items-center gap-2.5 text-sm text-red-600 bg-red-50 border border-red-100 p-4 rounded-xl">
                <AlertCircle className="w-4 h-4 shrink-0" />
                <p>{errorMsg}</p>
              </div>}

            <button
    type="submit"
    disabled={status === "sending"}
    className="w-full sm:w-auto flex items-center justify-center gap-2 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs tracking-wider uppercase px-8 py-4 rounded-xl transition-all duration-200 disabled:opacity-60 shadow-lg hover:shadow-orange-500/10 hover:-translate-y-0.5 active:translate-y-0"
  >
              {status === "sending" ? <>
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                  <span>Submitting…</span>
                </> : <>
                  <span>Submit Enquiry</span>
                  <Send className="w-3.5 h-3.5" />
                </>}
            </button>
          </motion.form>}
      </AnimatePresence>
    </div>;
}
function Field({ label, name, value, onChange, type = "text", required = false }) {
  return <div className="flex flex-col">
      <label htmlFor={name} className="text-[11px] font-bold text-slate-700 uppercase tracking-wider mb-2 font-heading">
        {label} {required && <span className="text-orange-500">*</span>}
      </label>
      <input
    id={name}
    name={name}
    type={type}
    value={value}
    onChange={onChange}
    required={required}
    className="w-full bg-slate-50/50 border border-slate-200 hover:border-orange-500/30 rounded-xl px-4 py-3 text-sm text-slate-900 focus:border-orange-500 focus:bg-white focus:ring-2 focus:ring-orange-500/10 outline-none transition-all font-normal"
  />
    </div>;
}
