`apps/web/src/app/contact/ContactClient.tsx`

75 lines
"use client";

import { useState } from "react";

interface CommunityOption {
  id: string;
  name: string;
  city: string;
  state: string;
  builder: { name: string };
}

export default function ContactClient({ communities }: { communities: CommunityOption[] }) {
  const [form, setForm] = useState({ name: "", email: "", communityId: "", message: "" });
  const [state, setState] = useState<"idle" | "sending" | "done" | "error">("idle");

  return (
    <div className="mx-auto max-w-lg px-4 py-10">
      <h1 className="text-3xl font-bold">Contact a builder</h1>
      <p className="mt-2 text-sm text-neutral-600">
        Your inquiry goes to the builder's sales team for the community you pick. Demonstration build — no real
        builder receives anything.
      </p>
      {state === "done" ? (
        <div className="mt-6 rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-emerald-800">
          Request recorded. A builder representative would follow up.
        </div>
      ) : (
        <form
          className="mt-6 space-y-3"
          onSubmit={async (e) => {
            e.preventDefault();
            setState("sending");
            const res = await fetch("/api/leads", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                name: form.name,
                email: form.email,
                communityId: form.communityId || undefined,
                message: form.message || undefined,
              }),
            });
            setState(res.ok ? "done" : "error");
          }}
        >
          <input required placeholder="Name" value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
            className="w-full rounded border border-neutral-300 px-3 py-2" />
          <input required type="email" placeholder="Email" value={form.email}
            onChange={(e) => setForm({ ...form, email: e.target.value })}
            className="w-full rounded border border-neutral-300 px-3 py-2" />
          <select value={form.communityId} onChange={(e) => setForm({ ...form, communityId: e.target.value })}
            className="w-full rounded border border-neutral-300 px-3 py-2">
            <option value="">Any community</option>
            {communities.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name} — {c.city}, {c.state} ({c.builder.name})
              </option>
            ))}
          </select>
          <textarea placeholder="What would you like to know?" rows={4} value={form.message}
            onChange={(e) => setForm({ ...form, message: e.target.value })}
            className="w-full rounded border border-neutral-300 px-3 py-2" />
          <button type="submit" disabled={state === "sending"}
            className="w-full rounded-lg bg-teal-700 py-2.5 font-medium text-white hover:bg-teal-800 disabled:opacity-50">
            {state === "sending" ? "Sending…" : "Send inquiry"}
          </button>
          {state === "error" && <p className="text-sm text-red-600">Could not send — check the fields.</p>}
        </form>
      )}
    </div>
  );
}