/* Chameleon Space — sections C: how it works, apply form. */
const CSC = window.ChameleonSpaceDesignSystem_1abbe1;
const { Button: BtnC, Card: CardC, Eyebrow: EyebrowC, Input, Textarea, Checkbox, Banner } = CSC;
/* ---------- HOW IT WORKS ---------- */
const STEPS = [
{ n: "01", title: "Tell us about you.", body: "A short note: who you are, what you are working on, and why this space. That is the whole application." },
{ n: "02", title: "Come share a coffee.", body: "We read every word, then invite the people who fit for a tour and a real conversation. Come exactly as you are." },
{ n: "03", title: "Pick your start date.", body: "If it is a match, you are in, and the space is yours. Welcome home." },
];
function HowItWorks() {
return (
{STEPS.map((s, i) => (
{s.n}
{s.title}
{s.body}
))}
We read every single one. Promise.
);
}
/* ---------- APPLY ---------- */
const APPLY_ENDPOINT = "/api/apply";
function Apply() {
const [sent, setSent] = React.useState(false);
const [first, setFirst] = React.useState("");
const [schol, setSchol] = React.useState(false);
const [sending, setSending] = React.useState(false);
const [error, setError] = React.useState("");
const started = React.useRef(false);
const onFirstFocus = () => {
if (started.current) return;
started.current = true;
(window.dataLayer = window.dataLayer || []).push({ event: "application_start", form_id: "membership_apply" });
};
const submit = async (e) => {
e.preventDefault();
if (sending) return;
const form = e.target;
const fd = new FormData(form);
const payload = {
first_name: fd.get("first_name") || "",
last_name: fd.get("last_name") || "",
email: fd.get("email") || "",
linkedin: fd.get("linkedin") || "",
portfolio: fd.get("portfolio") || "",
working_on: fd.get("working_on") || "",
why_now: fd.get("why_now") || "",
collaborators: fd.get("collaborators") || "",
contribution: fd.get("contribution") || "",
scholarship: fd.get("scholarship") === "on",
scholarship_project: fd.get("scholarship_project") || "",
cs_hp: fd.get("cs_hp") || "", // honeypot
};
// Client-side validation (the design-system Input only draws the "*", it
// doesn't enforce native `required`, so we check here for inline feedback).
const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(payload.email);
const checks = [
[!payload.first_name, "Please enter your first name.", "first_name"],
[!payload.last_name, "Please enter your last name.", "last_name"],
[!emailOk, "Please enter a valid email.", "email"],
[!payload.linkedin, "Please add your LinkedIn.", "linkedin"],
];
const problem = checks.find(([bad]) => bad);
if (problem) {
setError(problem[1]);
const el = form.querySelector(`[name="${problem[2]}"]`);
if (el) el.focus();
return;
}
setError("");
setSending(true);
try {
const res = await fetch(APPLY_ENDPOINT, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
const data = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(data.error || "Something went wrong on our end.");
// Conversion event for Google Tag Manager. No PII — just the signal,
// whether a scholarship was requested, and the application id (for dedup).
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "application_submitted",
form_id: "membership_apply",
scholarship_requested: payload.scholarship,
application_id: data.id || undefined,
});
setSent(true);
window.requestAnimationFrame(() => {
const el = document.getElementById("apply-confirm");
if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
});
} catch (err) {
setError(
(err && err.message) ||
"We couldn't send that just now. Try again, or email us at hello@chameleon.space."
);
} finally {
setSending(false);
}
};
return (
Apply
Knock, and tell us who you are.
Every member comes in through this little form. Write us a few honest lines. We read every one and answer within a week, often with an invitation to come see the place.
{sent ? (
We are glad you knocked. Give us about a week and watch your inbox for an invitation to come see the place.
{ setSent(false); setSchol(false); setFirst(""); setError(""); }}>Send another// we read every single one