)); const FeatureCard = memo(({ icon, title, subtitle }) => ( )); const TreatmentCard = memo(({ treatment, index }) => ( )); // Main Quiz Component const ReviveSpaQuiz = () => { const [currentStep, setCurrentStep] = useState('welcome'); const [currentQuestion, setCurrentQuestion] = useState(0); const [answers, setAnswers] = useState({}); const [formData, setFormData] = useState({ email: '', firstName: '', lastName: '', phone: '' }); const [formErrors, setFormErrors] = useState({}); const [progress, setProgress] = useState(0); const [isSubmitting, setIsSubmitting] = useState(false); const recommendations = useMemo(() => { const scores = {}; Object.entries(answers).forEach(([questionId, answerValue]) => { const question = QUESTIONS.find(q => q.id === questionId); const selectedOption = question?.options.find(opt => opt.value === answerValue); if (selectedOption?.weight) { Object.entries(selectedOption.weight).forEach(([service, weight]) => { scores[service] = (scores[service] || 0) + weight; }); } }); return Object.entries(scores) .map(([key, score]) => ({ key, score, ...TREATMENTS[key] })) .sort((a, b) => b.score - a.score) .slice(0, 4); }, [answers]); const validateForm = useCallback(() => { const errors = {}; const { email, firstName, lastName } = formData; if (!firstName.trim()) errors.firstName = 'First name is required'; if (!lastName.trim()) errors.lastName = 'Last name is required'; if (!email.trim()) { errors.email = 'Email is required'; } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { errors.email = 'Please enter a valid email'; } setFormErrors(errors); return Object.keys(errors).length === 0; }, [formData]); const handleAnswer = useCallback((value) => { setAnswers(prev => ({ ...prev, [QUESTIONS[currentQuestion].id]: value })); setProgress(PROGRESS_STEPS[currentQuestion] || 0); setTimeout(() => { if (currentQuestion < QUESTIONS.length - 1) { setCurrentQuestion(prev => prev + 1); } else { setCurrentStep('results'); } }, 300); }, [currentQuestion]); const handleFormChange = useCallback((field, value) => { setFormData(prev => ({ ...prev, [field]: value })); if (formErrors[field]) { setFormErrors(prev => ({ ...prev, [field]: '' })); } }, [formErrors]); const handleSubmit = useCallback(async (e) => { e?.preventDefault(); if (!validateForm()) return; setIsSubmitting(true); const topTreatment = recommendations[0]; const payload = new URLSearchParams({ ...formData, first_name: formData.firstName, last_name: formData.lastName, treatment: topTreatment?.name || '', timestamp: new Date().toISOString() }); try { await fetch(ZAPIER_WEBHOOK, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: payload.toString(), keepalive: true }); alert(`Thank you! Your 10% discount code has been sent to ${formData.email}. Check your email!`); } catch (error) { console.error('Submission error:', error); alert('Thank you for your interest! We will be in touch soon.'); } finally { setIsSubmitting(false); } }, [formData, validateForm, recommendations]); const resetQuiz = useCallback(() => { setCurrentStep('welcome'); setCurrentQuestion(0); setAnswers({}); setFormData({ email: '', firstName: '', lastName: '', phone: '' }); setFormErrors({}); setProgress(0); }, []); const goBack = useCallback(() => { setCurrentQuestion(prev => prev - 1); setProgress(prev => Math.max(0, prev - 15)); }, []); // Render Welcome Screen if (currentStep === 'welcome') { return ( ); } // Render Quiz Screen if (currentStep === 'quiz') { const question = QUESTIONS[currentQuestion]; const currentAnswer = answers[question.id]; return ( ); } // Render Results Screen if (currentStep === 'results') { return ( ); } return null; }; const root = ReactDOM.createRoot(document.getElementById('quiz-root')); root.render();