all-file-converter/src/components/Contact.tsx

import { useState, ChangeEvent, FormEvent } from "react";
import { Mail, MessageSquare, Phone, Send, CheckCircle, AlertTriangle } from "lucide-react";
import { motion } from "motion/react";

export default function Contact() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  });

  const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
  const [errorMessage, setErrorMessage] = useState("");

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

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!formData.name || !formData.email || !formData.message) {
      setFormStatus("error");
      setErrorMessage("Please complete all required fields.");
      return;
    }

    setFormStatus("submitting");

    try {
      const response = await fetch("https://formspree.io/f/mojrrdov", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        setFormStatus("success");
        setFormData({ name: "", email: "", subject: "", message: "" });
      } else {
        setFormStatus("error");
        setErrorMessage("An error occurred on the server. Please check your network and try again.");
      }
    } catch (err) {
      setFormStatus("error");
      setErrorMessage("Could not submit the form. Please check your connection or contact our support team.");
    }
  };

  return (
    <section id="contact" className="py-24 bg-gradient-to-b from-[#FAF9FE] to-white relative">
      <div className="max-w-7xl mx-auto px-4 md:px-8 relative z-10">
        {/* Header */}
        <div className="text-center max-w-2xl mx-auto mb-16">
          <span className="text-xs font-bold font-mono tracking-wider text-violet-600 uppercase bg-violet-50 px-3.5 py-1.5 rounded-full">
            Get In Touch
          </span>
          <h2 className="font-display font-bold text-3xl sm:text-4xl text-slate-900 tracking-tight mt-4 mb-4">
            Custom setup assist is{" "}
            <span className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
              one click away
            </span>
          </h2>
          <p className="text-slate-500 text-sm md:text-base font-light">
            Need support with custom scripting, configuration, or folder watcher automation? Message our core team immediately.
          </p>
        </div>

        {/* Column breakdown */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start" id="contact-panel-wrapper">
          {/* Left Column - Contact Details */}
          <div className="lg:col-span-5 space-y-6 text-left">
            <h3 className="font-display font-semibold text-2xl text-slate-900 tracking-tight mb-4">
              Direct Channels
            </h3>
            <p className="text-slate-500 text-sm font-light leading-relaxed mb-6">
              Our support team answers personal emails and WhatsApp inquiries directly. Get prompt assistance with your offline integration.
            </p>

            <div className="space-y-4">
              {/* WhatsApp Support */}
              <a
                href="https://wa.me/923034572298"
                target="_blank"
                rel="noopener noreferrer"
                id="contact-whatsapp-direct-link"
                className="flex items-start p-4 hover:bg-slate-50 border border-slate-100 rounded-2xl transition"
              >
                <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center mr-4 flex-shrink-0 shadow-sm">
                  <Phone className="w-5 h-5" />
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-slate-800">WhatsApp Instant Chat</h4>
                  <p className="text-xs text-slate-500 font-mono mt-0.5">+92 303 4572298</p>
                  <span className="inline-block text-[10px] font-bold text-emerald-600 font-mono mt-1 uppercase">
                    Answered in minutes
                  </span>
                </div>
              </a>

              {/* Email Support */}
              <a
                href="mailto:bahaduralimunnabhai@gmail.com"
                id="contact-email-direct-link"
                className="flex items-start p-4 hover:bg-slate-50 border border-slate-100 rounded-2xl transition"
              >
                <div className="w-10 h-10 rounded-xl bg-violet-50 text-violet-600 flex items-center justify-center mr-4 flex-shrink-0 shadow-sm">
                  <Mail className="w-5 h-5" />
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-slate-800">Secure Developer Mailbox</h4>
                  <p className="text-xs text-slate-500 font-mono mt-0.5">bahaduralimunnabhai@gmail.com</p>
                  <span className="inline-block text-[10px] font-bold text-violet-600 font-mono mt-1 uppercase">
                    Under 12hr Response SLA
                  </span>
                </div>
              </a>

              {/* Developer Location / Core info */}
              <div className="flex items-start p-4 bg-slate-50/50 border border-slate-100 rounded-2xl">
                <div className="w-10 h-10 rounded-xl bg-white text-slate-500 flex items-center justify-center mr-4 flex-shrink-0 shadow-sm">
                  <MessageSquare className="w-4 h-4" />
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-slate-800">Enterprise Configurations</h4>
                  <p className="text-xs text-slate-500 font-light mt-0.5">
                    For corporate deployment arrays, local security audits, or customized CLI wrappers.
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column - Premium AJAX Formspree Card */}
          <div className="lg:col-span-7 bg-white p-8 rounded-[24px] border border-slate-100 shadow-xl shadow-slate-100/30">
            <form onSubmit={handleSubmit} className="space-y-5" id="formspree-contact-form">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                {/* Name */}
                <div className="text-left">
                  <label htmlFor="form-name" className="block text-xs font-semibold text-slate-500 font-mono uppercase tracking-wider mb-2">
                    Your Name <span className="text-rose-500">*</span>
                  </label>
                  <input
                    type="text"
                    id="form-name"
                    name="name"
                    required
                    value={formData.name}
                    onChange={handleChange}
                    placeholder="E.g., Liam Carter"
                    className="w-full px-4 py-3 rounded-xl border border-slate-200/80 bg-slate-50/20 text-slate-800 text-sm focus:outline-none focus:ring-1 focus:ring-violet-500 focus:border-violet-500 focus:bg-white transition"
                  />
                </div>

                {/* Email */}
                <div className="text-left">
                  <label htmlFor="form-email" className="block text-xs font-semibold text-slate-500 font-mono uppercase tracking-wider mb-2">
                    Email Address <span className="text-rose-500">*</span>
                  </label>
                  <input
                    type="email"
                    id="form-email"
                    name="email"
                    required
                    value={formData.email}
                    onChange={handleChange}
                    placeholder="E.g., liam@corp.com"
                    className="w-full px-4 py-3 rounded-xl border border-slate-200/80 bg-slate-50/20 text-slate-800 text-sm focus:outline-none focus:ring-1 focus:ring-violet-500 focus:border-violet-500 focus:bg-white transition"
                  />
                </div>
              </div>

              {/* Subject */}
              <div className="text-left">
                <label htmlFor="form-subject" className="block text-xs font-semibold text-slate-500 font-mono uppercase tracking-wider mb-2">
                  Inquiry Subject
                </label>
                <input
                  type="text"
                  id="form-subject"
                  name="subject"
                  value={formData.subject}
                  onChange={handleChange}
                  placeholder="E.g., Format support setup or folder watchers"
                  className="w-full px-4 py-3 rounded-xl border border-slate-200/80 bg-slate-50/20 text-slate-800 text-sm focus:outline-none focus:ring-1 focus:ring-violet-500 focus:border-violet-500 focus:bg-white transition"
                />
              </div>

              {/* Message */}
              <div className="text-left">
                <label htmlFor="form-message" className="block text-xs font-semibold text-slate-500 font-mono uppercase tracking-wider mb-2">
                  Message Details <span className="text-rose-500">*</span>
                </label>
                <textarea
                  id="form-message"
                  name="message"
                  required
                  rows={4}
                  value={formData.message}
                  onChange={handleChange}
                  placeholder="How can we assist you?"
                  className="w-full px-4 py-3 rounded-xl border border-slate-200/80 bg-slate-50/20 text-slate-800 text-sm focus:outline-none focus:ring-1 focus:ring-violet-500 focus:border-violet-500 focus:bg-white transition resize-none"
                />
              </div>

              {/* Status Notifications */}
              {formStatus === "success" && (
                <div className="p-4 rounded-xl bg-emerald-50 border border-emerald-100 flex items-start text-left text-emerald-800 space-x-2.5">
                  <CheckCircle className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h5 className="text-xs font-bold font-mono tracking-wider uppercase">Message Transmitted!</h5>
                    <p className="text-xs text-slate-650 mt-0.5">Thank you. Your request is in queue. Our support specialists will contact you very soon.</p>
                  </div>
                </div>
              )}

              {formStatus === "error" && (
                <div className="p-4 rounded-xl bg-rose-50 border border-rose-100 flex items-start text-left text-rose-800 space-x-2.5">
                  <AlertTriangle className="w-5 h-5 text-rose-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h5 className="text-xs font-bold font-mono tracking-wider uppercase">Missing Parameters</h5>
                    <p className="text-xs text-slate-650 mt-0.5">{errorMessage}</p>
                  </div>
                </div>
              )}

              {/* Submit button */}
              <button
                type="submit"
                disabled={formStatus === "submitting"}
                id="contact-form-submit-btn"
                className={`w-full py-4 rounded-xl font-semibold flex items-center justify-center space-x-2 border transition-all cursor-pointer ${
                  formStatus === "submitting"
                    ? "bg-stone-100 text-slate-400 border-stone-100 cursor-not-allowed"
                    : "bg-slate-900 border-slate-900 text-white hover:bg-violet-600 hover:border-violet-600 shadow-md active:scale-98"
                }`}
              >
                {formStatus === "submitting" ? (
                  <>
                    <span className="w-4 h-4 border-2 border-slate-400 border-t-slate-800 rounded-full animate-spin inline-block mr-2" />
                    <span>Engaging Formspree Gateway...</span>
                  </>
                ) : (
                  <>
                    <Send className="w-4 h-4" />
                    <span>Send Message Securely</span>
                  </>
                )}
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}