import { useState, useEffect } from 'react'; import { getBrandLogo } from './BrandLogos'; interface QuizResult { id: string; slug: string; name: string; brand: string; price: number; image: string; } // Inline SVG icon components const icons: Record = { sneaker: ( ), flame: ( ), bolt: ( ), sparkle: ( ), tag: ( ), euro: ( ), diamond: ( ), arrowUp: ( ), check: ( ), shuffle: ( ), target: ( ), checkCircle: ( ), }; interface StepOption { label: string; value: string; icon: string; logo?: string; } interface Step { question: string; options: StepOption[]; gridClass?: string; buttonClass?: string; } const STEPS: Step[] = [ { question: 'Wat is jouw stijl?', options: [ { label: 'Casual & Relaxed', value: 'casual', icon: 'sneaker' }, { label: 'Streetwear', value: 'streetwear', icon: 'flame' }, { label: 'Sportief', value: 'sportief', icon: 'bolt' }, { label: 'Minimalistisch', value: 'minimalistisch', icon: 'sparkle' }, ], }, { question: 'Wat is je budget?', options: [ { label: 'Onder \u20AC75', value: '75', icon: 'tag' }, { label: '\u20AC75 - \u20AC125', value: '125', icon: 'euro' }, { label: '\u20AC125 - \u20AC200', value: '200', icon: 'diamond' }, { label: 'Maakt niet uit', value: '999', icon: 'arrowUp' }, ], }, { question: 'Welk merk spreekt je aan?', options: [ { label: 'Nike', value: 'nike', icon: 'check', logo: 'nike' }, { label: 'Adidas', value: 'adidas', icon: 'check', logo: 'adidas' }, { label: 'New Balance', value: 'new-balance', icon: 'check', logo: 'new-balance' }, { label: 'Verrras me!', value: 'any', icon: 'shuffle' }, ], }, { question: 'Wat is jouw maat?', gridClass: 'grid-cols-3 sm:grid-cols-7', buttonClass: 'p-3', options: [ { label: '38', value: '38', icon: 'tag' }, { label: '40', value: '40', icon: 'tag' }, { label: '42', value: '42', icon: 'tag' }, { label: '44', value: '44', icon: 'tag' }, { label: '43', value: '43', icon: 'tag' }, { label: '45', value: '45', icon: 'tag' }, { label: 'Geen voorkeur', value: 'any', icon: 'shuffle' }, ], }, ]; export default function StyleQuiz() { const [step, setStep] = useState(0); const [answers, setAnswers] = useState([]); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [started, setStarted] = useState(false); const handleAnswer = async (value: string) => { const newAnswers = [...answers, value]; setAnswers(newAnswers); if (step < STEPS.length - 1) { setStep(step + 1); } else { // Final step — fetch results setLoading(true); try { const [style, budget, brand, size] = newAnswers; let url = `/api/quiz?style=${style}`; if (brand !== 'any') url += `&brand=${brand}`; if (budget !== '999') url += `&maxPrice=${budget}`; if (size && size !== 'any') url += `&size=${size}`; const res = await fetch(url); if (res.ok) { const data = await res.json(); setResults(data.slice(0, 6)); } } catch {} setLoading(false); setStep(STEPS.length); } }; // Save quiz answers when results are loaded useEffect(() => { if (step >= STEPS.length && !loading && answers.length === STEPS.length) { const [style, budget, brand, size] = answers; fetch('/api/user/save-quiz', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ style: style !== 'any' ? style : null, budget: budget !== '999' ? budget : null, brand: brand !== 'any' ? brand : null, size: size !== 'any' ? size : null, }), }).catch(err => console.error('Failed to save quiz answers:', err)); } }, [step, loading, answers]); const reset = () => { setStep(0); setAnswers([]); setResults([]); setStarted(false); }; if (!started) { return (
{icons.target}

Welke sneaker past bij jou?

Beantwoord 4 vragen en ontdek jouw perfecte sneaker match

); } // Show results if (step >= STEPS.length) { return (
{icons.checkCircle}

Jouw sneaker matches!

Op basis van jouw voorkeuren

{loading ? (
) : results.length > 0 ? ( ) : (

Geen exacte matches gevonden. Bekijk alle sneakers

)}
); } // Quiz step const current = STEPS[step]; return (
{/* Progress */}
{STEPS.map((_, i) => (
))}

Vraag {step + 1} van {STEPS.length}

{current.question}

{current.options.map(opt => ( ))}
); }