A Meku contact form that sends on day one

// src/components/ContactForm.jsx  (Meku projects are React + Tailwind on Vite)
import { useState } from "react";

const FORMBOLD = "https://formbold.com/s/FORM_ID";

export default function ContactForm() {
  const [phase, setPhase] = useState("idle"); // idle | sending | sent | error
  const [errorText, setErrorText] = useState("");

  const onSubmit = async (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    setPhase("sending");
    setErrorText("");

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

      if (res.ok) {
        form.reset();
        setPhase("sent");
        return;
      }
      const data = await res.json().catch(() => ({}));
      setErrorText(data.message || "Formbold rejected the request.");
      setPhase("error");
    } catch {
      setErrorText("No connection. Please try again.");
      setPhase("error");
    }
  };

  if (phase === "sent") {
    return (
      <div className="rounded-2xl bg-emerald-50 p-6 text-emerald-800">
        Thanks for reaching out. Your message is in our inbox.
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-4 rounded-2xl bg-white p-6 shadow">
      <input name="name" required placeholder="Name" className="rounded-xl border px-4 py-3" />
      <input name="email" type="email" required placeholder="Email" className="rounded-xl border px-4 py-3" />
      <select name="topic" className="rounded-xl border px-4 py-3">
        <option>General question</option>
        <option>Project quote</option>
        <option>Support</option>
      </select>
      <textarea name="message" rows={5} required placeholder="Tell us a bit more" className="rounded-xl border px-4 py-3" />
      <button disabled={phase === "sending"} className="rounded-xl bg-slate-900 py-3 font-medium text-white disabled:opacity-60">
        {phase === "sending" ? "Sending..." : "Send message"}
      </button>
      {phase === "error" && <p className="text-sm text-red-600">{errorText}</p>}
    </form>
  );
}