Contact forms for Same.new sites

"use client";
// app/contact/contact-form.tsx  (Same builds on Next.js by default)
// Remove the "use client" line only if you move this into the Pages Router.
import { useRef, useState } from "react";

export function ContactForm() {
  const formRef = useRef<HTMLFormElement>(null);
  const [pending, setPending] = useState(false);
  const [flash, setFlash] = useState<{ kind: "ok" | "err"; text: string }>();

  async function send(formData: FormData) {
    setPending(true);
    setFlash(undefined);
    try {
      const res = await fetch("https://formbold.com/s/FORM_ID", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(Object.fromEntries(formData)),
      });
      const json = await res.json().catch(() => ({}));
      if (res.ok) {
        formRef.current?.reset();
        setFlash({ kind: "ok", text: json.message ?? "Sent. Talk soon." });
      } else {
        setFlash({ kind: "err", text: json.message ?? "Formbold said no. Check the form ID." });
      }
    } catch {
      setFlash({ kind: "err", text: "Offline? The message was not sent." });
    } finally {
      setPending(false);
    }
  }

  return (
    <form
      ref={formRef}
      onSubmit={(e) => {
        e.preventDefault();
        send(new FormData(e.currentTarget));
      }}
      className="flex flex-col gap-3"
    >
      <input name="email" type="email" required placeholder="Email" className="border rounded px-3 py-2" />
      <input name="subject" required placeholder="Subject" className="border rounded px-3 py-2" />
      <textarea name="message" rows={4} required placeholder="Message" className="border rounded px-3 py-2" />
      <button type="submit" disabled={pending} className="rounded bg-black py-2 text-white">
        {pending ? "Sending..." : "Send"}
      </button>
      {flash && <p className={flash.kind === "ok" ? "text-green-700" : "text-red-700"}>{flash.text}</p>}
    </form>
  );
}