// contact.jsx — consultation intake (no calendar)
// Customer reaches out first with vehicle + goals + contact; we consult, then schedule.
// ─────────────────────────────────────────────────────────────
const { useState: useStateC, useMemo: useMemoC } = React;
// ─────────────────────────────────────── INTAKE FORM ──────────
function BookingFlow() {
const [step, setStep] = useStateC(0);
const [data, setData] = useStateC({
vehicle: "", year: "", color: "",
notes: "", goal: "", address: "",
name: "", contact: "", refer: "",
});
const [submitted, setSubmitted] = useStateC(false);
const [sending, setSending] = useStateC(false);
const [error, setError] = useStateC("");
const [ref, setRef] = useStateC("");
const set = (k, v) => setData(d => ({ ...d, [k]: v }));
// Submit to Netlify Forms. Encodes the intake as url-encoded form data and
// POSTs to the site root, where Netlify intercepts the "booking" form.
async function submitBooking() {
setSending(true);
setError("");
const refCode = Math.random().toString(36).slice(2, 8).toUpperCase();
const payload = {
"form-name": "booking",
"company": "", // honeypot, must stay empty
vehicle: data.vehicle, year: data.year, color: data.color,
address: data.address, notes: data.notes, goal: data.goal,
name: data.name, contact: data.contact, refer: data.refer,
ref: refCode,
};
const body = new URLSearchParams(payload).toString();
try {
const res = await fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body,
});
if (!res.ok) throw new Error("HTTP " + res.status);
setRef(refCode);
setSubmitted(true);
} catch (e) {
// Only a live Netlify deploy has the form backend. Anywhere else — local
// dev, the file:// protocol, or the editor preview sandbox — the POST 404s,
// so show a graceful demo confirmation. Real production failures (a genuine
// network drop on the live site) still surface the contact fallback.
const h = location.hostname;
const isDemoHost =
h === "localhost" || h === "127.0.0.1" ||
location.protocol === "file:" ||
h.endsWith(".claudeusercontent.com") ||
h.endsWith(".webcontainer.io") ||
h === "";
if (isDemoHost) {
setRef(refCode);
setSubmitted(true);
} else {
setError("Something went wrong sending your brief. Please email jewelthepaint@gmail.com or call (408) 987-5587.");
}
} finally {
setSending(false);
}
}
const steps = [
{ label: "Vehicle", key: "vehicle" },
{ label: "Goal", key: "goal" },
{ label: "Contact", key: "contact" },
{ label: "Review", key: "confirm" },
];
return (
§ 02 · START A CONSULTATION
Start a conversation.
Every car is different, so we begin with a conversation — not a
calendar. Tell us about the vehicle and what you're hoping for, and
we'll respond within two business days with a written brief. If we're
a good fit, we'll schedule an in-person inspection from there.
HOW IT WORKS
{[
["01", "You send the brief below"],
["02", "We reply within two business days"],
["03", "In-person inspection & quote"],
["04", "We schedule the correction"],
].map(([n, t]) => (