/* * Audit Me - landing page * Reimplemented from the Claude Design export "AuditMe.dc.html". * State model, copy, styling and interactions mirror the original DC component. */ const INK = '#16233F'; const CREAM = '#F5F1E8'; const RED = '#F0505E'; const YELLOW = '#F2C94C'; const MONO = "'IBM Plex Mono', monospace"; const DISPLAY = "'Montserrat', sans-serif"; const BODY = "'Public Sans', sans-serif"; // Apply admin-editable SEO to the document head at runtime. Note: this updates // the browser title + tags for users and JS-running crawlers (Google); social // scrapers read the static in index.html (change that via redeploy). function setMetaTag(attr, key, content) { if (content == null || content === '') return; let el = document.head.querySelector('meta[' + attr + '="' + key + '"]'); if (!el) { el = document.createElement('meta'); el.setAttribute(attr, key); document.head.appendChild(el); } el.setAttribute('content', content); } function applySeo(seo) { if (!seo) return; if (seo.title) document.title = seo.title; setMetaTag('name', 'description', seo.description); setMetaTag('name', 'keywords', seo.keywords); setMetaTag('property', 'og:title', seo.og_title || seo.title); setMetaTag('property', 'og:description', seo.og_description || seo.description); setMetaTag('property', 'og:image', seo.og_image); setMetaTag('name', 'twitter:title', seo.og_title || seo.title); setMetaTag('name', 'twitter:description', seo.og_description || seo.description); setMetaTag('name', 'twitter:image', seo.og_image); } // Heuristic eligibility check on the free-text location: is it in the US or Canada? // Matches a country name, a US state, or a Canadian province (full name or code). function isUSorCanada(loc) { const norm = ' ' + String(loc || '').toLowerCase().replace(/[^a-z]+/g, ' ').replace(/\s+/g, ' ').trim() + ' '; const tokens = norm.trim() ? norm.trim().split(' ') : []; const has = (arr) => arr.some((t) => tokens.indexOf(t) !== -1); // Country signals const countryPhrases = [' usa ', ' u s a ', ' u s ', ' united states ', ' america ', ' canada ']; if (countryPhrases.some((p) => norm.indexOf(p) !== -1)) return true; if (has(['us', 'usa', 'can', 'canada', 'america'])) return true; // US state + Canadian province 2-letter codes const codes = ['al', 'ak', 'az', 'ar', 'ca', 'co', 'ct', 'de', 'fl', 'ga', 'hi', 'id', 'il', 'in', 'ia', 'ks', 'ky', 'la', 'me', 'md', 'ma', 'mi', 'mn', 'ms', 'mo', 'mt', 'ne', 'nv', 'nh', 'nj', 'nm', 'ny', 'nc', 'nd', 'oh', 'ok', 'or', 'pa', 'ri', 'sc', 'sd', 'tn', 'tx', 'ut', 'vt', 'va', 'wa', 'wv', 'wi', 'wy', 'dc', 'on', 'qc', 'bc', 'ab', 'mb', 'sk', 'ns', 'nb', 'nl', 'pe', 'pei', 'nt', 'yt', 'nu']; if (has(codes)) return true; // US state + Canadian province full names (multi-word supported) const names = ['alabama', 'alaska', 'arizona', 'arkansas', 'california', 'colorado', 'connecticut', 'delaware', 'florida', 'georgia', 'hawaii', 'idaho', 'illinois', 'indiana', 'iowa', 'kansas', 'kentucky', 'louisiana', 'maine', 'maryland', 'massachusetts', 'michigan', 'minnesota', 'mississippi', 'missouri', 'montana', 'nebraska', 'nevada', 'new hampshire', 'new jersey', 'new mexico', 'new york', 'north carolina', 'north dakota', 'ohio', 'oklahoma', 'oregon', 'pennsylvania', 'rhode island', 'south carolina', 'south dakota', 'tennessee', 'texas', 'utah', 'vermont', 'virginia', 'washington', 'west virginia', 'wisconsin', 'wyoming', 'ontario', 'quebec', 'british columbia', 'alberta', 'manitoba', 'saskatchewan', 'nova scotia', 'new brunswick', 'newfoundland', 'labrador', 'prince edward island', 'northwest territories', 'yukon', 'nunavut']; if (names.some((n) => norm.indexOf(' ' + n + ' ') !== -1)) return true; return false; } // ---- Video upload limits ---- const MAX_VIDEO_MB = 100; // standard max file size const MAX_VIDEO_SECONDS = 90; // max duration const MAX_VIDEO_LONG = 1920; // Full HD (1080p) long edge const MAX_VIDEO_SHORT = 1080; // Full HD short edge // Validate a chosen video against the limits. Resolves { ok, error }. function validateVideoFile(file) { return new Promise((resolve) => { if (!file) return resolve({ ok: false, error: 'Please choose a video file.' }); const mb = file.size / (1024 * 1024); if (mb > MAX_VIDEO_MB) { return resolve({ ok: false, error: 'Video is too large (' + mb.toFixed(0) + ' MB). Maximum is ' + MAX_VIDEO_MB + ' MB.' }); } const url = URL.createObjectURL(file); const v = document.createElement('video'); v.preload = 'metadata'; let done = false; const finish = (res) => { if (done) return; done = true; try { URL.revokeObjectURL(url); } catch (_) {} resolve(res); }; const timer = setTimeout(() => finish({ ok: false, error: "Couldn't read this video. Please try a different file (MP4 recommended)." }), 15000); v.onloadedmetadata = () => { clearTimeout(timer); const dur = v.duration; const w = v.videoWidth || 0, h = v.videoHeight || 0; const longEdge = Math.max(w, h), shortEdge = Math.min(w, h); if (Number.isFinite(dur) && dur > MAX_VIDEO_SECONDS + 0.5) { return finish({ ok: false, error: 'Video is too long (' + Math.round(dur) + 's). Maximum is ' + MAX_VIDEO_SECONDS + ' seconds.' }); } if (longEdge && (longEdge > MAX_VIDEO_LONG || shortEdge > MAX_VIDEO_SHORT)) { return finish({ ok: false, error: 'Video resolution is too high (' + w + '×' + h + '). Maximum is Full HD (1080p).' }); } finish({ ok: true }); }; v.onerror = () => { clearTimeout(timer); finish({ ok: false, error: "Couldn't read this video. Please try a different file (MP4 recommended)." }); }; v.src = url; }); } // Supabase client for uploading the applicant's video directly to storage. const _pubCfg = window.PUBLIC_CONFIG || {}; const sbPublic = (window.supabase && _pubCfg.SUPABASE_URL && _pubCfg.SUPABASE_ANON_KEY) ? window.supabase.createClient(_pubCfg.SUPABASE_URL, _pubCfg.SUPABASE_ANON_KEY) : null; // ---- shared style fragments ------------------------------------------------- const btnBase = { fontFamily: MONO, fontWeight: 700, borderRadius: 999, cursor: 'pointer', border: 'none', }; const btnPrimary = { ...btnBase, background: RED, color: CREAM }; const btnDark = { ...btnBase, background: INK, color: CREAM }; const btnGhost = { ...btnBase, background: 'transparent', color: INK, border: '2px solid ' + INK }; const h2Style = { fontFamily: DISPLAY, fontWeight: 900, fontSize: 'clamp(36px,6vw,64px)', textTransform: 'uppercase', }; const sectionPad = 'clamp(56px,9vw,80px) clamp(16px,5vw,64px)'; const dottedBg = { backgroundImage: 'radial-gradient(rgba(22,35,63,0.05) 1px, transparent 1px), repeating-linear-gradient(to bottom, transparent 0 39px, rgba(22,35,63,0.07) 39px 40px)', backgroundSize: '3px 3px, 100% 40px', }; class App extends React.Component { constructor(props) { super(props); this.rootRef = React.createRef(); this.reducedMotion = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; this.hasStartedCount = false; this.state = { revealedIds: {}, revealedPhrases: { r1: false, r2: false }, activeStep: null, completedSteps: [false, false, false, false], countValue: 0, showStamp: false, pastHero: false, footerVisible: false, barDismissed: false, formStep: 1, openFaq: null, submitted: false, submitting: false, submitStatus: '', submitError: '', videoError: '', videoChecking: false, disqualified: false, form: { over18Yes: false, over18No: false, eligibleYes: false, eligibleNo: false, name: '', email: '', phone: '', location: '', handle: '', summary: '', story: '', videoFileName: '', roastYes: false, roastNo: false, offLimits: '', anythingElse: '', consent: false, }, errors: {}, social: { instagram: '', x: '', youtube: '', tiktok: '' }, socialIcons: {}, }; } // Social links, custom icons and SEO are editable from the admin panel. loadSocialLinks() { const cfg = window.PUBLIC_CONFIG || {}; if (!cfg.SUPABASE_URL || !cfg.SUPABASE_ANON_KEY) return; // not configured - keep defaults fetch(cfg.SUPABASE_URL.replace(/\/+$/, '') + '/rest/v1/settings?key=in.(social_links,social_icons,seo)&select=key,value', { headers: { apikey: cfg.SUPABASE_ANON_KEY, Authorization: 'Bearer ' + cfg.SUPABASE_ANON_KEY }, }) .then((r) => (r.ok ? r.json() : null)) .then((rows) => { if (!rows) return; const byKey = {}; rows.forEach((r) => { byKey[r.key] = r.value; }); this.setState((s) => ({ social: Object.assign({}, s.social, byKey.social_links || {}), socialIcons: Object.assign({}, s.socialIcons, byKey.social_icons || {}), })); if (byKey.seo) applySeo(byKey.seo); }) .catch(() => { /* non-critical */ }); } componentDidMount() { this.loadSocialLinks(); const root = this.rootRef.current; if (!root) return; const revealObs = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const id = entry.target.getAttribute('data-reveal-id'); if (id) { this.setState((s) => ({ revealedIds: { ...s.revealedIds, [id]: true } })); revealObs.unobserve(entry.target); } } }); }, { threshold: 0.2 }); root.querySelectorAll('[data-reveal-id]').forEach((el) => revealObs.observe(el)); this.revealObs = revealObs; const heroEl = root.querySelector('[data-hero-sentinel]'); if (heroEl) { this.heroObs = new IntersectionObserver((entries) => { entries.forEach((entry) => { const past = !entry.isIntersecting && entry.boundingClientRect.top < 0; this.setState({ pastHero: past }); }); }, { threshold: 0 }); this.heroObs.observe(heroEl); } const countEl = root.querySelector('[data-count-sentinel]'); if (countEl) { this.countObs = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting && !this.hasStartedCount) { this.hasStartedCount = true; this.animateCount(); this.countObs.disconnect(); } }); }, { threshold: 0.4 }); this.countObs.observe(countEl); } const stepEls = root.querySelectorAll('[data-step-index]'); if (stepEls.length) { this.stepObs = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const idx = parseInt(entry.target.getAttribute('data-step-index'), 10); this.setState((s) => ({ completedSteps: s.completedSteps.map((v, i) => i <= idx) })); } }); }, { threshold: 0.5, rootMargin: '-35% 0px -35% 0px' }); stepEls.forEach((el) => this.stepObs.observe(el)); } const footerEl = root.querySelector('[data-footer-sentinel]'); if (footerEl) { this.footerObs = new IntersectionObserver((entries) => { entries.forEach((entry) => this.setState({ footerVisible: entry.isIntersecting })); }, { threshold: 0 }); this.footerObs.observe(footerEl); } } componentWillUnmount() { ['revealObs', 'heroObs', 'countObs', 'stepObs', 'footerObs'].forEach((k) => { if (this[k]) this[k].disconnect(); }); } animateCount() { if (this.reducedMotion) { this.setState({ countValue: 500, showStamp: true }); return; } const duration = 1100; const start = performance.now(); const tick = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); this.setState({ countValue: Math.round(eased * 500) }); if (t < 1) requestAnimationFrame(tick); else setTimeout(() => this.setState({ showStamp: true }), 150); }; requestAnimationFrame(tick); } scrollTo(id) { const el = document.getElementById(id); if (!el) return; if (typeof window.smoothScrollTo === 'function') { const y = el.getBoundingClientRect().top + window.scrollY; window.smoothScrollTo(y); } else { el.scrollIntoView({ behavior: this.reducedMotion ? 'auto' : 'smooth', block: 'start' }); } } updateField(field, value) { this.setState((s) => ({ form: { ...s.form, [field]: value }, errors: { ...s.errors, [field]: false } })); } setBoolField(yesField, noField, val) { this.setState((s) => ({ form: { ...s.form, [yesField]: val === 'yes', [noField]: val === 'no' }, errors: { ...s.errors, [yesField.replace('Yes', '')]: false }, })); } validateStep1() { const f = this.state.form; const errors = {}; if (!f.over18Yes && !f.over18No) errors.over18 = true; if (!f.eligibleYes && !f.eligibleNo) errors.eligible = true; this.setState({ errors }); if (Object.keys(errors).length) return false; if (f.over18No || f.eligibleNo) { this.setState({ disqualified: true }); return false; } return true; } validateStep2() { const f = this.state.form; const errors = {}; if (!f.name.trim()) errors.name = true; if (!/^\S+@\S+\.\S+$/.test(f.email)) errors.email = true; if (!f.phone.trim()) errors.phone = true; if (!f.location.trim()) errors.location = true; this.setState({ errors }); if (Object.keys(errors).length) return false; // Location must be in the US or Canada. //if (!isUSorCanada(f.location)) { this.setState({ disqualified: true }); return false; } return true; } validateStep3() { const f = this.state.form; const errors = {}; if (!f.summary.trim()) errors.summary = true; if (!f.story.trim()) errors.story = true; this.setState({ errors }); return Object.keys(errors).length === 0; } validateStep4() { const ok = !!this.state.form.videoFileName; this.setState({ errors: { videoFile: !ok } }); return ok; } validateStep5() { const f = this.state.form; const errors = {}; if (!f.roastYes && !f.roastNo) errors.roast = true; this.setState({ errors }); return Object.keys(errors).length === 0; } validateStep6() { const ok = this.state.form.consent; this.setState({ errors: { consent: !ok } }); return ok; } submitForm() { if (this.state.submitting) return; if (!this.validateStep6()) return; this.setState({ submitting: true, submitError: '', submitStatus: '' }); this._runSubmit(); } async _runSubmit() { try { // Upload the video first (so the admin can download it later); we send // only its storage path onward. Cloudflare R2 is used when configured // (server returns a presigned PUT); otherwise fall back to Supabase. let videoPath = null; const file = this._videoFile; if (file) { this.setState({ submitStatus: 'Uploading video…' }); let usedR2 = false; try { const r = await fetch('/api/video-upload-url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ filename: file.name, contentType: file.type || 'video/mp4' }), }); if (r.ok) { const { url, key } = await r.json(); const put = await fetch(url, { method: 'PUT', body: file, headers: { 'Content-Type': file.type || 'video/mp4' } }); if (!put.ok) throw new Error('Video upload failed (' + put.status + ').'); videoPath = 'r2:' + key; usedR2 = true; } // non-OK (e.g. 501 not configured) → fall through to Supabase } catch (e) { if (usedR2) throw e; // R2 was in use and genuinely failed // R2 was offered but the direct PUT failed (usually a missing CORS // rule on the bucket for this origin) - fall back to Supabase. console.warn('[audit-me] R2 upload unavailable, using Supabase instead:', (e && e.message) || e); } if (!usedR2 && sbPublic) { const safe = file.name.replace(/[^\w.\-]+/g, '_').slice(-80); const path = 'applications/' + Date.now() + '-' + Math.random().toString(36).slice(2, 8) + '-' + safe; const { error: upErr } = await sbPublic.storage .from('application-videos') .upload(path, file, { contentType: file.type || 'video/mp4', upsert: false }); if (upErr) throw new Error('Video upload failed: ' + upErr.message); videoPath = path; } } this.setState({ submitStatus: 'Submitting…' }); const payload = Object.assign({}, this.state.form, { video_path: videoPath }); const res = await fetch('/api/apply', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); if (!res.ok) { const body = await res.json().catch(() => ({})); throw new Error(body.error || ('Request failed (' + res.status + ').')); } // Success → send the applicant to the dedicated thank-you page. window.location.href = '/thank-you'; } catch (err) { this.setState({ submitting: false, submitStatus: '', submitError: (err && err.message) || 'Something went wrong. Please try again.', }); } } render() { const s = this.state; const f = s.form; const revealed = s.revealedIds; const auditItems = [ 'Overspending, debt, or money disappearing', 'A big financial risk or win', 'Career confusion or a turning point', 'Relationship or lifestyle decisions', 'Self-sabotage, broken routines, or new discipline', 'Any phase that changed how you live, spend, or think', ]; const benefitTexts = [ 'Get featured on a real show', 'Receive $500 if selected to appear', 'Get an honest audit of your money or life', 'Turn a big moment - good or bad - into a story that actually lands', ]; const benefits = benefitTexts.map((text, i) => { const n = String(i + 1).padStart(2, '0'); const r = !!revealed['benefit-' + n]; return { n, text, opacity: r ? 1 : 0, transform: r ? 'translateY(0)' : 'translateY(14px)' }; }); const stepData = [ { title: 'Apply for Audit Me', desc: 'Start your application below.' }, { title: 'We may reach out', desc: 'If your story stands out, our team may contact you for the next step.' }, { title: 'Get featured, get paid', desc: 'Selected stories are featured on Audit Me, and guests who appear on the show receive $500.' }, ]; const completedCount = s.completedSteps.filter(Boolean).length; const stepLineHeight = (completedCount / 4 * 100) + '%'; const honestyLen = f.story.length; const honestyLabel = honestyLen < 40 ? 'Too vague' : honestyLen < 150 ? 'Getting real' : "Now we're talking"; const honestyPercent = Math.min(100, Math.round((honestyLen / 220) * 100)); const faqData = [ ['Who can apply for Audit Me?', 'Anyone in the United States or Canada who is at least 20 years old can apply.'], ['What kind of stories are you looking for?', 'Real stories about money, life choices, pressure, wins, mistakes, or turning points.'], ['Do I need to share exact numbers or private details?', 'No. Share what you’re comfortable sharing - we care more about the story than forcing every detail.'], ['Do I have to be camera-ready or “good on camera” to apply?', 'No. You just need a real story and the willingness to tell it honestly.'], ['Is Audit Me a roast show?', 'No. It’s honest, direct, and funny at times, but it is not meant to humiliate people.'], ['Do featured guests get paid, and is there any cost to apply?', 'Yes, selected guests who appear on the show receive $500, and applying is free.'], ]; const footerTargets = [ ['Overview', 'hero'], ['What Is Audit Me', 'what-is'], ['What We Audit', 'what-we-audit'], ['Why Apply', 'why-apply'], ['How It Works', 'how-it-works'], ['FAQs', 'faqs'], ['Apply', 'apply'], ]; const scrollToForm = () => this.scrollTo('apply'); const scrollToWhatWeAudit = () => this.scrollTo('what-we-audit'); const barVisible = s.pastHero && !s.barDismissed && !s.submitted && !s.footerVisible; const formVisible = !s.submitted && !s.disqualified; const toggleBtn = (active, activeBg) => ({ flex: 1, fontFamily: MONO, fontWeight: 700, fontSize: 14, padding: 12, borderRadius: 6, border: '2px solid ' + INK, cursor: 'pointer', background: active ? activeBg : 'transparent', color: active ? CREAM : INK, }); const inputStyle = { width: '100%', boxSizing: 'border-box', fontSize: 16, padding: '12px 14px', borderRadius: 6, border: '2px solid ' + INK, fontFamily: BODY, }; const textareaStyle = { ...inputStyle, padding: 14, resize: 'vertical', lineHeight: 1.5 }; const labelMono = { fontSize: 13, fontFamily: MONO, display: 'block', marginBottom: 6 }; const stepTitle = { fontFamily: DISPLAY, fontWeight: 800, fontSize: 20, textTransform: 'uppercase', margin: 0 }; const err = (msg) =>

{msg}

; const backBtn = (onClick) => ( ); const continueBtn = (onClick) => ( ); return (
{/* HEADER */}
Audit Me
{/* HERO */}
Selected guests receive $500

Audit Me

If your story is selected, we'll feature it on Audit Me. Guests who appear on the show will receive $500.

A show where real people get their money, habits, and life choices audited on camera - honestly, publicly, and with humor.

Tell us what really happened - good or bad - and if your story stands out, we may bring it to the show.

{/* WHAT IS AUDIT ME */}

What Is Audit Me?

Audit Me is a show where real people unpack the financial decisions that changed their lives.

From life-changing investments and career risks to failed businesses, debt, missed opportunities, and hard-earned comebacks, every episode explores the choices that shaped someone's financial journey.

Because the most valuable financial advice doesn't always come from experts. Sometimes, it comes from someone who's lived it.

{/* WHAT WE AUDIT */}

What We Audit

Audit Me is for people whose money, habits, or life choices have given them a story worth telling - whether it went wrong, went right, or just got very real. That could mean:

{auditItems.map((item, i) => (
{item}
))}

If you have a chapter you already tell your friends about - and you're willing to talk about it on camera - this is where it goes.

{/* WHY APPLY */}

Why Apply?

Because anyone can give you vague advice. A proper audit is different.

Audit Me is for people who already know their story has weight - a mistake, a win, a risk, or a phase that changed things - and are willing to put it on the table. The upside is turning that moment into something bigger: a clear story, a real episode, and a chance for other people to see themselves in what you went through.

{benefits.map((b) => (
{b.n} {b.text}
))}
{/* HOW IT WORKS */}

How Audit Me Works

{stepData.map((d, i) => { const n = String(i + 1).padStart(2, '0'); const done = s.completedSteps[i]; const open = s.activeStep === i; return (
this.setState((st) => ({ activeStep: st.activeStep === i ? null : i }))} style={{ background: CREAM, border: '2px solid ' + INK, borderRadius: 4, padding: '18px 20px', marginBottom: 16, cursor: 'pointer', boxShadow: done ? '3px 3px 0 ' + RED : 'none', }}>
{n} {d.title} {done && ( ✓ )}
{open && (

{d.desc}

)}
); })}
{/* $500 SECTION */}

Selected Guests Receive $500

${s.countValue}
{s.showStamp && (
PAID
)}

Guests who are selected and appear on Audit Me will receive $500 as participant payment for the episode.

Applying does not guarantee selection, but if your story is chosen and you are featured on the show, you will be paid.

{/* HOST */}
Saroosh, Host
AUDITED

Hosted by Saroosh

Hosted by Saroosh, who brings a direct eye, sharp humor, and zero interest in pretending everything is fine. He asks the questions most people avoid, keeps the conversation honest, and makes sure the audit feels real, not rehearsed.

{/* FAQS */}

FAQs

{faqData.map(([q, a], i) => { const open = s.openFaq === i; return (
{open && (

{a}

)}
); })}
{/* APPLY FORM */}

Apply for Audit Me

Tell us the story you keep coming back to - about your money, your life, or both.

Be specific. Be real. Don't polish it for us.

If something in that chapter feels big, messy, risky, funny, or important, we want to see it.

{s.submitted && (
RECEIVED

AUDIT ME - APPLICATION RECEIPT

Application Received

Name{f.name}
Email{f.email}

We review every application. If your story stands out, our team will reach out.

)} {s.disqualified && (

Not Eligible

Audit Me currently requires applicants to be 18+ and legally able to sign a media release and receive payment in the US or Canada.

)} {formVisible && (
{[1, 2, 3, 4, 5, 6].map((n) => (
= n ? INK : 'rgba(22,35,63,0.15)' }}>
))}
Step {s.formStep} of 6
{s.formStep === 1 && (

Eligibility

{s.errors.over18 && err('Please answer this question.')}
{s.errors.eligible && err('Please answer this question.')}
)} {s.formStep === 2 && (

Basic Info

this.updateField('name', e.target.value)} style={inputStyle} /> {s.errors.name && err('Please enter your name.')}
this.updateField('email', e.target.value)} style={inputStyle} /> {s.errors.email && err('Enter a valid email address.')}
this.updateField('phone', e.target.value)} style={inputStyle} /> {s.errors.phone && err('Please enter your phone number.')}
this.updateField('location', e.target.value)} style={inputStyle} /> {s.errors.location && err('Please enter your location.')}
this.updateField('handle', e.target.value)} style={inputStyle} />
{backBtn(() => this.setState({ formStep: 1 }))} {continueBtn(() => { if (this.validateStep2()) this.setState({ formStep: 3 }); })}
)} {s.formStep === 3 && (

The Story

{s.errors.summary &&

Please summarize your story.

}
{s.errors.story &&

Tell us a bit about what's going on.

}

Honesty meter: {honestyLabel}

{backBtn(() => this.setState({ formStep: 2 }))} {continueBtn(() => { if (this.validateStep3()) this.setState({ formStep: 4 }); })}
)} {s.formStep === 4 && (

Camera Check

Non-negotiable - this shows whether you, not just the story, will work on screen.

Max 90 seconds · up to Full HD (1080p) · up to 100 MB · MP4 recommended.

{ const file = e.target.files && e.target.files[0]; if (!file) { this._videoFile = null; this.setState((st) => ({ form: { ...st.form, videoFileName: '' }, videoError: '' })); return; } this._videoFile = null; this.setState((st) => ({ form: { ...st.form, videoFileName: '' }, videoChecking: true, videoError: '', errors: { ...st.errors, videoFile: false } })); validateVideoFile(file).then((r) => { if (r.ok) { this._videoFile = file; this.setState((st) => ({ form: { ...st.form, videoFileName: file.name }, videoChecking: false, videoError: '' })); } else { this._videoFile = null; this.setState((st) => ({ form: { ...st.form, videoFileName: '' }, videoChecking: false, videoError: r.error })); } }); }} style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 }} /> {s.videoError &&

{s.videoError}

} {!s.videoError && s.errors.videoFile &&

A video is required to submit.

}
{backBtn(() => this.setState({ formStep: 3 }))} {continueBtn(() => { if (this.validateStep4()) this.setState({ formStep: 5 }); })}
)} {s.formStep === 5 && (

Comfort & Consent

{s.errors.roast && err('Please answer this question.')}
{backBtn(() => this.setState({ formStep: 4 }))} {continueBtn(() => { if (this.validateStep5()) this.setState({ formStep: 6 }); })}
)} {s.formStep === 6 && (

Close

{s.errors.consent &&

Consent is required to submit.

} {s.submitError &&

{s.submitError}

}
{backBtn(() => this.setState({ formStep: 5 }))}
)}
)}
{/* FOOTER */} {/* STICKY APPLY BAR */}
Selected guests receive $500 → Apply for Audit Me
); } } const socialStyle = { width: 40, height: 40, borderRadius: 999, border: '1px solid rgba(245,241,232,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', }; const socialImgStyle = { width: 20, height: 20, objectFit: 'contain', display: 'block' }; ReactDOM.createRoot(document.getElementById('root')).render();