\n \n \n {section.title}\n \n \n {sectionScore}/{maxSection}\n \n

\n \n 66 ? \"#1a7a54\" : pct > 33 ? \"#9a7b1a\" : \"#c45a20\",\n transition: \"width 1s ease\",\n }}\n />\n \n \n );\n}\n\nexport function App() {\n const [currentSection, setCurrentSection] = useState(0);\n const [currentQuestion, setCurrentQuestion] = useState(0);\n const [answers, setAnswers] = useState({});\n const [showResults, setShowResults] = useState(false);\n const [showEmailGate, setShowEmailGate] = useState(false);\n const [email, setEmail] = useState(\"\");\n const [name, setName] = useState(\"\");\n const [company, setCompany] = useState(\"\");\n const [emailError, setEmailError] = useState(\"\");\n const [animateScore, setAnimateScore] = useState(false);\n const [fade, setFade] = useState(true);\n const [started, setStarted] = useState(false);\n\n const totalQuestions = SECTIONS.reduce(\n (s, sec) => s + sec.questions.length,\n 0,\n );\n const answeredCount = Object.keys(answers).length;\n const globalProgress = (answeredCount / totalQuestions) * 100;\n\n const section = SECTIONS[currentSection];\n const question = section?.questions[currentQuestion];\n const answerKey = `${currentSection}-${currentQuestion}`;\n\n const totalScore = Object.values(answers).reduce((s, v) => s + v, 0);\n const rating = getRating(totalScore);\n\n useEffect(() => {\n if (showResults) {\n const t = setTimeout(() => setAnimateScore(true), 200);\n return () => clearTimeout(t);\n }\n }, [showResults]);\n\n function transition(fn) {\n setFade(false);\n setTimeout(() => {\n fn();\n setFade(true);\n }, 250);\n }\n\n function handleSelect(score) {\n const newAnswers = { ...answers, [answerKey]: score };\n setAnswers(newAnswers);\n\n setTimeout(() => {\n transition(() => {\n if (currentQuestion < section.questions.length - 1) {\n setCurrentQuestion(currentQuestion + 1);\n } else if (currentSection < SECTIONS.length - 1) {\n setCurrentSection(currentSection + 1);\n setCurrentQuestion(0);\n } else {\n setShowEmailGate(true);\n }\n });\n }, 300);\n }\n\n function handleEmailSubmit() {\n if (!email || !email.includes(\"@\") || !email.includes(\".\")) {\n setEmailError(\"Please enter a valid work email.\");\n return;\n }\n setEmailError(\"\");\n transition(() => {\n setShowEmailGate(false);\n setShowResults(true);\n });\n }\n\n function goBack() {\n if (currentQuestion > 0) {\n transition(() => setCurrentQuestion(currentQuestion - 1));\n } else if (currentSection > 0) {\n transition(() => {\n const prevSection = currentSection - 1;\n setCurrentSection(prevSection);\n setCurrentQuestion(SECTIONS[prevSection].questions.length - 1);\n });\n }\n }\n\n function restart() {\n transition(() => {\n setAnswers({});\n setCurrentSection(0);\n setCurrentQuestion(0);\n setShowResults(false);\n setShowEmailGate(false);\n setAnimateScore(false);\n setStarted(false);\n setEmail(\"\");\n setName(\"\");\n setCompany(\"\");\n setEmailError(\"\");\n });\n }\n\n const globalQuestionIndex = SECTIONS.slice(0, currentSection).reduce(\n (s, sec) => s + sec.questions.length,\n 0,\n ) + currentQuestion + 1;\n\n const wrapper = {\n minHeight: \"100vh\",\n background: \"#fafaf9\",\n color: \"#1a1a1a\",\n fontFamily: \"'DM Sans', -apple-system, sans-serif\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n };\n\n const header = {\n width: \"100%\",\n padding: \"28px 40px\",\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n borderBottom: \"1px solid #eaeae8\",\n };\n\n const main = {\n flex: 1,\n width: \"100%\",\n maxWidth: 680,\n padding: \"0 24px\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n minHeight: \"calc(100vh - 80px)\",\n };\n\n const btnPrimary = {\n background: \"#1a7a54\",\n color: \"#fff\",\n border: \"none\",\n padding: \"16px 40px\",\n fontSize: 15,\n fontWeight: 600,\n borderRadius: 6,\n cursor: \"pointer\",\n letterSpacing: \"0.01em\",\n transition: \"all 0.2s ease\",\n };\n\n const inputStyle = {\n background: \"#fff\",\n border: \"1px solid #ddd\",\n padding: \"14px 18px\",\n borderRadius: 6,\n fontSize: 15,\n color: \"#1a1a1a\",\n width: \"100%\",\n outline: \"none\",\n transition: \"border-color 0.2s ease\",\n };\n\n // --- INTRO ---\n if (!started) {\n return (\n

\n \n \n 5-Minute Assessment\n

\n \n How well is your organisation managing psychosocial risk?\n \n \n 12 questions across reporting culture, incident management,\n prevention, and compliance. Get your score and see where the gaps\n are.\n

\n transition(() => setStarted(true))}\n style={btnPrimary}\n onMouseEnter={(e) => e.target.style.background = \"#218c60\"}\n onMouseLeave={(e) => e.target.style.background = \"#1a7a54\"}\n >\n Start Assessment\n \n

\n {[\n { n: \"82%\", t: \"of harassment goes unreported\" },\n { n: \"$42K\", t: \"average claim cost\" },\n { n: \"18%\", t: \"of incidents formally reported\" },\n ].map((s, i) => (\n

\n \n {s.n}\n

\n \n {s.t}\n

\n ))}\n

\n \n \n \n );\n }\n\n // --- EMAIL GATE ---\n if (showEmailGate) {\n return (\n

\n \n \n Almost There\n

\n \n Your results are ready.\n \n \n Enter your details to see your psychosocial risk score and\n personalised breakdown.\n

\n\n \n setName(e.target.value)}\n style={inputStyle}\n onFocus={(e) => e.target.style.borderColor = \"#1a7a54\"}\n onBlur={(e) => e.target.style.borderColor = \"#ddd\"}\n />\n {\n setEmail(e.target.value);\n setEmailError(\"\");\n }}\n style={{\n ...inputStyle,\n borderColor: emailError ? \"#c45a20\" : \"#ddd\",\n }}\n onFocus={(e) =>\n e.target.style.borderColor = emailError\n ? \"#c45a20\"\n : \"#1a7a54\"}\n onBlur={(e) =>\n e.target.style.borderColor = emailError ? \"#c45a20\" : \"#ddd\"}\n />\n {emailError && (\n \n {emailError}\n \n )}\n setCompany(e.target.value)}\n style={inputStyle}\n onFocus={(e) => e.target.style.borderColor = \"#1a7a54\"}\n onBlur={(e) => e.target.style.borderColor = \"#ddd\"}\n />\n e.target.style.background = \"#218c60\"}\n onMouseLeave={(e) => e.target.style.background = \"#1a7a54\"}\n >\n See My Results\n \n \n We'll send you a copy of your results. No spam, ever.\n

\n \n \n );\n }\n\n // --- RESULTS ---\n if (showResults) {\n return (\n

\n \n Retake\n \n

\n \n \n \n Your Results\n

\n\n \n \n

\n \n {rating.label}\n

\n \n {rating.summary}\n

\n {rating.detail}\n

\n \n \n\n \n \n Breakdown\n \n {SECTIONS.map((_, i) => (\n \n ))}\n \n\n \n \n {rating.cta}\n

\n e.target.style.background = \"#218c60\"}\n onMouseLeave={(e) => e.target.style.background = \"#1a7a54\"}\n >\n Book a Demo\n \n \n \n \n \n );\n }\n\n // --- QUESTIONS ---\n return (\n

\n {globalQuestionIndex} of {totalQuestions}\n

\n \n \n

\n \n \n {section.title}\n

\n \n {question.q}\n \n\n

\n {question.options.map((opt, i) => {\n const isSelected = answers[answerKey] === opt.score;\n return (\n handleSelect(opt.score)}\n style={{\n background: isSelected ? \"#f0f7f3\" : \"#fff\",\n border: isSelected\n ? \"1px solid #1a7a54\"\n : \"1px solid #e8e8e6\",\n color: isSelected ? \"#1a7a54\" : \"#444\",\n padding: \"18px 24px\",\n borderRadius: 8,\n cursor: \"pointer\",\n fontSize: 15,\n textAlign: \"left\",\n transition: \"all 0.2s ease\",\n lineHeight: 1.4,\n }}\n onMouseEnter={(e) => {\n if (!isSelected) {\n e.target.style.borderColor = \"#ccc\";\n e.target.style.background = \"#fefefe\";\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.target.style.borderColor = \"#e8e8e6\";\n e.target.style.background = \"#fff\";\n }\n }}\n >\n {opt.label}\n \n );\n })}\n

\n\n {question.note && (\n \n {question.note}\n

\n )}\n\n {(currentSection > 0 || currentQuestion > 0) && (\n e.target.style.color = \"#777\"}\n onMouseLeave={(e) => e.target.style.color = \"#bbb\"}\n >\n ← Back\n \n )}\n \n \n \n );\n}","deleted","label",[176,177,159],"frontend","components","permalink","https://www.val.town/x/willsr/risk-assessment/code/frontend/components/App.tsx","extension","actionData","errors"]