// AUDIT — single-page form, slide-in from right const AuditModal = ({open, onClose}) => { const [data, setData] = useState({fname:'',lname:'',email:'',handle:'',platform:'',goal:'',niche:'',followers:'',experience:'',challenge:'',budget:'',frequency:'',tried:''}); const [honeypot, setHoneypot] = useState(''); // must stay empty const [mathAnswer, setMathAnswer] = useState(''); // human check const [mathError, setMathError] = useState(false); const [mathQ] = useState(() => { const a = Math.floor(Math.random()*9)+1; const b = Math.floor(Math.random()*9)+1; return { a, b, answer: a + b }; }); const [recaptchaReady, setRecaptchaReady] = useState(false); const [errors, setErrors] = useState({}); const [submitted, setSubmitted] = useState(false); const [loading, setLoading] = useState(false); useEffect(() => { if (open) document.body.style.overflow = 'hidden'; else document.body.style.overflow = ''; return () => { document.body.style.overflow = ''; }; }, [open]); // Load reCAPTCHA v3 once useEffect(() => { if (document.getElementById('rcaptcha-script')) { setRecaptchaReady(true); return; } const s = document.createElement('script'); s.id = 'rcaptcha-script'; s.src = 'https://www.google.com/recaptcha/api.js?render=6LdCFNgsAAAAAJ5LaaMgTyy8ijFQLi2V9AoQLrRz'; s.async = true; s.onload = () => setRecaptchaReady(true); document.head.appendChild(s); }, []); useEffect(() => { if (!open) return; const onKey = e => { if (e.key === 'Escape') handleClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); const set = (k, v) => { setData(d => ({...d, [k]: v})); setErrors(e => ({...e, [k]: false})); }; const validate = () => { // Honeypot — if filled, it's a bot if (honeypot.trim()) return false; // Math check if (parseInt(mathAnswer, 10) !== mathQ.answer) { setMathError(true); return false; } setMathError(false); const e = {}; if (!data.fname.trim()) e.fname = true; if (!data.lname.trim()) e.lname = true; if (!data.email.trim() || !data.email.includes('@')) e.email = true; if (!data.handle.trim()) e.handle = true; if (!data.platform) e.platform = true; if (!data.goal) e.goal = true; if (!data.niche.trim()) e.niche = true; if (!data.followers) e.followers = true; if (!data.frequency) e.frequency = true; setErrors(e); return Object.keys(e).length === 0; }; const submit = () => { if (!validate()) return; setLoading(true); const doSubmit = (token) => { // Formspree — each field has a clear name, works without internal field IDs const payload = { 'First name': data.fname, 'Last name': data.lname, '_replyto': data.email, 'Handle': data.handle, 'Platform': data.platform, 'Frequency': data.frequency, 'Main goal': data.goal, 'Challenge': data.challenge, 'Niche': data.niche, 'Followers': data.followers, 'Experience': data.experience, 'Tried before': data.tried, 'Budget openness': data.budget, '_subject': 'New Creator Audit — ' + data.fname + ' ' + data.lname, 'g-recaptcha-response': token || '', }; fetch('https://formspree.io/f/xojregkr', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(payload), }) .then(r => r.json()) .then(() => { setLoading(false); setSubmitted(true); }) .catch(() => { setLoading(false); setSubmitted(true); }); }; if (recaptchaReady && window.grecaptcha) { window.grecaptcha.ready(() => { window.grecaptcha.execute('6LdCFNgsAAAAAJ5LaaMgTyy8ijFQLi2V9AoQLrRz', {action:'audit_submit'}) .then(token => doSubmit(token)) .catch(() => doSubmit(null)); }); } else { doSubmit(null); } }; const reset = () => { setData({fname:'',lname:'',email:'',handle:'',platform:'',goal:'',niche:''}); setErrors({}); setSubmitted(false); setLoading(false); }; const handleClose = () => { onClose(); setTimeout(reset, 500); }; const inp = (k, overrides={}) => ({ value: data[k], onChange: e => set(k, e.target.value), style: { width:'100%', padding:'15px 16px', border: `2px solid ${errors[k] ? '#c0392b' : '#d0d8d0'}`, background: '#fff', fontFamily:'var(--serif)', fontSize:16, color:'#111', outline:'none', borderRadius:10, transition:'border-color .2s', ...overrides, }, onFocus: e => { e.target.style.borderColor='var(--accent)'; }, onBlur: e => { e.target.style.borderColor=errors[k]?'#c0392b':'#d0d8d0'; }, }); const ChoiceBtn = ({label, field, value}) => { const on = data[field] === value; return ( ); }; const Label = ({children, error}) => (
{children}{error && ← required}
); const hasErrors = Object.values(errors).some(Boolean); return (
{ if (e.target === e.currentTarget) handleClose(); }} style={{ position:'fixed', inset:0, zIndex:9998, display:'flex', opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none', transition:'opacity .38s cubic-bezier(.16,1,.3,1)', }}> {/* Backdrop */}
{/* Panel — slides from right */}
{/* Header */}
Free Creator Audit
Let's find your growth opportunity.
{/* Scrollable form body */}
{!submitted ? (<> {/* Name row */}
{/* Email */}
{/* Handle */}
{/* Platform */}
{['Instagram','YouTube','Both'].map(v => ( ))}
{/* Goal */}
{['More followers','More views','Better engagement','Build my brand'].map(v => ( ))}
{/* Niche */}
{/* Followers */}
{['Under 1K','1K–5K','5K–20K','20K–100K','100K+'].map(v => ( ))}
{/* Posting frequency */}
{['Daily','3–5× a week','1–2× a week','A few times a month','Rarely'].map(v => ( ))}
{/* Experience */}
{['Under 6 months','6–12 months','1–2 years','2+ years'].map(v => ( ))}
{/* Biggest challenge */}