Make the v0 contact form send for real

"use client";
// components/contact-section.tsx  (Next.js + shadcn/ui, the way v0 scaffolds it)
import { useState, type FormEvent } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

const endpoint =
  process.env.NEXT_PUBLIC_FORMBOLD_ENDPOINT ?? "https://formbold.com/s/FORM_ID";

export default function ContactSection() {
  const [state, setState] = useState<"ready" | "posting" | "ok" | "fail">("ready");

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const el = e.currentTarget;
    setState("posting");
    try {
      const r = await fetch(endpoint, {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify(Object.fromEntries(new FormData(el))),
      });
      if (!r.ok) throw new Error(String(r.status));
      el.reset();
      setState("ok");
    } catch {
      setState("fail");
    }
  }

  return (
    <form onSubmit={submit} className="grid gap-4 max-w-md">
      <div className="grid gap-2">
        <Label htmlFor="cs-email">Work email</Label>
        <Input id="cs-email" name="email" type="email" required />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="cs-company">Company</Label>
        <Input id="cs-company" name="company" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="cs-msg">How can we help?</Label>
        <Textarea id="cs-msg" name="message" required />
      </div>
      <Button type="submit" disabled={state === "posting"}>
        {state === "posting" ? "Sending..." : "Talk to us"}
      </Button>
      {state === "ok" && <p className="text-sm text-green-600">Thanks. A real person reads every message.</p>}
      {state === "fail" && <p className="text-sm text-destructive">Sending failed. Email us directly instead.</p>}
    </form>
  );
}