Upload 23 files

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:20-alpine
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm install
+
+COPY . .
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+
+RUN npm run build
+
+EXPOSE 7860
+CMD ["npm","run","start"]

README.md

@@ -0,0 +1,28 @@
+---
+title: SGS Psychometrics Assessment (A–F)
+emoji: 🧠
+colorFrom: green
+colorTo: gray
+sdk: docker
+app_port: 7860
+---
+
+# SGS Psychometrics Assessment (A–F)
+
+- Next.js 14 + React 18
+- TailwindCSS 3
+- Radix UI (radio/progress)
+- Framer Motion animations
+- Free recruiter delivery: **Google Sheets webhook** (Apps Script)
+
+## Required Hugging Face Secrets
+- `RESULTS_WEBHOOK_URL`
+- `RESULTS_WEBHOOK_TOKEN`
+
+## Optional Secrets
+- `HF_TOKEN` (only if you want AI narrative analysis)
+- `HF_MODEL` (default: `HuggingFaceH4/zephyr-7b-beta`)
+
+## Notes
+- Candidate never sees scores or results.
+- Recruiters receive results through the Google Sheet via webhook.

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />

next.config.js

@@ -0,0 +1,3 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = { reactStrictMode: true };
+module.exports = nextConfig;

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "sgs-psychometrics-af",
+  "private": true,
+  "version": "2.0.0",
+  "scripts": {
+    "dev": "next dev -p 7860 -H 0.0.0.0",
+    "build": "next build",
+    "start": "next start -p 7860 -H 0.0.0.0"
+  },
+  "dependencies": {
+    "next": "14.2.14",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "framer-motion": "11.0.0",
+    "lucide-react": "0.454.0",
+    "@radix-ui/react-progress": "1.1.0",
+    "@radix-ui/react-radio-group": "1.2.0",
+    "@radix-ui/react-slot": "1.1.0",
+    "clsx": "2.1.1",
+    "tailwind-merge": "2.5.4"
+  },
+  "devDependencies": {
+    "typescript": "5.6.3",
+    "@types/node": "20.17.5",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
+    "tailwindcss": "3.4.17",
+    "postcss": "8.4.38",
+    "autoprefixer": "10.4.20"
+  }
+}

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: { tailwindcss: {}, autoprefixer: {} }
+};

src/app/api/submit/route.ts

@@ -6,12 +6,6 @@ function safeJsonParse(text: string): any | null {
   try { return JSON.parse(text); } catch { return null; }
 }
 
-function extractFirstText(hf: any): string {
-  if (Array.isArray(hf) && hf.length && typeof hf[0]?.generated_text === "string") return hf[0].generated_text;
-  if (typeof hf?.generated_text === "string") return hf.generated_text;
-  return JSON.stringify(hf);
-}
-
 function tryParseJson(text: string): any | null {
   const match = text.match(/\{[\s\S]*\}/);
   if (!match) return null;
@@ -32,7 +26,7 @@ export async function POST(req: Request) {
       );
     }
 
-    // Optional AI analysis for the text scenario (occupational narrative, NOT clinical diagnosis)
+    // Optional AI narrative scoring for the scenario (occupational assessment only; not clinical diagnosis)
     let ai: any = null;
     const hfToken = process.env.HF_TOKEN;
     const model = process.env.HF_MODEL || "HuggingFaceH4/zephyr-7b-beta";
@@ -50,23 +44,30 @@ CANDIDATE RESPONSE:
 ${textScenario}
 `;
 
-      const r = await fetch(`https://api-inference.huggingface.co/models/${model}`, {
+      // Hugging Face Inference Providers routing proxy (OpenAI-compatible) citeturn4view0
+      const r = await fetch("https://router.huggingface.co/hf-inference/v1/chat/completions", {
         method: "POST",
         headers: {
           "Authorization": `Bearer ${hfToken}`,
           "Content-Type": "application/json"
         },
         body: JSON.stringify({
-          inputs: prompt,
-          parameters: { max_new_tokens: 260, temperature: 0.2, return_full_text: false }
+          model,
+          messages: [{ role: "user", content: prompt }],
+          max_tokens: 350,
+          temperature: 0.2,
+          stream: false
         })
       });
 
       const hf = await r.json();
-      const txt = extractFirstText(hf);
-      const parsed = tryParseJson(txt);
+
+      // OpenAI-like response: choices[0].message.content
+      const content = hf?.choices?.[0]?.message?.content ?? "";
+      const parsed = typeof content === "string" ? tryParseJson(content) : null;
+
       ai = parsed
-        ? { ok: true, model, parsed, raw: hf }
+        ? { ok: true, model, parsed }
         : { ok: false, model, error: "AI output was not valid JSON.", raw: hf };
     }
 

src/app/globals.css

@@ -2,5 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
-html, body { height: 100%; }
-body { margin: 0; }
+@keyframes floatSlow {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(18px, 14px) scale(1.03); }
+}
+@keyframes floatSlow2 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(-16px, 10px) scale(1.02); }
+}
+@keyframes floatSlow3 {
+  0%, 100% { transform: translate(-50%, 0) scale(1); }
+  50% { transform: translate(-50%, -12px) scale(1.03); }
+}
+.animate-floatSlow { animation: floatSlow 9s ease-in-out infinite; }
+.animate-floatSlow2 { animation: floatSlow2 11s ease-in-out infinite; }
+.animate-floatSlow3 { animation: floatSlow3 13s ease-in-out infinite; }

src/components/assessment/AssessmentApp.tsx

@@ -1,555 +1,448 @@
 "use client";
 
-import * as React from "react";
 import Image from "next/image";
-import { AnimatePresence, motion } from "framer-motion";
-import { ArrowLeft, ArrowRight, ClipboardList, ShieldCheck, Timer, Send, Lock, CheckCircle2 } from "lucide-react";
-import { Button } from "@/components/ui/Button";
-import { Progress } from "@/components/ui/Progress";
-import { RadioGroup, RadioItem } from "@/components/ui/RadioGroup";
-import { SECTIONS, TOTAL_SECONDS, MIN_SUBMIT_SECONDS, SectionKey } from "@/lib/sections";
-import { selectExamQuestions, SelectedQuestion } from "@/lib/questions";
-import { scoreExam, CandidateMeta, AnswerMap } from "@/lib/scoring";
-
-const STORAGE_KEY = "sgs_psycho_af_v2";
-
-function clamp(n:number,a:number,b:number){ return Math.max(a, Math.min(b, n)); }
-function fmtTime(s:number){
-  const ss=Math.max(0, s);
-  const hh = Math.floor(ss/3600);
-  const mm = Math.floor((ss%3600)/60);
-  const rr = Math.floor(ss%60);
-  if (hh > 0) return `${String(hh).padStart(2,"0")}:${String(mm).padStart(2,"0")}:${String(rr).padStart(2,"0")}`;
-  return `${String(mm).padStart(2,"0")}:${String(rr).padStart(2,"0")}`;
-}
+import { useEffect, useMemo, useRef, useState } from "react";
+import { CandidateForm, CandidateMeta } from "./CandidateForm";
+import { ExamQuestion, SECTIONS, SectionKey, buildExam } from "@/lib/questions";
 
-type SectionState = {
-  sectionIndex: number; // 0..5 current section
-  elapsedInSection: number; // seconds used in current section
-  carrySeconds: number; // carried from previous sections
-  completedSections: SectionKey[]; // locked
-};
-
-export function AssessmentApp() {
-  const [meta, setMeta] = React.useState<CandidateMeta>({ candidateName:"", candidateId:"", jobTitle:"" });
-
-  const [started, setStarted] = React.useState(false);
-  const [startTs, setStartTs] = React.useState<number>(0);
-
-  const [sectionState, setSectionState] = React.useState<SectionState>({
-    sectionIndex: 0,
-    elapsedInSection: 0,
-    carrySeconds: 0,
-    completedSections: []
-  });
-
-  const [selected, setSelected] = React.useState<SelectedQuestion[]>([]);
-  const [answers, setAnswers] = React.useState<AnswerMap>({});
-
-  const [qIndexWithin, setQIndexWithin] = React.useState(0);
-  const [submitting, setSubmitting] = React.useState(false);
-  const [submitted, setSubmitted] = React.useState(false);
-  const [submitError, setSubmitError] = React.useState<string>("");
-
-  // anti-refresh (best-effort)
-  React.useEffect(() => {
-    function beforeUnload(e: BeforeUnloadEvent) {
-      if (started && !submitted) { e.preventDefault(); e.returnValue = ""; }
-    }
-    function keydown(e: KeyboardEvent) {
-      if (!started || submitted) return;
-      const k = e.key.toLowerCase();
-      const ctrl = e.ctrlKey || e.metaKey;
-      if (e.key === "F5" || (ctrl && k === "r")) { e.preventDefault(); e.stopPropagation(); }
-    }
-    window.addEventListener("beforeunload", beforeUnload);
-    window.addEventListener("keydown", keydown, { capture: true });
-    return () => {
-      window.removeEventListener("beforeunload", beforeUnload);
-      window.removeEventListener("keydown", keydown, { capture: true } as any);
-    };
-  }, [started, submitted]);
-
-  // restore
-  React.useEffect(() => {
-    try {
-      const raw = localStorage.getItem(STORAGE_KEY);
-      if (!raw) return;
-      const s = JSON.parse(raw);
-      if (s?.meta) setMeta(s.meta);
-      if (typeof s?.started === "boolean") setStarted(s.started);
-      if (typeof s?.startTs === "number") setStartTs(s.startTs);
-      if (s?.sectionState) setSectionState(s.sectionState);
-      if (Array.isArray(s?.selected)) setSelected(s.selected);
-      if (s?.answers) setAnswers(s.answers);
-      if (typeof s?.qIndexWithin === "number") setQIndexWithin(s.qIndexWithin);
-      if (typeof s?.submitted === "boolean") setSubmitted(s.submitted);
-    } catch {}
-  }, []);
-
-  // persist
-  React.useEffect(() => {
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify({
-        meta, started, startTs, sectionState, selected, answers, qIndexWithin, submitted
-      }));
-    } catch {}
-  }, [meta, started, startTs, sectionState, selected, answers, qIndexWithin, submitted]);
-
-  // derive current section key and questions
-  const currentSection = SECTIONS[sectionState.sectionIndex];
-  const currentKey = currentSection?.key ?? "A";
-
-  const questionsInCurrent = React.useMemo(() => selected.filter(q => q.section === currentKey), [selected, currentKey]);
-  const q = questionsInCurrent[qIndexWithin];
-
-  // section budget remaining (does NOT borrow from future; carry only from previous)
-  const sectionBudget = (currentSection?.allocationSeconds ?? 0) + sectionState.carrySeconds;
-  const remainingInSection = Math.max(0, sectionBudget - sectionState.elapsedInSection);
-
-  const elapsedTotal = started ? Math.floor((Date.now() - startTs) / 1000) : 0;
-  const remainingTotal = Math.max(0, TOTAL_SECONDS - elapsedTotal);
-
-  const answeredCount = React.useMemo(() => {
-    let c = 0;
-    for (const qq of selected) if ((answers[qq.baseId] ?? "").trim()) c++;
-    return c;
-  }, [selected, answers]);
-  const progressPct = selected.length ? Math.round((answeredCount / selected.length) * 100) : 0;
-
-  // ticking timer
-  React.useEffect(() => {
-    if (!started || submitted) return;
-    const t = setInterval(() => {
-      setSectionState(prev => {
-        // increment elapsed in section by 1, but cap by budget
-        if (remainingTotal <= 0) return prev;
-        const nextElapsed = prev.elapsedInSection + 1;
-        return { ...prev, elapsedInSection: nextElapsed };
-      });
-    }, 1000);
-    return () => clearInterval(t);
-  }, [started, submitted, remainingTotal]);
-
-  // if section time runs out, auto-finish section (carry = 0)
-  React.useEffect(() => {
-    if (!started || submitted) return;
-    if (remainingTotal <= 0) {
-      // end test - allow submit (but min 20 minutes rule still applies); we will auto-submit
-      void submitExam(true);
-      return;
-    }
-    if (currentSection && remainingInSection === 0) {
-      finishSection(true);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [remainingInSection, remainingTotal, started, submitted]);
-
-  const startDisabled = !meta.candidateName.trim() || !meta.candidateId.trim() || !meta.jobTitle.trim();
-
-  function startExam() {
-    if (startDisabled) return;
-    const seed = `${meta.candidateId}-${Date.now()}`;
-    const sel = selectExamQuestions(seed);
-    setSelected(sel);
-    setAnswers({});
-    setQIndexWithin(0);
-    setSectionState({ sectionIndex: 0, elapsedInSection: 0, carrySeconds: 0, completedSections: [] });
-    setStarted(true);
-    setSubmitted(false);
-    setSubmitError("");
-    setSubmitting(false);
-    setStartTs(Date.now());
-  }
+type ResponseValue = number | string; // likert: 1..5, mcq: option id, text: string
 
-  function resetAll() {
-    setMeta({ candidateName:"", candidateId:"", jobTitle:"" });
-    setStarted(false);
-    setSubmitted(false);
-    setSubmitError("");
-    setSubmitting(false);
-    setSelected([]);
-    setAnswers({});
-    setQIndexWithin(0);
-    setSectionState({ sectionIndex: 0, elapsedInSection: 0, carrySeconds: 0, completedSections: [] });
-    setStartTs(0);
-    try { localStorage.removeItem(STORAGE_KEY); } catch {}
-  }
+function nowMs() { return Date.now(); }
 
-  function setAnswer(baseId: string, value: string) {
-    setAnswers(prev => ({ ...prev, [baseId]: value }));
-  }
+const MIN_SUBMIT_MS = 20 * 60 * 1000;
 
-  function canMoveWithin(nextIndex: number) {
-    return nextIndex >= 0 && nextIndex < questionsInCurrent.length;
-  }
+export default function AssessmentApp() {
+  const [meta, setMeta] = useState<CandidateMeta | null>(null);
 
-  function nextWithin() {
-    const next = qIndexWithin + 1;
-    if (canMoveWithin(next)) setQIndexWithin(next);
-  }
-  function prevWithin() {
-    const prev = qIndexWithin - 1;
-    if (canMoveWithin(prev)) setQIndexWithin(prev);
-  }
+  // Build exam once per session; seed includes a random component
+  const seedRef = useRef<string>(Math.random().toString(36).slice(2));
+  const { examBySection, flat } = useMemo(() => buildExam(seedRef.current), []);
 
-  function sectionComplete(): boolean {
-    // must answer every question in current section (including text)
-    for (const qq of questionsInCurrent) {
-      const a = (answers[qq.baseId] ?? "").trim();
-      if (!a) return false;
-    }
-    return true;
-  }
+  const totalQuestions = flat.length;
+
+  const [sectionIdx, setSectionIdx] = useState(0);
+  const currentSection = SECTIONS[sectionIdx];
+  const sectionKey = currentSection.key;
+
+  const [qIdx, setQIdx] = useState(0);
 
-  function finishSection(auto=false) {
-    if (!currentSection) return;
-    if (!auto && !sectionComplete()) return;
+  const sectionQuestions: ExamQuestion[] = examBySection[sectionKey];
+  const currentQ = sectionQuestions[qIdx];
 
-    setSectionState(prev => {
-      const finishedKey = currentSection.key;
-      const leftover = Math.max(0, sectionBudget - prev.elapsedInSection); // carry forward
-      const nextIndex = prev.sectionIndex + 1;
+  // Responses stored by baseId to avoid duplicates perception
+  const [responses, setResponses] = useState<Record<string, ResponseValue>>({});
 
-      const completed = prev.completedSections.includes(finishedKey)
-        ? prev.completedSections
-        : [...prev.completedSections, finishedKey];
+  // Timer logic with carry-over
+  const [startTs, setStartTs] = useState<number | null>(null);
+  const [elapsedMs, setElapsedMs] = useState(0);
 
-      if (nextIndex >= SECTIONS.length) {
-        // last section finished -> allow submit
-        return { ...prev, completedSections: completed, carrySeconds: 0, elapsedInSection: prev.elapsedInSection };
+  const sectionTimeSpent = useRef<Record<SectionKey, number>>({ A: 0, B: 0, C: 0, D: 0, E: 0, F: 0 });
+  const sectionStartMs = useRef<number | null>(null);
+  const carryMs = useRef<number>(0);
+
+  const [sectionRemainingMs, setSectionRemainingMs] = useState(currentSection.minutes * 60 * 1000);
+
+  // Anti-refresh: warn on unload + persist minimal state
+  useEffect(() => {
+    const handler = (e: BeforeUnloadEvent) => {
+      if (startTs) {
+        e.preventDefault();
+        e.returnValue = "";
       }
-      return {
-        sectionIndex: nextIndex,
-        elapsedInSection: 0,
-        carrySeconds: auto ? 0 : leftover,
-        completedSections: completed
-      };
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [startTs]);
+
+  useEffect(() => {
+    if (!startTs) return;
+    const t = setInterval(() => {
+      setElapsedMs(nowMs() - startTs);
+      // Update remaining for current section (with carry)
+      const spentThisSection = sectionStartMs.current ? nowMs() - sectionStartMs.current : 0;
+      const budget = currentSection.minutes * 60 * 1000 + carryMs.current;
+      const remaining = Math.max(0, budget - spentThisSection);
+      setSectionRemainingMs(remaining);
+    }, 250);
+    return () => clearInterval(t);
+  }, [startTs, currentSection.minutes]);
+
+  const answeredCurrent = useMemo(() => {
+    const v = responses[currentQ.baseId];
+    if (currentQ.type === "text") return typeof v === "string" && v.trim().length >= (currentQ.minChars ?? 0);
+    return v !== undefined && v !== null && v !== "";
+  }, [responses, currentQ]);
+
+  const answeredCount = useMemo(() => Object.keys(responses).length, [responses]);
+  const progressPct = useMemo(() => Math.round((answeredCount / totalQuestions) * 100), [answeredCount, totalQuestions]);
+
+  const currentSectionAnsweredCount = useMemo(() => {
+    return sectionQuestions.filter(q => responses[q.baseId] !== undefined && responses[q.baseId] !== "").length;
+  }, [sectionQuestions, responses]);
+
+  const canGoPrev = qIdx > 0;
+  const canGoNext = qIdx < sectionQuestions.length - 1;
+
+  // Cannot skip unanswered: next is disabled unless current answered.
+  const nextDisabled = !answeredCurrent;
+
+  // Prevent going forward past first unanswered question even if user clicked quickly
+  const firstUnansweredIndex = useMemo(() => {
+    const idx = sectionQuestions.findIndex(q => {
+      const v = responses[q.baseId];
+      if (q.type === "text") return !(typeof v === "string" && v.trim().length >= (q.minChars ?? 0));
+      return v === undefined || v === null || v === "";
     });
+    return idx === -1 ? sectionQuestions.length - 1 : idx;
+  }, [sectionQuestions, responses]);
+
+  const setAnswer = (val: ResponseValue) => {
+    setResponses(prev => ({ ...prev, [currentQ.baseId]: val }));
+  };
+
+  const startAssessment = (m: CandidateMeta) => {
+    setMeta(m);
+    const ts = nowMs();
+    setStartTs(ts);
+    sectionStartMs.current = ts;
+    carryMs.current = 0;
+    setSectionRemainingMs(currentSection.minutes * 60 * 1000);
+  };
+
+  const gotoPrev = () => {
+    if (!canGoPrev) return;
+    setQIdx(i => Math.max(0, i - 1));
+  };
+
+  const gotoNext = () => {
+    if (!canGoNext || nextDisabled) return;
+    // Hard clamp: cannot pass first unanswered
+    setQIdx(i => {
+      const next = Math.min(sectionQuestions.length - 1, i + 1);
+      return Math.min(next, firstUnansweredIndex);
+    });
+  };
+
+  const finishSection = () => {
+    // must have all answered in section
+    const allAnswered = currentSectionAnsweredCount === sectionQuestions.length;
+    if (!allAnswered) return;
+
+    // compute carry-over
+    const spent = sectionStartMs.current ? nowMs() - sectionStartMs.current : 0;
+    const budget = currentSection.minutes * 60 * 1000 + carryMs.current;
+    const remaining = Math.max(0, budget - spent);
+
+    sectionTimeSpent.current[sectionKey] = spent;
+
+    // advance section
+    if (sectionIdx < SECTIONS.length - 1) {
+      setSectionIdx(s => s + 1);
+      setQIdx(0);
+      carryMs.current = remaining;
+      sectionStartMs.current = nowMs();
+      // remaining will refresh in interval
+    }
+  };
 
-    setQIndexWithin(0);
-  }
+  const canSubmit = useMemo(() => {
+    if (!startTs) return false;
+    if (elapsedMs < MIN_SUBMIT_MS) return false;
+    // all answered
+    return answeredCount >= totalQuestions;
+  }, [startTs, elapsedMs, answeredCount, totalQuestions]);
 
-  async function submitExam(auto=false) {
-    if (submitting || submitted) return;
+  const submit = async () => {
+    if (!meta || !startTs) return;
 
-    // validity rule: must spend at least 20 minutes before submission accepted (unless time ended and >20 min still required)
-    if (!auto && elapsedTotal < MIN_SUBMIT_SECONDS) {
-      setSubmitError("This assessment requires a minimum of 20 minutes to ensure validity. Please continue until 20 minutes have passed.");
+    if (elapsedMs < MIN_SUBMIT_MS) {
+      alert("You can submit the assessment only after 20 minutes have passed.");
       return;
     }
-
-    // ensure all sections completed if manual submit
-    if (!auto) {
-      // must be at last section and complete it
-      const lastKey = "F";
-      if (currentKey !== lastKey || !sectionComplete()) {
-        setSubmitError("Please complete the current section before submitting.");
-        return;
-      }
+    if (answeredCount < totalQuestions) {
+      alert("Please answer all questions before submitting.");
+      return;
     }
 
-    setSubmitting(true);
-    setSubmitError("");
-
-    try {
-      // internal scoring (hidden)
-      const scored = scoreExam(selected, answers);
-
-      // AI narrative analysis only for the text scenario (B_TEXT01) if HF_TOKEN exists
-      const textAnswer = (answers["B_TEXT01"] ?? "").trim();
-
-      const payload = {
-        submittedAt: new Date().toISOString(),
-        candidate: meta,
-        elapsedSeconds: elapsedTotal,
-        progressPct,
-        scores: scored,
-        // include answers? keep lightweight to avoid large webhook payload; include only text + a few flags
-        responses: {
-          textScenario: textAnswer
-        },
-        examMeta: {
-          version: "2.0.0",
-          questionCount: selected.length
-        }
-      };
-
-      const r = await fetch("/api/submit", {
-        method: "POST",
-        headers: { "Content-Type":"application/json" },
-        body: JSON.stringify(payload)
-      });
-
-      const data = await r.json();
-      if (!data?.ok) {
-        throw new Error(data?.error || "Submission failed");
-      }
+    const payload = {
+      meta: {
+        fullName: meta.fullName,
+        jobTitle: meta.jobTitle,
+        passportNumber: meta.passportNumber
+      },
+      seed: seedRef.current,
+      startedAt: new Date(startTs).toISOString(),
+      submittedAt: new Date().toISOString(),
+      elapsedMs,
+      responses,
+      // include prompts used (for audit)
+      questions: flat.map(q => ({ baseId: q.baseId, section: q.section, type: q.type, prompt: q.prompt }))
+    };
 
-      setSubmitted(true);
-      setSubmitting(false);
-    } catch (e: any) {
-      setSubmitting(false);
-      setSubmitError(e?.message ?? "Submission failed");
+    const r = await fetch("/api/submit", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload)
+    });
+
+    const j = await r.json();
+
+    // Candidate should NOT see results—just thank you
+    if (j?.ok) {
+      window.location.href = "/thank-you";
+    } else {
+      alert("Submission failed. Please try again or contact SGS recruitment.");
     }
-  }
+  };
 
   // UI helpers
-  const sectionProgress = questionsInCurrent.length
-    ? Math.round(questionsInCurrent.reduce((c,qq)=>c+(((answers[qq.baseId]??"").trim())?1:0),0) / questionsInCurrent.length * 100)
-    : 0;
-
-  return (
-    <div className="relative min-h-screen overflow-hidden">
-      <div className="pointer-events-none absolute inset-0">
-        <motion.div
-          className="absolute -top-24 left-1/2 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-gradient-to-br from-green-200 via-sky-200 to-indigo-200 blur-3xl opacity-60"
-          animate={{ y: [0, 18, 0], scale: [1, 1.03, 1] }}
-          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
-        />
-        <motion.div
-          className="absolute -bottom-40 -left-40 h-[520px] w-[520px] rounded-full bg-gradient-to-br from-amber-200 via-rose-200 to-fuchsia-200 blur-3xl opacity-50"
-          animate={{ x: [0, 20, 0], rotate: [0, 8, 0] }}
-          transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
-        />
+  const mmss = (ms: number) => {
+    const s = Math.max(0, Math.floor(ms / 1000));
+    const m = Math.floor(s / 60);
+    const r = s % 60;
+    return `${String(m).padStart(2, "0")}:${String(r).padStart(2, "0")}`;
+  };
+
+  if (!meta) {
+    return (
+      <div className="min-h-screen relative overflow-hidden bg-zinc-50">
+        <Decor />
+        <div className="max-w-6xl mx-auto px-6 py-10">
+          <Header />
+          <div className="mt-10">
+            <CandidateForm onSubmit={startAssessment} />
+          </div>
+          <div className="mt-8 text-xs text-zinc-500 max-w-xl mx-auto text-center">
+            This assessment is for occupational screening and safety culture fit. It is not a medical diagnosis.
+          </div>
+        </div>
       </div>
+    );
+  }
 
-      <header className="relative mx-auto max-w-6xl px-6 pt-8">
-        <div className="flex flex-col gap-4 rounded-3xl border bg-white/70 p-6 shadow-sm backdrop-blur">
-          <div className="flex flex-wrap items-center justify-between gap-4">
-            <div className="flex items-start gap-4">
-              <div className="mt-1">
-                <Image src="/sgs-logo.png" alt="SGS" width={160} height={46} priority />
-              </div>
-              <div>
-                <div className="flex items-center gap-2 text-sm text-neutral-600">
-                  <ShieldCheck className="h-4 w-4" />
-                  <span>Saudi Ground Services (SGS)</span>
+  return (
+    <div className="min-h-screen relative overflow-hidden bg-zinc-50">
+      <Decor />
+      <div className="max-w-6xl mx-auto px-6 py-10">
+        <Header />
+
+        <div className="mt-6 grid gap-4">
+          <div className="rounded-3xl border border-zinc-200 bg-white/70 backdrop-blur p-5 shadow-sm">
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+              <div className="flex items-center gap-3">
+                <div className="h-10 w-10 rounded-2xl bg-gradient-to-br from-emerald-500/15 to-sky-500/15 border border-zinc-200 grid place-items-center">
+                  <span className="text-sm font-semibold text-zinc-700">{sectionKey}</span>
+                </div>
+                <div>
+                  <div className="text-base font-semibold text-zinc-900">{currentSection.title}</div>
+                  <div className="text-sm text-zinc-600">
+                    Progress: <span className="font-medium text-zinc-900">{progressPct}%</span> •
+                    Section: <span className="font-medium text-zinc-900">{currentSectionAnsweredCount}/{sectionQuestions.length}</span>
+                  </div>
                 </div>
-                <h1 className="mt-1 text-2xl font-semibold tracking-tight">Psychometrics Assessment</h1>
-                <p className="mt-1 max-w-2xl text-sm text-neutral-600">
-                  This is an occupational assessment (not a medical diagnosis). Please answer honestly.
-                </p>
               </div>
-            </div>
 
-            <div className="flex items-center gap-3">
-              {started && !submitted ? (
-                <>
-                  <div className="flex items-center gap-2 rounded-2xl border bg-white px-3 py-2 text-sm text-neutral-700">
-                    <Timer className="h-4 w-4" />
-                    <span className={remainingTotal <= 60 ? "text-rose-600 font-semibold" : ""}>{fmtTime(remainingTotal)}</span>
-                  </div>
-                  <div className="flex items-center gap-2 rounded-2xl border bg-white px-3 py-2 text-sm text-neutral-700">
-                    <Lock className="h-4 w-4" />
-                    <span>Section time: {fmtTime(remainingInSection)}</span>
-                  </div>
-                </>
-              ) : null}
-
-              {!started ? (
-                <Button onClick={startExam} disabled={startDisabled}>Start Test</Button>
-              ) : (
-                <div className="flex items-center gap-2 rounded-2xl border bg-white px-3 py-2 text-sm text-neutral-700">
-                  <ClipboardList className="h-4 w-4" />
-                  <span>{progressPct}% complete</span>
+              <div className="flex items-center gap-3">
+                <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-2">
+                  <div className="text-xs text-zinc-500">Section time left</div>
+                  <div className="text-sm font-semibold text-zinc-900 tabular-nums">{mmss(sectionRemainingMs)}</div>
+                </div>
+                <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-2">
+                  <div className="text-xs text-zinc-500">Total elapsed</div>
+                  <div className="text-sm font-semibold text-zinc-900 tabular-nums">{mmss(elapsedMs)}</div>
                 </div>
-              )}
+              </div>
             </div>
-          </div>
 
-          <div className="flex items-center gap-3">
-            <Progress value={started ? progressPct : 0} />
-            <span className="w-12 text-right text-xs text-neutral-600">{started ? progressPct : 0}%</span>
-          </div>
-        </div>
-      </header>
-
-      <main className="relative mx-auto max-w-6xl px-6 pb-16 pt-8">
-        <div className="grid gap-6 lg:grid-cols-[360px_1fr]">
-          <aside className="rounded-3xl border bg-white/70 p-5 shadow-sm backdrop-blur">
-            <h2 className="text-sm font-semibold text-neutral-800">Candidate</h2>
-            <div className="mt-3 grid gap-3">
-              <Field label="Name" value={meta.candidateName} onChange={(v)=>setMeta(m=>({...m,candidateName:v}))} disabled={started} placeholder="Full name" />
-              <Field label="Candidate ID" value={meta.candidateId} onChange={(v)=>setMeta(m=>({...m,candidateId:v}))} disabled={started} placeholder="e.g., SGS-000123" />
-              <Field label="Job Title" value={meta.jobTitle} onChange={(v)=>setMeta(m=>({...m,jobTitle:v}))} disabled={started} placeholder="Role applied for" />
+            <div className="mt-4 h-2 w-full rounded-full bg-zinc-100 overflow-hidden">
+              <div
+                className="h-full rounded-full bg-gradient-to-r from-emerald-500 to-sky-500 transition-all duration-500"
+                style={{ width: `${progressPct}%` }}
+              />
             </div>
+          </div>
 
-            <div className="mt-5 rounded-2xl border bg-white p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <div className="text-xs text-neutral-500">Current Section</div>
-                  <div className="mt-1 text-base font-semibold">{currentSection?.key}. {currentSection?.title}</div>
+          <div className="rounded-3xl border border-zinc-200 bg-white/70 backdrop-blur p-6 shadow-sm">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <div className="text-sm font-medium text-zinc-500">Question {qIdx + 1} of {sectionQuestions.length}</div>
+                <div className="mt-2 text-lg font-semibold text-zinc-900 leading-snug">
+                  {currentQ.prompt}
                 </div>
-                {started && !submitted ? (
-                  <div className="text-xs text-neutral-600">{sectionProgress}% done</div>
-                ) : null}
+                {!answeredCurrent && (
+                  <div className="mt-2 text-sm text-rose-600">
+                    Please answer to continue.
+                  </div>
+                )}
               </div>
-              <div className="mt-3 text-xs text-neutral-600">{currentSection?.description}</div>
-
-              <div className="mt-4 grid gap-2 text-xs text-neutral-700">
-                {SECTIONS.map((s, idx) => {
-                  const done = sectionState.completedSections.includes(s.key);
-                  const active = idx === sectionState.sectionIndex && started && !submitted;
-                  return (
-                    <div key={s.key} className={"flex items-center justify-between rounded-xl border px-3 py-2 " + (active ? "bg-neutral-900 text-white border-neutral-900" : "bg-white")}>
-                      <span className="font-medium">{s.key}. {s.title}</span>
-                      {done ? <CheckCircle2 className={"h-4 w-4 " + (active ? "text-white" : "text-green-700")} /> : <span className={active ? "text-white/80" : "text-neutral-500"}>{Math.round(s.allocationSeconds/60)}m</span>}
-                    </div>
-                  );
-                })}
+              <div className="shrink-0 hidden sm:block">
+                <div className="h-12 w-12 rounded-2xl border border-zinc-200 bg-white grid place-items-center">
+                  <span className="text-xs font-semibold text-zinc-700">{sectionKey}-{String(qIdx + 1).padStart(2,"0")}</span>
+                </div>
               </div>
             </div>
 
-            <div className="mt-4 flex flex-wrap gap-2">
-              <Button onClick={resetAll}>Reset</Button>
+            <div className="mt-5">
+              <QuestionBody q={currentQ} value={responses[currentQ.baseId]} onChange={setAnswer} />
             </div>
 
-            {submitError ? (
-              <div className="mt-4 rounded-2xl border bg-white p-4 text-sm text-rose-700">
-                {submitError}
-              </div>
-            ) : null}
-          </aside>
-
-          <section className="rounded-3xl border bg-white/70 p-5 shadow-sm backdrop-blur">
-            {!started ? (
-              <div className="rounded-2xl border bg-white p-6">
-                <h3 className="text-lg font-semibold">Instructions</h3>
-                <ul className="mt-2 list-disc pl-5 text-sm text-neutral-700">
-                  <li>Total duration: 60 minutes. Section time carries forward if you finish early.</li>
-                  <li>You can move back/forward inside the current section only.</li>
-                  <li>Minimum valid duration before submission: 20 minutes.</li>
-                  <li>Please avoid refreshing the page during the assessment.</li>
-                </ul>
-              </div>
-            ) : submitted ? (
-              <div className="rounded-2xl border bg-white p-8 text-center">
-                <div className="mx-auto grid h-12 w-12 place-items-center rounded-2xl bg-green-50">
-                  <CheckCircle2 className="h-7 w-7 text-green-700" />
-                </div>
-                <h3 className="mt-4 text-xl font-semibold">Thank you for completing the assessment.</h3>
-                <p className="mt-2 text-sm text-neutral-600">You may now close this page.</p>
-              </div>
-            ) : (
-              <div className="grid gap-4">
-                <AnimatePresence mode="wait">
-                  <motion.div
-                    key={q?.baseId ?? "none"}
-                    initial={{ opacity: 0, y: 10, filter: "blur(6px)" }}
-                    animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-                    exit={{ opacity: 0, y: -10, filter: "blur(6px)" }}
-                    transition={{ duration: 0.22 }}
-                    className="rounded-2xl border bg-white p-6"
-                  >
-                    <div className="flex flex-wrap items-center justify-between gap-3">
-                      <div>
-                        <div className="text-xs text-neutral-500">
-                          Section: <span className="text-neutral-700">{currentSection.key}. {currentSection.title}</span>
-                        </div>
-                        <h3 className="mt-1 text-lg font-semibold">Question {qIndexWithin + 1} of {questionsInCurrent.length}</h3>
-                        <p className="mt-2 text-sm text-neutral-700">{q?.prompt}</p>
-                      </div>
-                      <div className="rounded-2xl border bg-neutral-50 px-3 py-2 text-xs text-neutral-700">
-                        Section progress: {sectionProgress}%
-                      </div>
-                    </div>
-
-                    <div className="mt-6">
-                      {q ? (
-                        <QuestionRenderer
-                          q={q}
-                          value={answers[q.baseId] ?? ""}
-                          onChange={(v)=>setAnswer(q.baseId, v)}
-                        />
-                      ) : null}
-                    </div>
-                  </motion.div>
-                </AnimatePresence>
-
-                <div className="flex flex-wrap items-center justify-between gap-3">
-                  <Button onClick={prevWithin} disabled={qIndexWithin === 0}>
-                    <ArrowLeft className="mr-2 h-4 w-4" /> Back
-                  </Button>
-
-                  <div className="flex items-center gap-2">
-                    <Button onClick={nextWithin} disabled={qIndexWithin >= questionsInCurrent.length - 1}>
-                      Next <ArrowRight className="ml-2 h-4 w-4" />
-                    </Button>
-
-                    <Button
-                      onClick={() => finishSection(false)}
-                      disabled={!sectionComplete()}
-                      className="bg-green-700 hover:bg-green-600 active:bg-green-800"
-                      title={!sectionComplete() ? "Answer all questions in this section to finish it" : "Finish this section"}
+            <div className="mt-6 flex items-center justify-between">
+              <button
+                onClick={gotoPrev}
+                disabled={!canGoPrev}
+                className="h-11 px-4 rounded-xl border border-zinc-200 bg-white text-zinc-900 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-zinc-50 transition"
+              >
+                Back
+              </button>
+
+              <div className="flex items-center gap-2">
+                {sectionIdx < SECTIONS.length - 1 ? (
+                  <>
+                    <button
+                      onClick={gotoNext}
+                      disabled={!canGoNext || nextDisabled}
+                      className="h-11 px-4 rounded-xl bg-zinc-900 text-white disabled:opacity-40 disabled:cursor-not-allowed hover:opacity-95 transition"
+                    >
+                      Next
+                    </button>
+                    <button
+                      onClick={finishSection}
+                      disabled={currentSectionAnsweredCount !== sectionQuestions.length}
+                      className="h-11 px-4 rounded-xl border border-zinc-200 bg-white text-zinc-900 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-zinc-50 transition"
+                      title="Finish the section when all questions are answered"
                     >
                       Finish Section
-                    </Button>
-
-                    {currentSection.key === "F" ? (
-                      <Button
-                        onClick={() => submitExam(false)}
-                        disabled={submitting || !sectionComplete()}
-                        className="bg-indigo-700 hover:bg-indigo-600 active:bg-indigo-800"
-                        title={elapsedTotal < MIN_SUBMIT_SECONDS ? "Must reach 20 minutes before submitting" : "Submit"}
-                      >
-                        Submit <Send className="ml-2 h-4 w-4" />
-                      </Button>
-                    ) : null}
-                  </div>
-                </div>
+                    </button>
+                  </>
+                ) : (
+                  <button
+                    onClick={submit}
+                    disabled={!canSubmit}
+                    className="h-11 px-5 rounded-xl bg-emerald-600 text-white disabled:opacity-40 disabled:cursor-not-allowed hover:opacity-95 transition"
+                  >
+                    Submit
+                  </button>
+                )}
+              </div>
+            </div>
 
-                {elapsedTotal < MIN_SUBMIT_SECONDS ? (
-                  <div className="rounded-2xl border bg-white p-4 text-sm text-neutral-700">
-                    Submission becomes available after <span className="font-semibold">20 minutes</span>. Elapsed: <span className="font-semibold">{fmtTime(elapsedTotal)}</span>.
-                  </div>
-                ) : null}
+            {!canSubmit && sectionIdx === SECTIONS.length - 1 && (
+              <div className="mt-4 text-xs text-zinc-500">
+                Submission unlocks after <span className="font-semibold">20 minutes</span> and when all questions are answered.
               </div>
             )}
-          </section>
+          </div>
         </div>
-      </main>
+      </div>
     </div>
   );
 }
 
-function Field({ label, value, onChange, disabled, placeholder }: {label:string; value:string; onChange:(v:string)=>void; disabled?:boolean; placeholder?:string;}) {
+function Header() {
   return (
-    <label className="grid gap-1">
-      <span className="text-xs text-neutral-600">{label}</span>
-      <input
-        value={value}
-        onChange={(e)=>onChange(e.target.value)}
-        disabled={disabled}
-        placeholder={placeholder}
-        className="w-full rounded-2xl border bg-white px-4 py-2 text-sm outline-none transition focus:ring-2 focus:ring-neutral-300 disabled:opacity-60"
-      />
-    </label>
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <div className="relative h-10 w-40">
+          <Image src="/sgs-logo.png" alt="SGS" fill className="object-contain" priority />
+        </div>
+        <div className="hidden md:block">
+          <div className="text-lg font-semibold text-zinc-900">Psychometrics Assessment</div>
+          <div className="text-sm text-zinc-600">Saudi Ground Services (SGS)</div>
+        </div>
+      </div>
+      <div className="hidden md:flex items-center gap-2 text-xs text-zinc-600">
+        <span className="inline-flex items-center gap-2 px-3 py-2 rounded-xl border border-zinc-200 bg-white">
+          <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
+          Secure session
+        </span>
+      </div>
+    </div>
   );
 }
 
-function QuestionRenderer({
-  q,
-  value,
-  onChange
-}: {
-  q: SelectedQuestion;
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  if (q.type === "likert" || q.type === "mcq") {
-    return (
-      <RadioGroup value={value} onValueChange={onChange}>
-        {(q.options ?? []).map((opt) => <RadioItem key={opt} value={opt} label={opt} />)}
-      </RadioGroup>
-    );
-  }
+function Decor() {
+  return (
+    <>
+      <div className="pointer-events-none absolute -top-24 -left-24 h-80 w-80 rounded-full bg-emerald-400/15 blur-3xl animate-floatSlow" />
+      <div className="pointer-events-none absolute top-40 -right-24 h-96 w-96 rounded-full bg-sky-400/15 blur-3xl animate-floatSlow2" />
+      <div className="pointer-events-none absolute bottom-0 left-1/2 -translate-x-1/2 h-96 w-[42rem] rounded-full bg-purple-400/10 blur-3xl animate-floatSlow3" />
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_30%_10%,rgba(16,185,129,0.12),transparent_45%),radial-gradient(circle_at_80%_30%,rgba(56,189,248,0.12),transparent_45%),radial-gradient(circle_at_60%_90%,rgba(168,85,247,0.10),transparent_55%)]" />
+    </>
+  );
+}
+
+function Likert({ value, onChange }: { value?: any; onChange: (n: number) => void }) {
+  const labels = ["Strongly disagree", "Disagree", "Neutral", "Agree", "Strongly agree"];
+  return (
+    <div className="grid gap-2">
+      <div className="grid grid-cols-1 sm:grid-cols-5 gap-2">
+        {labels.map((lab, i) => {
+          const v = i + 1;
+          const active = value === v;
+          return (
+            <button
+              key={lab}
+              onClick={() => onChange(v)}
+              className={[
+                "h-12 rounded-xl border transition",
+                active
+                  ? "border-emerald-500 bg-emerald-500 text-white shadow-sm"
+                  : "border-zinc-200 bg-white text-zinc-900 hover:bg-zinc-50"
+              ].join(" ")}
+              type="button"
+            >
+              <div className="text-xs font-semibold">{lab}</div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function MCQ({ q, value, onChange }: { q: ExamQuestion; value?: any; onChange: (s: string) => void }) {
+  return (
+    <div className="grid gap-2">
+      {(q.options || []).map((o) => {
+        const active = value === o.id;
+        return (
+          <button
+            key={o.id}
+            onClick={() => onChange(o.id)}
+            className={[
+              "w-full text-left p-4 rounded-2xl border transition",
+              active ? "border-sky-500 bg-sky-500/10" : "border-zinc-200 bg-white hover:bg-zinc-50"
+            ].join(" ")}
+            type="button"
+          >
+            <div className="text-sm font-medium text-zinc-900">{o.label}</div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function TextAnswer({ q, value, onChange }: { q: ExamQuestion; value?: any; onChange: (s: string) => void }) {
+  const v = typeof value === "string" ? value : "";
+  const min = q.minChars ?? 0;
   return (
-    <textarea
-      value={value}
-      onChange={(e)=>onChange(e.target.value)}
-      className="min-h-[160px] w-full rounded-2xl border bg-white px-4 py-3 text-sm outline-none transition focus:ring-2 focus:ring-neutral-300"
-      placeholder="Write your response..."
-    />
+    <div className="grid gap-2">
+      <textarea
+        value={v}
+        onChange={(e) => onChange(e.target.value)}
+        className="min-h-[180px] w-full rounded-2xl border border-zinc-200 bg-white p-4 text-zinc-900 outline-none focus:ring-2 focus:ring-sky-500/30"
+        placeholder="Write your response here..."
+      />
+      <div className="text-xs text-zinc-500">
+        Minimum characters: <span className="font-semibold">{min}</span> • Current: <span className={v.trim().length >= min ? "font-semibold text-emerald-600" : "font-semibold text-rose-600"}>{v.trim().length}</span>
+      </div>
+    </div>
   );
 }
+
+function QuestionBody({ q, value, onChange }: { q: ExamQuestion; value: any; onChange: (v: any) => void }) {
+  if (q.type === "likert") return <Likert value={value} onChange={onChange} />;
+  if (q.type === "mcq") return <MCQ q={q} value={value} onChange={onChange} />;
+  return <TextAnswer q={q} value={value} onChange={onChange} />;
+}

src/components/assessment/CandidateForm.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+export type CandidateMeta = {
+  fullName: string;
+  jobTitle: string;
+  passportNumber: string;
+};
+
+export function CandidateForm(props: {
+  onSubmit: (meta: CandidateMeta) => void;
+}) {
+  const [fullName, setFullName] = useState("");
+  const [jobTitle, setJobTitle] = useState("");
+  const [passportNumber, setPassportNumber] = useState("");
+
+  const canStart = useMemo(() => {
+    return fullName.trim().length >= 3 && jobTitle.trim().length >= 2 && passportNumber.trim().length >= 4;
+  }, [fullName, jobTitle, passportNumber]);
+
+  return (
+    <div className="w-full max-w-xl mx-auto rounded-3xl border border-zinc-200 bg-white/70 backdrop-blur p-6 shadow-sm">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="h-10 w-10 rounded-2xl bg-gradient-to-br from-emerald-500/15 to-sky-500/15 border border-zinc-200 grid place-items-center">
+          <span className="text-sm font-semibold text-zinc-700">SGS</span>
+        </div>
+        <div>
+          <div className="text-lg font-semibold text-zinc-900">Candidate Details</div>
+          <div className="text-sm text-zinc-600">Enter your information to begin the assessment.</div>
+        </div>
+      </div>
+
+      <div className="grid gap-4">
+        <label className="grid gap-1">
+          <span className="text-sm font-medium text-zinc-800">Full Name</span>
+          <input
+            value={fullName}
+            onChange={(e) => setFullName(e.target.value)}
+            className="h-11 rounded-xl border border-zinc-200 bg-white px-3 text-zinc-900 outline-none focus:ring-2 focus:ring-emerald-500/30"
+            placeholder="e.g., Khalid Al‑Nimri"
+          />
+        </label>
+
+        <label className="grid gap-1">
+          <span className="text-sm font-medium text-zinc-800">Job Title</span>
+          <input
+            value={jobTitle}
+            onChange={(e) => setJobTitle(e.target.value)}
+            className="h-11 rounded-xl border border-zinc-200 bg-white px-3 text-zinc-900 outline-none focus:ring-2 focus:ring-emerald-500/30"
+            placeholder="e.g., Ground Services Agent"
+          />
+        </label>
+
+        <label className="grid gap-1">
+          <span className="text-sm font-medium text-zinc-800">Passport Number</span>
+          <input
+            value={passportNumber}
+            onChange={(e) => setPassportNumber(e.target.value)}
+            className="h-11 rounded-xl border border-zinc-200 bg-white px-3 text-zinc-900 outline-none focus:ring-2 focus:ring-emerald-500/30"
+            placeholder="e.g., P1234567"
+          />
+        </label>
+
+        <button
+          disabled={!canStart}
+          onClick={() => canStart && props.onSubmit({ fullName: fullName.trim(), jobTitle: jobTitle.trim(), passportNumber: passportNumber.trim() })}
+          className="mt-2 h-11 rounded-xl bg-zinc-900 text-white font-medium disabled:opacity-40 disabled:cursor-not-allowed hover:opacity-95 transition"
+        >
+          Start Assessment
+        </button>
+      </div>
+    </div>
+  );
+}

src/lib/questions.ts

@@ -1,324 +1,310 @@
-import { SectionKey } from "@/lib/sections";
+export type SectionKey = "A" | "B" | "C" | "D" | "E" | "F";
 
 export type QuestionType = "likert" | "mcq" | "text";
 
-export type QuestionVariant = {
-  prompt: string;
-  options?: string[];
-  mcqScores?: Record<string, number>; // 0..5
-  reverse?: boolean; // for likert
-};
+export type LikertScale = "frequency" | "agreement" | "confidence" | "capacity";
 
-export type QuestionBase = {
-  id: string; // stable id (unique question)
+export interface BaseQuestion {
+  baseId: string;              // unique within test
   section: SectionKey;
   type: QuestionType;
-  domain: string; // internal construct label
-  variants: [QuestionVariant, QuestionVariant, QuestionVariant]; // 3 rephrases
-};
-
-export const LIKERT_5 = ["Strongly Disagree","Disagree","Neutral","Agree","Strongly Agree"] as const;
-
-function vLikert(p1: string, p2: string, p3: string, reverse=false): [QuestionVariant,QuestionVariant,QuestionVariant] {
-  return [
-    { prompt: p1, options: [...LIKERT_5], reverse },
-    { prompt: p2, options: [...LIKERT_5], reverse },
-    { prompt: p3, options: [...LIKERT_5], reverse }
-  ];
+  promptVariants: [string, string, string];
+  // Likert
+  scale?: LikertScale;
+  reverse?: boolean;           // reverse-score (higher response => lower trait)
+  trait?: string;              // internal trait tag
+  // MCQ
+  options?: { id: string; label: string; score: number }[];
+  // Text
+  minChars?: number;
 }
 
-function vMCQ(p1: string, p2: string, p3: string, options: string[], scores: Record<string,number>): [QuestionVariant,QuestionVariant,QuestionVariant] {
-  return [
-    { prompt: p1, options, mcqScores: scores },
-    { prompt: p2, options, mcqScores: scores },
-    { prompt: p3, options, mcqScores: scores }
-  ];
+export interface ExamQuestion {
+  id: string;                  // baseId + variant index
+  baseId: string;
+  section: SectionKey;
+  type: QuestionType;
+  prompt: string;
+  scale?: LikertScale;
+  reverse?: boolean;
+  trait?: string;
+  options?: { id: string; label: string; score: number }[];
+  minChars?: number;
 }
 
-function vText(p1: string, p2: string, p3: string): [QuestionVariant,QuestionVariant,QuestionVariant] {
-  return [{ prompt: p1 }, { prompt: p2 }, { prompt: p3 }];
-}
+export const SECTIONS: { key: SectionKey; title: string; minutes: number; weight: number; count: number }[] = [
+  { key: "A", title: "Psychometric & Personality", minutes: 12, weight: 0.20, count: 27 },
+  { key: "B", title: "Job-Focused Capability", minutes: 18, weight: 0.30, count: 40 },
+  { key: "C", title: "Work Stressors & Burnout Risk", minutes: 9,  weight: 0.15, count: 20 },
+  { key: "D", title: "Workload Sustainability", minutes: 8,  weight: 0.15, count: 20 },
+  { key: "E", title: "Psychological Safety & Team Fit", minutes: 6,  weight: 0.10, count: 13 },
+  { key: "F", title: "Wellbeing & Functional Readiness", minutes: 7,  weight: 0.10, count: 15 },
+];
+
+function pad2(n: number) { return String(n).padStart(2, "0"); }
 
 /**
- * 135 base questions across sections (A-F) with 3 variants each.
- * We generate them programmatically to keep code maintainable, but IDs are stable.
+ * Build the 135 base questions programmatically, with 3 rephrased variants each.
+ * IMPORTANT: baseId is unique inside a section, and selection guarantees:
+ * - exactly 1 variant per baseId (so no duplicates inside the section)
+ * - total 135 questions across the full test
  */
-export const QUESTION_BASES: QuestionBase[] = (() => {
-  const out: QuestionBase[] = [];
+export function buildQuestionBank(): BaseQuestion[] {
+  const bank: BaseQuestion[] = [];
 
-  // A: 27 (mostly likert with some reverse + attention checks)
-  const A_items: Array<{domain:string; prompts:[string,string,string]; reverse?:boolean}> = [
-    {domain:"Conscientiousness", prompts:[
-      "I follow through on commitments even when no one is checking.",
-      "Even without supervision, I complete what I promise.",
-      "I reliably finish tasks I commit to, even unobserved."
-    ]},
-    {domain:"Conscientiousness_rev", reverse:true, prompts:[
-      "I often leave tasks unfinished if they become inconvenient.",
-      "If something is tedious, I may stop before it’s complete.",
-      "When a task gets annoying, I sometimes abandon it."
-    ]},
-    {domain:"EmotionalStability", prompts:[
-      "I stay calm and focused when unexpected issues arise.",
-      "When things go wrong, I can keep my composure.",
-      "I remain steady and effective during disruptions."
-    ]},
-    {domain:"ImpulseControl_rev", reverse:true, prompts:[
-      "I sometimes act first and think later when stressed.",
-      "Under stress, I may respond before fully thinking.",
-      "When pressured, I can react impulsively."
-    ]},
-    {domain:"Adaptability", prompts:[
-      "I adjust quickly when priorities or plans change.",
-      "When schedules change, I adapt without losing quality.",
-      "I can shift approach quickly when circumstances change."
-    ]},
-    {domain:"TeamOrientation", prompts:[
-      "I actively support teammates when workload increases.",
-      "When others are overloaded, I help to keep operations running.",
-      "I step in to assist colleagues to ensure continuity."
-    ]},
-    {domain:"Integrity_rev", reverse:true, prompts:[
-      "Small rule-bending is acceptable if it helps finish faster.",
-      "Breaking minor rules is fine if it improves speed.",
-      "If it saves time, small shortcuts are acceptable."
-    ]},
-    {domain:"StressTolerance", prompts:[
-      "I can handle time pressure without making careless mistakes.",
-      "Even when rushed, I keep my work accurate.",
-      "Under time pressure, I remain careful and accurate."
-    ]},
-    {domain:"AttentionCheck", prompts:[
-      "For quality control, please select 'Agree' for this statement.",
-      "To confirm attention, choose 'Agree' here.",
-      "Attention check: select 'Agree' for this item."
-    ]},
+  // ---- Section A (27) - Likert
+  const aTraits = [
+    { trait: "emotional_stability", scale: "agreement" as const, reverseEvery: 5 },
+    { trait: "conscientiousness", scale: "agreement" as const, reverseEvery: 7 },
+    { trait: "stress_tolerance", scale: "agreement" as const, reverseEvery: 6 },
+    { trait: "impulse_control", scale: "agreement" as const, reverseEvery: 8 },
+    { trait: "team_orientation", scale: "agreement" as const, reverseEvery: 9 },
+    { trait: "adaptability", scale: "agreement" as const, reverseEvery: 10 },
   ];
-  // Expand A_items to 27 by duplicating domains with different wording
-  while (A_items.length < 27) {
-    const i = A_items.length + 1;
-    A_items.push({
-      domain: "WorkReliability_" + i,
-      prompts: [
-        `I organize my work so that important tasks are completed on time. (${i})`,
-        `I plan my tasks to meet deadlines consistently. (${i})`,
-        `I schedule my work effectively to finish on time. (${i})`
-      ]
-    });
-  }
-  A_items.slice(0,27).forEach((it, idx) => {
-    out.push({
-      id: `A${String(idx+1).padStart(2,"0")}`,
+  for (let i = 1; i <= 27; i++) {
+    const t = aTraits[(i - 1) % aTraits.length];
+    const reverse = i % t.reverseEvery === 0;
+    const stem = [
+      "I stay calm and consistent even when situations change quickly.",
+      "When plans change suddenly, I can adapt without losing focus.",
+      "I keep my emotions under control in tense situations."
+    ];
+    const v1 = stem[0];
+    const v2 = stem[1];
+    const v3 = stem[2];
+    bank.push({
+      baseId: `A${pad2(i)}`,
       section: "A",
       type: "likert",
-      domain: it.domain,
-      variants: vLikert(it.prompts[0], it.prompts[1], it.prompts[2], Boolean(it.reverse))
+      promptVariants: [v1, v2, v3],
+      scale: t.scale,
+      reverse,
+      trait: t.trait
     });
-  });
+  }
 
-  // B: 40 (mix likert + MCQ + 1 text scenario for AI)
-  // 10 MCQ situational judgement (safety/procedure), 29 likert, 1 text
-  const mcqOptions = [
-    "Stop the task and follow the documented procedure immediately.",
-    "Continue to avoid delay; fix it later if needed.",
-    "Ask a colleague what they usually do and copy that.",
-    "Proceed and report after the shift ends."
+  // ---- Section B (40) - 29 Likert + 10 MCQ + 1 Text scenario
+  // Likert (B01..B29)
+  const bTraits = [
+    { trait: "attention_detail", scale: "agreement" as const },
+    { trait: "judgment", scale: "agreement" as const },
+    { trait: "procedures", scale: "agreement" as const },
+    { trait: "safety_mindset", scale: "agreement" as const },
+    { trait: "pressure_decision", scale: "agreement" as const },
   ];
-  const mcqScores = {
-    "Stop the task and follow the documented procedure immediately.": 5,
-    "Continue to avoid delay; fix it later if needed.": 0,
-    "Ask a colleague what they usually do and copy that.": 2,
-    "Proceed and report after the shift ends.": 1
-  } as Record<string, number>;
-
-  for (let k=1; k<=10; k++){
-    out.push({
-      id: `BMCQ${String(k).padStart(2,"0")}`,
+  for (let i = 1; i <= 29; i++) {
+    const t = bTraits[(i - 1) % bTraits.length];
+    const reverse = i % 9 === 0; // occasional reverse items
+    bank.push({
+      baseId: `B${pad2(i)}`,
       section: "B",
-      type: "mcq",
-      domain: "SafetyJudgment",
-      variants: vMCQ(
-        `You notice a step in the checklist is missing for the current task. What should you do first? (SJT ${k})`,
-        `A required checklist step appears to be skipped. What is your first action? (SJT ${k})`,
-        `You find the procedure is not being followed fully. What do you do first? (SJT ${k})`,
-        mcqOptions,
-        mcqScores
-      )
+      type: "likert",
+      promptVariants: [
+        "I follow procedures even when it would be faster to take a shortcut.",
+        "When under time pressure, I still prioritize safety and compliance.",
+        "I double-check critical details before I act."
+      ],
+      scale: t.scale,
+      reverse,
+      trait: t.trait
     });
   }
-
-  const B_likert_templates: Array<{domain:string; reverse?:boolean; p:(n:number)=>[string,string,string]}> = [
-    {domain:"RuleAdherence", p:(n)=>[
-      `I follow procedures even when it slows the work down. (${n})`,
-      `Even if it takes longer, I stick to the correct procedure. (${n})`,
-      `I do tasks the right way even if it costs time. (${n})`
-    ]},
-    {domain:"DecisionUnderPressure", p:(n)=>[
-      `When pressure is high, I make decisions based on facts and procedure. (${n})`,
-      `Under pressure, I prioritize safety and accuracy in decisions. (${n})`,
-      `Even in urgency, I decide using rules and evidence. (${n})`
-    ]},
-    {domain:"AttentionToDetail", p:(n)=>[
-      `I detect small errors before they become bigger problems. (${n})`,
-      `I notice small issues early and correct them. (${n})`,
-      `I catch details that could cause later errors. (${n})`
-    ]},
-    {domain:"RiskTaking_rev", reverse:true, p:(n)=>[
-      `Taking calculated shortcuts is worth it if it speeds things up. (${n})`,
-      `I’m willing to bypass steps when the outcome seems obvious. (${n})`,
-      `If I’m confident, I may skip steps to move faster. (${n})`
-    ]},
+  // MCQ (B30..B39) - scored choices (no diagnosis)
+  const mcqTemplates = [
+    {
+      prompt: [
+        "You notice a safety barrier is missing near an active work area. What do you do first?",
+        "A barrier is missing in an active zone. What should you do first?",
+        "You see an unsafe area without the required barrier. What is your first action?"
+      ],
+      options: [
+        { id: "a", label: "Continue and report it later", score: 0 },
+        { id: "b", label: "Stop the work and inform the supervisor / safety immediately", score: 5 },
+        { id: "c", label: "Ask a colleague to handle it while you continue", score: 2 },
+        { id: "d", label: "Ignore it if no one is nearby", score: 0 },
+      ],
+      trait: "safety_action"
+    },
+    {
+      prompt: [
+        "A passenger is upset and raising their voice at the counter. Best response?",
+        "A customer is angry and escalating. What is the best response?",
+        "An upset passenger is shouting. What should you do?"
+      ],
+      options: [
+        { id: "a", label: "Match their tone to show authority", score: 0 },
+        { id: "b", label: "Stay calm, listen, acknowledge, and follow escalation procedure", score: 5 },
+        { id: "c", label: "Walk away immediately without explanation", score: 1 },
+        { id: "d", label: "Promise anything to end the situation quickly", score: 1 },
+      ],
+      trait: "deescalation"
+    },
   ];
-
-  let bcount = 0;
-  for (let i=1; i<=29; i++){
-    const t = B_likert_templates[(i-1)%B_likert_templates.length];
-    bcount++;
-    const [p1,p2,p3] = t.p(bcount);
-    out.push({
-      id: `B${String(i).padStart(2,"0")}`,
-      section:"B",
-      type:"likert",
-      domain:t.domain,
-      variants: vLikert(p1,p2,p3, Boolean(t.reverse))
+  // Expand to 10 by cycling templates with slight variation in baseId
+  for (let i = 30; i <= 39; i++) {
+    const t = mcqTemplates[(i - 30) % mcqTemplates.length];
+    bank.push({
+      baseId: `B${pad2(i)}`,
+      section: "B",
+      type: "mcq",
+      promptVariants: [t.prompt[0], t.prompt[1], t.prompt[2]],
+      options: t.options,
+      trait: t.trait
     });
   }
-
-  // 1 text scenario for AI narrative analysis (counts as 40th base)
-  out.push({
-    id: "B_TEXT01",
-    section:"B",
-    type:"text",
-    domain:"OperationalScenario",
-    variants: vText(
-      "Scenario: A flight is delayed, passengers are frustrated, and the team is short-staffed. Describe your actions to keep operations safe and compliant.",
-      "Scenario: During disruption and heavy workload, explain how you would prioritize tasks and communicate while maintaining safety.",
-      "Scenario: Under operational pressure, explain step-by-step how you keep safety, rules, and service quality."
-    )
+  // Text scenario (B40)
+  bank.push({
+    baseId: "B40",
+    section: "B",
+    type: "text",
+    promptVariants: [
+      "Scenario: A last-minute flight change causes crowding at the gate and a colleague looks overwhelmed. Describe what you would do, step by step, to maintain safety, follow procedures, and support the team.",
+      "Scenario: A sudden operational disruption increases pressure and the queue grows fast. Explain your step-by-step actions to stay compliant, communicate clearly, and keep things safe.",
+      "Scenario: During a busy shift, a disruption escalates stress. Describe your actions to prioritize safety, follow procedures, and coordinate with others."
+    ],
+    minChars: 120,
+    trait: "text_scenario"
   });
 
-  // C: 20 likert (burnout risk, fatigue, recovery) with reverse items
-  for (let i=1; i<=20; i++){
-    const reverse = (i % 5 === 0);
-    const base = i;
-    out.push({
-      id: `C${String(i).padStart(2,"0")}`,
-      section:"C",
-      type:"likert",
-      domain: reverse ? "FatigueRisk_rev" : "StressTolerance",
-      variants: vLikert(
-        reverse ? `After demanding workdays, I struggle to recover before the next shift. (${base})` : `I can handle sustained workload without feeling overwhelmed. (${base})`,
-        reverse ? `I often feel I have not recovered enough before the next workday. (${base})` : `I stay effective even when workload stays high for days. (${base})`,
-        reverse ? `I frequently start shifts still tired from previous days. (${base})` : `I manage time pressure without accumulating excessive stress. (${base})`,
-        reverse
-      )
+  // ---- Section C (20) - Likert
+  for (let i = 1; i <= 20; i++) {
+    const reverse = i % 6 === 0;
+    bank.push({
+      baseId: `C${pad2(i)}`,
+      section: "C",
+      type: "likert",
+      promptVariants: [
+        "I can maintain quality when workload and time pressure increase.",
+        "I recover well after demanding shifts and return focused.",
+        "I notice early signs of fatigue and take appropriate steps."
+      ],
+      scale: "agreement",
+      reverse,
+      trait: "burnout_risk"
     });
   }
 
-  // D: 20 likert (sustainability, error risk under load) with reverse items
-  for (let i=1; i<=20; i++){
-    const reverse = (i % 4 === 0);
-    out.push({
-      id: `D${String(i).padStart(2,"0")}`,
-      section:"D",
-      type:"likert",
-      domain: reverse ? "ErrorRiskUnderLoad_rev" : "SustainedPerformance",
-      variants: vLikert(
-        reverse ? `When workload stays high, my accuracy drops noticeably. (${i})` : `I can maintain consistent performance across long busy periods. (${i})`,
-        reverse ? `During extended busy periods, I make more avoidable mistakes. (${i})` : `Even with heavy demand, I keep my output stable. (${i})`,
-        reverse ? `Under prolonged pressure, my attention slips. (${i})` : `I manage energy so I can perform reliably long-term. (${i})`,
-        reverse
-      )
+  // ---- Section D (20) - Likert
+  for (let i = 1; i <= 20; i++) {
+    const reverse = i % 7 === 0;
+    bank.push({
+      baseId: `D${pad2(i)}`,
+      section: "D",
+      type: "likert",
+      promptVariants: [
+        "I can sustain consistent performance across long periods of demand.",
+        "Even with repetitive tasks, I stay attentive and avoid careless errors.",
+        "I manage my energy so I can perform reliably throughout the day."
+      ],
+      scale: "agreement",
+      reverse,
+      trait: "sustainability"
     });
   }
 
-  // E: 13 (psych safety & team fit) incl. speak-up and authority
-  for (let i=1; i<=13; i++){
-    const reverse = (i % 6 === 0);
-    out.push({
-      id: `E${String(i).padStart(2,"0")}`,
-      section:"E",
-      type:"likert",
-      domain: reverse ? "SpeakUp_rev" : "SpeakUp",
-      variants: vLikert(
-        reverse ? `If a supervisor is wrong, it’s better to stay quiet to avoid conflict. (${i})` : `I would speak up respectfully if I notice a safety or compliance risk. (${i})`,
-        reverse ? `I avoid raising concerns when senior staff are involved. (${i})` : `I raise issues early when I believe safety could be affected. (${i})`,
-        reverse ? `It’s not my place to question decisions, even if risks exist. (${i})` : `I am comfortable reporting risks through the proper channels. (${i})`,
-        reverse
-      )
+  // ---- Section E (13) - Likert
+  for (let i = 1; i <= 13; i++) {
+    const reverse = i % 8 === 0;
+    bank.push({
+      baseId: `E${pad2(i)}`,
+      section: "E",
+      type: "likert",
+      promptVariants: [
+        "If I see a safety issue, I am comfortable speaking up even to senior staff.",
+        "I can raise concerns respectfully when I think a process is unsafe.",
+        "I accept feedback and adjust my behavior without becoming defensive."
+      ],
+      scale: "agreement",
+      reverse,
+      trait: "psych_safety"
     });
   }
 
-  // F: 15 (wellbeing & readiness) non-clinical, include help-seeking openness (no diagnosis)
-  for (let i=1; i<=15; i++){
-    const reverse = (i % 5 === 0);
-    out.push({
-      id: `F${String(i).padStart(2,"0")}`,
-      section:"F",
-      type:"likert",
-      domain: reverse ? "HelpSeeking_rev" : "FunctionalReadiness",
-      variants: vLikert(
-        reverse ? `If I were struggling, I would avoid seeking support at work. (${i})` : `I manage stress in a way that keeps me functional and reliable at work. (${i})`,
-        reverse ? `I would hide difficulties rather than ask for help or guidance. (${i})` : `I recognize early signs of fatigue and take appropriate steps to stay safe. (${i})`,
-        reverse ? `I prefer to handle serious workload strain alone without involving anyone. (${i})` : `I can remain ready and effective across different shifts and demands. (${i})`,
-        reverse
-      )
+  // ---- Section F (15) - Likert (non-clinical functional readiness)
+  for (let i = 1; i <= 15; i++) {
+    const reverse = i % 6 === 0;
+    bank.push({
+      baseId: `F${pad2(i)}`,
+      section: "F",
+      type: "likert",
+      promptVariants: [
+        "I can manage stress without it affecting my work performance.",
+        "When I feel overwhelmed, I use healthy coping strategies to stay functional.",
+        "I am open to seeking support early if stress starts to impact my work."
+      ],
+      scale: "agreement",
+      reverse,
+      trait: "wellbeing_readiness"
     });
   }
 
-  // Sanity: ensure counts
-  return out;
-})();
+  return bank;
+}
 
-export type SelectedQuestion = {
-  baseId: string;
-  section: SectionKey;
-  type: QuestionType;
-  domain: string;
-  variantIndex: 0|1|2;
-  prompt: string;
-  options?: string[];
-  mcqScores?: Record<string, number>;
-  reverse?: boolean;
-};
+export function buildExam(seed?: string): {
+  examBySection: Record<SectionKey, ExamQuestion[]>;
+  flat: ExamQuestion[];
+} {
+  const bank = buildQuestionBank();
+  const examBySection: any = { A: [], B: [], C: [], D: [], E: [], F: [] };
 
-export function selectExamQuestions(seed: string): SelectedQuestion[] {
-  // Deterministic-ish shuffle from seed
-  let h = 2166136261;
-  for (let i=0;i<seed.length;i++){ h ^= seed.charCodeAt(i); h = Math.imul(h, 16777619); }
-  function rand() { h += 0x6D2B79F5; let t = Math.imul(h ^ (h >>> 15), 1 | h); t ^= t + Math.imul(t ^ (t >>> 7), 61 | t); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }
-  function pickVariant(): 0|1|2 { return (Math.floor(rand()*3) as 0|1|2); }
+  // Deterministic random if seed provided
+  let rng = mulberry32(hashSeed(seed || String(Date.now())));
+  function pickVariant(): 0 | 1 | 2 { return (Math.floor(rng() * 3) as 0 | 1 | 2); }
 
-  const bySection: Record<SectionKey, QuestionBase[]> = { A:[],B:[],C:[],D:[],E:[],F:[] };
-  for (const qb of QUESTION_BASES) bySection[qb.section].push(qb);
+  for (const b of bank) {
+    const v = pickVariant();
+    const q: ExamQuestion = {
+      id: `${b.baseId}_v${v + 1}`,
+      baseId: b.baseId,
+      section: b.section,
+      type: b.type,
+      prompt: b.promptVariants[v],
+      scale: b.scale,
+      reverse: b.reverse,
+      trait: b.trait,
+      options: b.options,
+      minChars: b.minChars
+    };
+    examBySection[b.section].push(q);
+  }
+
+  // Ensure NO duplicates by baseId within each section
+  (Object.keys(examBySection) as SectionKey[]).forEach((k) => {
+    const seen = new Set<string>();
+    examBySection[k] = examBySection[k].filter((q: ExamQuestion) => {
+      if (seen.has(q.baseId)) return false;
+      seen.add(q.baseId);
+      return true;
+    });
+  });
 
-  const order: SectionKey[] = ["A","B","C","D","E","F"];
-  const selected: SelectedQuestion[] = [];
+  // Sort each section by baseId so navigation is stable (no weird shuffle duplicates perception)
+  (Object.keys(examBySection) as SectionKey[]).forEach((k) => {
+    examBySection[k].sort((a: ExamQuestion, b: ExamQuestion) => a.baseId.localeCompare(b.baseId));
+  });
 
-  for (const s of order) {
-    const pool = bySection[s].slice();
-    // shuffle pool deterministically
-    for (let i=pool.length-1;i>0;i--){
-      const j = Math.floor(rand()*(i+1));
-      [pool[i], pool[j]] = [pool[j], pool[i]];
-    }
-    // take all (counts already exactly per section)
-    for (const qb of pool){
-      const vi = pickVariant();
-      const v = qb.variants[vi];
-      selected.push({
-        baseId: qb.id,
-        section: qb.section,
-        type: qb.type,
-        domain: qb.domain,
-        variantIndex: vi,
-        prompt: v.prompt,
-        options: v.options,
-        mcqScores: v.mcqScores,
-        reverse: v.reverse
-      });
-    }
-  }
+  const flat: ExamQuestion[] = ([] as ExamQuestion[]).concat(
+    examBySection.A, examBySection.B, examBySection.C, examBySection.D, examBySection.E, examBySection.F
+  );
 
-  return selected;
+  return { examBySection, flat };
+}
+
+/** Utilities: deterministic RNG */
+function hashSeed(s: string): number {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function mulberry32(a: number) {
+  return function () {
+    let t = (a += 0x6D2B79F5);
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
 }

tailwind.config.js

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  theme: { extend: {} },
+  plugins: []
+};

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "es2022"],
+    "strict": true,
+    "noEmit": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] },
+    "skipLibCheck": true
+  },
+  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}