`apps/web/src/app/homes/[id]/LeadForm.tsx`

60 lines
"use client";

import { useState } from "react";

export default function LeadForm({
  homeId,
  communityId,
  builderName,
}: {
  homeId: string;
  communityId: string;
  builderName: string;
}) {
  const [form, setForm] = useState({ name: "", email: "", phone: "", message: "" });
  const [state, setState] = useState<"idle" | "sending" | "done" | "error">("idle");

  if (state === "done") {
    return (
      <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800" data-testid="lead-done">
        Request sent. {builderName} (demonstration) would receive this inquiry.
      </div>
    );
  }

  return (
    <form
      className="rounded-xl border border-neutral-200 p-4 shadow-sm"
      onSubmit={async (e) => {
        e.preventDefault();
        setState("sending");
        const res = await fetch("/api/leads", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ ...form, phone: form.phone || undefined, message: form.message || undefined, homeId, communityId }),
        });
        setState(res.ok ? "done" : "error");
      }}
    >
      <h2 className="font-semibold">Request info or a tour</h2>
      <p className="mt-1 text-xs text-neutral-500">Sent to {builderName}. No obligation.</p>
      <div className="mt-3 space-y-2 text-sm">
        <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
          placeholder="Name" className="w-full rounded border border-neutral-300 px-2 py-1.5" data-testid="lead-name" />
        <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}
          placeholder="Email" className="w-full rounded border border-neutral-300 px-2 py-1.5" data-testid="lead-email" />
        <input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })}
          placeholder="Phone (optional)" className="w-full rounded border border-neutral-300 px-2 py-1.5" />
        <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}
          placeholder="Questions? Preferred tour time?" rows={3} className="w-full rounded border border-neutral-300 px-2 py-1.5" />
        <button type="submit" disabled={state === "sending"}
          className="w-full rounded-lg bg-teal-700 py-2 font-medium text-white hover:bg-teal-800 disabled:opacity-50"
          data-testid="lead-submit">
          {state === "sending" ? "Sending…" : "Contact builder"}
        </button>
        {state === "error" && <p className="text-red-600">Could not send — check the fields and try again.</p>}
      </div>
    </form>
  );
}