Contact Form Component Builder

"use client";

import React, { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus("submitting");

    const formData = new FormData(e.currentTarget);

    try {
      const res = await fetch("https://catchapi.byzo.cc/f/demo_endpoint", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: formData,
      });

      if (res.ok) {
        setStatus("success");
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  };

  if (status === "success") {
    return (
      <div className="rounded-2xl border border-zinc-800 bg-zinc-900/60 p-8 text-center text-zinc-100">
        <h3 className="text-xl font-bold">Thank you!</h3>
        <p className="text-xs text-zinc-400 mt-2">Your submission has been received. We will get back to you shortly.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="max-w-md mx-auto rounded-2xl border border-zinc-800 bg-zinc-900/60 p-6 sm:p-8 space-y-4 shadow-2xl">
      <h2 className="text-xl font-bold text-white mb-2">Get in touch with our team</h2>
      
      <div>
        <label className="block text-xs font-semibold text-zinc-300 mb-1.5">Full Name *</label>
        <input
          type="text"
          name="name"
          required={true}
          placeholder="Alex Turner"
          className="w-full h-11 rounded-xl border border-zinc-800 bg-zinc-950/70 px-3.5 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
        />
      </div>

      <div>
        <label className="block text-xs font-semibold text-zinc-300 mb-1.5">Work Email *</label>
        <input
          type="email"
          name="email"
          required={true}
          placeholder="alex@company.com"
          className="w-full h-11 rounded-xl border border-zinc-800 bg-zinc-950/70 px-3.5 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
        />
      </div>

      <div>
        <label className="block text-xs font-semibold text-zinc-300 mb-1.5">Subject</label>
        <input
          type="text"
          name="subject"
          required={false}
          placeholder="Project Inquiry"
          className="w-full h-11 rounded-xl border border-zinc-800 bg-zinc-950/70 px-3.5 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
        />
      </div>

      <div>
        <label className="block text-xs font-semibold text-zinc-300 mb-1.5">Message *</label>
        <textarea
          name="message"
          required={true}
          placeholder="How can we help you?"
          rows={4}
          className="w-full rounded-xl border border-zinc-800 bg-zinc-950/70 p-3 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
        />
      </div>

      {/* Invisible Honeypot */}
      <input type="text" name="_gotcha" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />

      <button
        type="submit"
        disabled={status === "submitting"}
        className="w-full h-11 rounded-xl bg-white text-zinc-950 font-semibold text-sm hover:bg-zinc-200 transition-colors disabled:opacity-50"
      >
        {status === "submitting" ? "Sending..." : "Submit Form"}
      </button>

      {status === "error" && (
        <p className="text-xs text-red-400 text-center">Failed to deliver submission. Please try again.</p>
      )}
    </form>
  );
}