Your Lovable contact form, minus the Supabase table

// src/components/ContactForm.tsx
// Works in TanStack Start projects (new Lovable apps) and older React + Vite ones.
import { useState } from "react";

const FORMBOLD_URL =
  import.meta.env.VITE_FORMBOLD_URL ?? "https://formbold.com/s/FORM_ID";

type Status = "idle" | "sending" | "done" | "failed";

export function ContactForm() {
  const [status, setStatus] = useState<Status>("idle");
  const [note, setNote] = useState("");

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formEl = event.currentTarget;
    setStatus("sending");

    try {
      const res = await fetch(FORMBOLD_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(Object.fromEntries(new FormData(formEl))),
      });
      const body = await res.json().catch(() => ({}));

      if (!res.ok) throw new Error(body.message || `Formbold returned ${res.status}`);
      formEl.reset();
      setNote(body.message || "Got it. We reply within one business day.");
      setStatus("done");
    } catch (err) {
      setNote(err instanceof Error ? err.message : "Could not send. Try again.");
      setStatus("failed");
    }
  }

  return (
    <form onSubmit={onSubmit} className="mx-auto grid max-w-lg gap-4">
      <input name="name" placeholder="Your name" required className="rounded-lg border px-3 py-2" />
      <input name="email" type="email" placeholder="[email protected]" required className="rounded-lg border px-3 py-2" />
      <textarea name="message" rows={5} placeholder="What do you need?" required className="rounded-lg border px-3 py-2" />
      <button disabled={status === "sending"} className="rounded-lg bg-black px-4 py-2 text-white disabled:opacity-50">
        {status === "sending" ? "Sending..." : "Send"}
      </button>
      <p aria-live="polite" className={status === "failed" ? "text-red-600" : "text-green-700"}>
        {status === "done" || status === "failed" ? note : ""}
      </p>
    </form>
  );
}