);
}
function CareersScreen({ go }) {
const [sent, setSent] = React.useState(false); // false | 'api' | 'mailto'
const [role, setRole] = React.useState('');
const [roles, setRoles] = React.useState(null); // null = loading
const [form, setForm] = React.useState({ name: '', email: '', link: '', cv: null, agree: false, company: '' });
const [errors, setErrors] = React.useState({});
const [submitting, setSubmitting] = React.useState(false);
const [serverError, setServerError] = React.useState('');
const [captchaToken, setCaptchaToken] = React.useState('');
const turnstileRef = React.useRef(null);
const widgetId = React.useRef(null);
const setField = (key) => (val) => setForm((f) => ({ ...f, [key]: val }));
// Render the Cloudflare Turnstile widget once its script is ready and the form
// is on screen. Re-runs when the form reappears after "Submit another".
React.useEffect(() => {
if (sent) return; // form not shown
let poll;
const render = () => {
const el = turnstileRef.current;
if (!window.turnstile || !el || el.dataset.rendered) return;
el.dataset.rendered = '1';
widgetId.current = window.turnstile.render(el, {
sitekey: TURNSTILE_SITE_KEY,
callback: (tok) => { setCaptchaToken(tok); setErrors((x) => ({ ...x, captcha: undefined })); },
'expired-callback': () => setCaptchaToken(''),
'error-callback': () => setCaptchaToken(''),
});
};
if (window.turnstile) render();
else poll = setInterval(() => { if (window.turnstile) { clearInterval(poll); render(); } }, 200);
return () => { if (poll) clearInterval(poll); };
}, [sent]);
// Turnstile tokens are single-use; reset the widget after a failed submit.
function resetCaptcha() {
setCaptchaToken('');
if (window.turnstile && widgetId.current !== null) {
try { window.turnstile.reset(widgetId.current); } catch (e) { /* ignore */ }
}
}
React.useEffect(() => {
let cancelled = false;
loadRoles()
.then((r) => { if (!cancelled) { setRoles(r); if (r[0]) setRole(r[0].name); } })
.catch(() => { if (!cancelled) setRoles([]); });
return () => { cancelled = true; };
}, []);
function apply(roleName) {
setRole(roleName);
setErrors((e) => ({ ...e, role: undefined }));
setSent(false);
const f = document.getElementById('apply-form');
if (f) { const y = f.getBoundingClientRect().top + window.scrollY - 100; window.scrollTo({ top: y, behavior: 'smooth' }); }
}
// Build the formatted plain-text body shared by API and mailto paths.
function buildBody() {
return [
'New application via maddyielabs.com',
'',
'Name: ' + form.name.trim(),
'Email: ' + form.email.trim(),
'Role: ' + role,
'Work: ' + form.link.trim(),
'CV: ' + (form.cv ? form.cv.name : '—'),
'',
'Confirmed they have read our hiring approach: yes',
'',
'— Sent from the Maddyie Labs careers page',
].join('\n');
}
function openMailto() {
const subject = `Application — ${role} — ${form.name.trim()}`;
const body = buildBody() + '\n\n(Please attach your CV file to this email before sending.)';
window.location.href = `mailto:${APPLICATION_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}
// Validate every field (all mandatory), then POST to the backend. If the
// backend is unreachable (static hosting / file export), fall back to mailto.
async function handleSubmit(e) {
if (e && e.preventDefault) e.preventDefault();
setServerError('');
// Honeypot: a real user never fills this hidden field.
if (form.company) { setSent('api'); return; }
const errs = {};
if (!form.name.trim()) errs.name = 'Please enter your name.';
if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email.trim())) errs.email = 'Please enter a valid email address.';
if (!role) errs.role = 'Please choose a role.';
if (!form.link.trim()) errs.link = 'Please share a link to something you have built.';
if (!form.cv) errs.cv = 'Please attach your CV.';
if (!form.agree) errs.agree = 'Please confirm you have read this.';
if (!captchaToken) errs.captcha = 'Please complete the verification below.';
setErrors(errs);
if (Object.keys(errs).length) return;
setSubmitting(true);
try {
const fd = new FormData();
fd.append('name', form.name.trim());
fd.append('email', form.email.trim());
fd.append('role', role);
fd.append('link', form.link.trim());
fd.append('agree', 'yes');
fd.append('company', form.company); // honeypot, server also checks
fd.append('cv', form.cv, form.cv.name);
fd.append('cf-turnstile-response', captchaToken);
const res = await fetch(API_BASE + '/api/apply', { method: 'POST', body: fd });
if (!res.ok) {
let msg = 'Something went wrong sending your application.';
try { const j = await res.json(); if (j && j.error) msg = j.error; } catch (e2) {}
throw new Error(msg);
}
setSent('api');
} catch (err) {
// Turnstile tokens are single-use — reset so a retry gets a fresh one.
resetCaptcha();
// No backend reachable -> graceful mailto fallback. A genuine server
// error (4xx with message) is surfaced instead of silently falling back.
if (err && /\b(4\d\d|5\d\d)\b/.test(String(err.message)) === false && err.message && err.message !== 'Failed to fetch') {
// server responded with an explicit error message
if (err.message.indexOf('went wrong') === -1) { setServerError(err.message); setSubmitting(false); return; }
}
openMailto();
setSent('mailto');
} finally {
setSubmitting(false);
}
}
return (
{/* Header */}
Hiring
We hire for proof of ability, not just symbols of ability.
A high bar is not the same as a narrow gate. We care about what people can build, how they think, how they learn, and whether they can be trusted with hard problems.
{/* Ethos points */}
{[
['Demonstrated ability', 'What have you built? What have you learned? We care about the person behind the paper.'],
['Learning velocity', 'Some of the best people are self-taught. Curiosity and growth count for a great deal.'],
['Judgement & integrity', 'Can you act with ownership, communicate clearly, and persevere when things get hard?'],
].map(([t, d]) => (
{t}
{d}
))}
{/* Open roles — loaded from roles/*.md */}
{roles === null ? (
Loading roles…
) : roles.length === 0 ? (
No open roles right now — but we always read speculative applications.