/* global React, ObsidianGraph */
/* ============================================================
Contact / Start a project — multi-step form
------------------------------------------------------------
4-pane horizontal slide:
0 KIND — what kind of project (radio cards)
1 SHAPE — timeline + budget (radio chips)
2 DETAILS — name, email, freeform message
3 SENT — confirmation
Header shows step pips + the alt "channels" (email / studio).
============================================================ */
const META_C = {
fontFamily: "'Geist Mono', ui-monospace, monospace",
fontSize: 11, fontWeight: 500,
letterSpacing: "0.18em", textTransform: "uppercase",
};
const TEXT_C = "#fff";
const TEXT_C_SOFT = "rgba(255,255,255,0.78)";
const TEXT_C_MUTE = "rgba(255,255,255,0.55)";
const TEXT_C_DEEP = "rgba(255,255,255,0.35)";
const RULE_C = "1px solid rgba(255,255,255,0.10)";
const KINDS = [
{ id: "website", icon: "◇", label: "Website", sub: "Marketing, editorial, e-commerce, booking" },
{ id: "app", icon: "◈", label: "Web app / dashboard", sub: "Internal tools, portals, reporting" },
{ id: "automation", icon: "◉", label: "Automation", sub: "Pipelines, integrations, scheduled jobs" },
{ id: "infra", icon: "◎", label: "Infrastructure", sub: "Hosting, deploys, monitoring" },
{ id: "unsure", icon: "◌", label: "Not sure yet", sub: "Let's start with a conversation" },
];
const TIMELINES = ["This month", "1–3 months", "3–6 months", "Just exploring"];
const BUDGETS = ["Under 10k", "10–25k", "25–50k", "50k+", "Not sure"];
/* ------------------------------------------------------------
Form delivery config
------------------------------------------------------------
Point FORM_ENDPOINT at a form backend (Formspree, a Vercel
serverless function, Resend proxy, etc.) and submissions POST
there as JSON. Leave it empty and the form gracefully falls
back to composing a pre-filled email to the studio — so the
form is never a dead end, even before a backend is wired up.
------------------------------------------------------------ */
const FORM_ENDPOINT = ""; // e.g. "https://formspree.io/f/abcdwxyz"
const STUDIO_EMAIL = "studio@ovlk.tech";
function buildMailto({ kind, timeline, budget, name, email, details }) {
const k = KINDS.find((x) => x.id === kind);
const subject = `Project enquiry — ${k ? k.label : "OVLK Tech"}`;
const body = [
`Name: ${name || "—"}`,
`Email: ${email || "—"}`,
`Kind: ${k ? k.label : "—"}`,
`Timeline: ${timeline || "—"}`,
`Budget: ${budget || "—"}`,
"",
"Details:",
details || "—",
].join("\n");
return `mailto:${STUDIO_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}
function ContactSection({ density, accent }) {
const py = density === "compact" ? 120 : 180;
return (
);
}
/* ============================================================
ProjectForm — the multi-step intake form. Lives on its own
page (Start a project.html). Hosts the same Kind / Shape /
Details / Sent flow that used to live in ContactSection.
============================================================ */
function ProjectForm({ accent }) {
const [step, setStep] = React.useState(0);
const [kind, setKind] = React.useState(null);
const [timeline, setTimeline] = React.useState(null);
const [budget, setBudget] = React.useState(null);
const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [details, setDetails] = React.useState("");
const [sending, setSending] = React.useState(false);
const [error, setError] = React.useState(null);
const [viaEmail, setViaEmail] = React.useState(false);
const stepNames = ["Kind", "Shape", "Details", "Sent"];
const canAdvance = (() => {
if (step === 0) return kind != null;
if (step === 1) return timeline != null && budget != null;
if (step === 2) return name.trim() && /.+@.+\..+/.test(email);
return true;
})();
async function submit() {
const payload = { kind, timeline, budget, name, email, details, source: "ovlk.tech /start" };
setSending(true);
setError(null);
try {
if (FORM_ENDPOINT) {
const res = await fetch(FORM_ENDPOINT, {
method: "POST",
headers: { "Content-Type": "application/json", "Accept": "application/json" },
body: JSON.stringify(payload),
});
if (!res.ok) throw new Error(`Request failed (${res.status})`);
setViaEmail(false);
} else {
// No backend wired up yet — hand off to the user's email client
window.location.href = buildMailto(payload);
setViaEmail(true);
}
setSending(false);
setStep(3);
} catch (e) {
setSending(false);
setError(`Couldn't send that just now — please email ${STUDIO_EMAIL} directly.`);
}
}
function next() {
if (!canAdvance || sending) return;
if (step === 2) { submit(); }
else { setStep((s) => Math.min(3, s + 1)); }
}
function back() { setStep((s) => Math.max(0, s - 1)); }
function reset() {
setStep(0); setKind(null); setTimeline(null); setBudget(null);
setName(""); setEmail(""); setDetails(""); setError(null); setViaEmail(false);
}
return (
{/* Step header */}
{String(Math.min(step + 1, stepNames.length)).padStart(2, "0")}
//
{stepNames[step]}
{stepNames.map((_, i) => (
))}
{/* Step body */}
{step === 0 && (
)}
{step === 1 && (
)}
{step === 2 && (
)}
{step === 3 && (
)}
{/* Error banner */}
{error && step < 3 && (
)}
{/* Step footer */}
{step < 3 && (
{step + 1} / {stepNames.length}
{sending ? "Sending" : (step === 2 ? "Send" : "Next")}
)}
What kind of project?
{KINDS.map((k, i) => {
const isSel = kind === k.id;
return (
);
})}
);
}
/* ---------- Step 2: Shape ---------- */
function StepShape({ timeline, setTimeline, budget, setBudget, accent }) {
return (
Timeline
{TIMELINES.map((t) => (
setTimeline(t)} accent={accent}>{t}
))}
Budget (USD)
{BUDGETS.map((b) => (
setBudget(b)} accent={accent}>{b}
))}
Rough range only — we'll shape the actual scope with you. We bill by the week
and you can pause anytime.
);
}
function Chip({ active, onClick, accent, children }) {
return (
);
}
/* ---------- Step 3: Details ---------- */
function StepDetails({ name, setName, email, setEmail, details, setDetails, accent }) {
return (
setName(e.target.value)}
placeholder="Your name"
style={inputStyle(accent)} />
setEmail(e.target.value)}
placeholder="you@business.com" type="email"
style={inputStyle(accent)} />