// Quiz module, "Wat is jouw smaak?" / "What's your taste?" // Scored quiz that maps preferences onto the 5 Moyee coffees. const useQuizState = React.useState; const useQuizEffect = React.useEffect; // ── Coffee definitions (bilingual) ── const COFFEES = { nl: { single: { name: 'Single', sub: 'Single Origin Limu · Ethiopia', roast: 'Light roast', notes: 'Citrus, jasmijn, bergamot, rode bessen, cacao', body: 'Levendig & helder', price: '€ 27,00', color: '#292C7E', img: '../assets/products/single.webp', why: 'Onze kroonjuweel, langzaam gebrand op 197°C. De floraalste, friste koffie die we hebben. Voor wie zwarte koffie en filterzettingen kan waarderen.', url: 'https://www.moyeecoffee.com/shop/single-1-kg-4', }, double: { name: 'Double', sub: 'Limu × Jimma · Ethiopia', roast: 'Light–medium roast', notes: 'Honing, sinaasappel, melkchocolade', body: 'In balans', price: '€ 25,00', color: '#519E59', img: '../assets/products/double.webp', why: 'De allrounder. Fruitige Limu en zoete Jimma in perfecte balans. Werkt op filter én espresso, ideaal voor een gemengde koffiekeuken op kantoor.', url: 'https://www.moyeecoffee.com/shop/double-1-kg-5', }, triple: { name: 'Triple', sub: 'Uganda · Rwanda · Congo', roast: 'Medium roast', notes: 'Donkere chocolade, karamel, noten, rijp fruit', body: 'Vol & gebalanceerd', price: '€ 23,00', color: '#501644', img: '../assets/products/triple.webp', why: 'De crowd-pleaser. Vol lichaam, chocoladetonen en gematigde zuren. De beste keuze voor cappuccino/latte en grote kantoren met gemengde voorkeuren.', url: 'https://www.moyeecoffee.com/shop/triple-1-kg-6', }, dark: { name: 'Dark Roast', sub: 'East African Blend', roast: 'Dark roast', notes: 'Donkere chocolade, geroosterde noten, intens', body: 'Vol, rond, krachtig', price: '€ 21,00', color: '#292C2C', img: '../assets/products/dark.webp', why: "Onze meest intense en minst zure koffie. Voor liefhebbers van pittige espresso en stevige melkdrankjes, en collega's die van Lavazza/Illy komen.", url: 'https://www.moyeecoffee.com/shop/dark-1-kg-7', }, microlot: { name: 'Emma Microlot', sub: 'Specialty · Limited release', roast: 'Light roast · specialty grade', notes: 'Complex, hoge cupping score, exclusief', body: 'Verfijnd, voor de connaisseur', price: '€ 33,50', color: '#840048', img: '../assets/products/lion-hills.webp', why: 'Onze limited specialty microlot. Geselecteerd voor de koffie-nerd die het allerbeste van het beste wil. Beperkte voorraad, alleen te krijgen zolang de oogst duurt.', url: 'https://www.moyeecoffee.com/shop', }, }, en: { single: { name: 'Single', sub: 'Single Origin Limu · Ethiopia', roast: 'Light roast', notes: 'Citrus, jasmine, bergamot, red berries, cacao', body: 'Lively & bright', price: '€ 27.00', color: '#292C7E', img: '../assets/products/single.webp', why: 'Our crown jewel, slow-roasted at 197°C. The most floral, freshest coffee we have. For those who appreciate black coffee and filter methods.', url: 'https://www.moyeecoffee.com/shop/single-1-kg-4', }, double: { name: 'Double', sub: 'Limu × Jimma · Ethiopia', roast: 'Light–medium roast', notes: 'Honey, orange, milk chocolate', body: 'In balance', price: '€ 25.00', color: '#519E59', img: '../assets/products/double.webp', why: 'The all-rounder. Fruity Limu and sweet Jimma in perfect balance. Works on filter and espresso, ideal for a mixed coffee kitchen at the office.', url: 'https://www.moyeecoffee.com/shop/double-1-kg-5', }, triple: { name: 'Triple', sub: 'Uganda · Rwanda · Congo', roast: 'Medium roast', notes: 'Dark chocolate, caramel, nuts, ripe fruit', body: 'Full & balanced', price: '€ 23.00', color: '#501644', img: '../assets/products/triple.webp', why: 'The crowd-pleaser. Full body, chocolate tones and moderate acidity. The best choice for cappuccino/latte and large offices with mixed preferences.', url: 'https://www.moyeecoffee.com/shop/triple-1-kg-6', }, dark: { name: 'Dark Roast', sub: 'East African Blend', roast: 'Dark roast', notes: 'Dark chocolate, roasted nuts, intense', body: 'Full, round, powerful', price: '€ 21.00', color: '#292C2C', img: '../assets/products/dark.webp', why: "Our most intense and least acidic coffee. For lovers of strong espresso and robust milk drinks, and colleagues who come from Lavazza/Illy.", url: 'https://www.moyeecoffee.com/shop/dark-1-kg-7', }, microlot: { name: 'Emma Microlot', sub: 'Specialty · Limited release', roast: 'Light roast · specialty grade', notes: 'Complex, high cupping score, exclusive', body: 'Refined, for the connoisseur', price: '€ 33.50', color: '#840048', img: '../assets/products/lion-hills.webp', why: 'Our limited specialty microlot. Selected for the coffee nerd who wants the very best of the best. Limited stock, only available while the harvest lasts.', url: 'https://www.moyeecoffee.com/shop', }, }, }; // ── Quiz questions (bilingual) ── // The score arrays are the same regardless of language. const SCORES = [ [ {dark:4, triple:1}, {triple:4, dark:2, double:1}, {double:4, triple:2}, {single:5, microlot:3, double:1} ], [ {single:4, microlot:3, double:2}, {double:3, triple:4}, {dark:4, triple:1}, {single:1, double:1, triple:1, dark:1, microlot:1} ], [ {single:3, microlot:4}, {double:4, triple:1}, {triple:4, dark:2}, {dark:5, triple:2} ], [ {single:3, microlot:5}, {double:4, triple:3}, {triple:4, double:2, dark:2}, {microlot:5, single:2} ], [ {single:4, microlot:3, double:2}, {triple:2, dark:4}, {triple:4, dark:3, double:2}, {double:3, triple:2} ], [ {triple:3, dark:3, double:2}, {double:3, triple:3, dark:2}, {single:4, microlot:3, double:2}, {double:1, triple:1} ], ]; const QUESTIONS = { nl: [ { id: 'acidity', q: 'Wat is jullie smaak?', sub: 'Je koffie kan intens zijn (dark roast) of frisser (met wat aciditeit). Hou je van wat zuren in je koffie?', opts: ['Liever helemaal niet zuur: ik hou van intens','Een vleugje zuren is prima','Stevig, laat het smaken','Geef mij maar levendig & fris'], }, { id: 'roast', q: 'Welke branding past bij jou?', sub: 'Licht = behoud van origin-smaken. Donker = vollere, gebrande tonen.', opts: ['Licht gebrand','Medium gebrand','Donker gebrand','Geen voorkeur'], }, { id: 'intensity', q: 'Hoe sterk mag het smaken?', sub: 'Sterkte gaat over intensiteit en body, hoeveel "punch" heeft die kop?', opts: ['Subtiel & verfijnd','In balans, niet te heftig','Stevig, laat het smaken',"Vol & krachtig, recht voor z'n raap"], }, { id: 'specialty', q: 'Hoe veel ben je met koffie bezig?', sub: 'Even concreet: zoek je een specialty-ervaring of gewoon iets lekkers in de mok?', opts: ['Specialty, ik ben best een koffie-nerd','Lekkere everyday-koffie zonder fratsen','Iets gangbaars dat iedereen lekker vindt','Het allerbeste, koste wat het kost'], }, { id: 'drink', q: 'Hoe drink je je koffie het liefst?', opts: ['Zwart, filter of pour-over','Espresso puur','Cappuccino, latte, met melk','Een mix, hangt van de dag af'], }, { id: 'machine', q: 'Wat voor machine staat er op kantoor?', sub: 'We leveren bonen heel, of voorgemalen als filter- of espressomaling.', opts: ['Espressomachine met bonenmaler','Volautomaat (bonen erin, kop eruit)','Filter / V60 / Chemex / Moccamaster','Weet ik nog niet, adviseer me'], }, ], en: [ { id: 'acidity', q: "What's your taste?", sub: 'Your coffee can be intense (dark roast) or fresher (with some acidity). Do you like some acidity in your coffee?', opts: ['Prefer no acidity at all: I like it intense','A hint of acidity is fine','Substantial, let it shine','Give me lively & fresh'], }, { id: 'roast', q: 'Which roast level suits you?', sub: 'Light = preserving origin flavours. Dark = fuller, roasted tones.', opts: ['Light roast','Medium roast','Dark roast','No preference'], }, { id: 'intensity', q: 'How intense should it taste?', sub: 'Intensity is about body, how much punch does that cup have?', opts: ['Subtle & refined','Balanced, not too heavy','Substantial, let it shine','Full & powerful, straight to the point'], }, { id: 'specialty', q: 'How into coffee are you?', sub: 'Honestly: are you looking for a specialty experience or just something tasty in the mug?', opts: ["Specialty, I'm quite the coffee nerd",'Good everyday coffee without fuss','Something common that everyone likes','The very best, whatever it costs'], }, { id: 'drink', q: 'How do you prefer your coffee?', opts: ['Black, filter or pour-over','Pure espresso','Cappuccino, latte, with milk','A mix, depends on the day'], }, { id: 'machine', q: 'What machine is at the office?', sub: 'We deliver whole beans, or pre-ground as filter or espresso grind.', opts: ['Espresso machine with bean grinder','Bean-to-cup machine','Filter / V60 / Chemex / Moccamaster','Not sure yet, advise me'], }, ], }; // ── Rebuild questions with score arrays merged in ── function buildQuestions(lang) { return QUESTIONS[lang].map((q, qi) => ({ ...q, opts: q.opts.map((label, oi) => ({label, score: SCORES[qi][oi]})), })); } function QuizButton({onOpen}) { const {lang} = React.useContext(window.LangContext); const label = lang === 'en' ? "What's your taste? Take the quiz" : 'Wat is jouw smaak? Doe de quiz'; return ( ); } /* ───── Quiz teaser strip ───── */ function QuizTeaser({onOpen}) { const {lang} = React.useContext(window.LangContext); const eyebrow = lang === 'en' ? 'Taste quiz · 6 questions · 60 seconds' : 'Smaakquiz · 6 vragen · 60 seconden'; const heading = lang === 'en' ? <>Which Moyee fits your office? : <>Welke Moyee past bij jouw kantoor?; return (
{eyebrow}

{heading}

); } /* ───── Quiz modal ───── */ function QuizModal({open, onClose}) { const {lang} = React.useContext(window.LangContext); const questions = buildQuestions(lang); const [step, setStep] = useQuizState(0); const [answers, setAnswers] = useQuizState({}); // {questionId: optIndex} const isResult = step >= questions.length; const total = questions.length; useQuizEffect(() => { if (open) { setStep(0); setAnswers({}); } }, [open]); useQuizEffect(() => { const h = e => { if (e.key === 'Escape') onClose(); }; if (open) document.addEventListener('keydown', h); return () => document.removeEventListener('keydown', h); }, [open]); if (!open) return null; function pick(qid, oi) { const next = {...answers, [qid]: oi}; setAnswers(next); setTimeout(() => setStep(s => s + 1), 220); } function computeScores() { const scores = {single:0, double:0, triple:0, dark:0, microlot:0}; let maxPossible = {single:0, double:0, triple:0, dark:0, microlot:0}; questions.forEach(q => { const oi = answers[q.id]; const optMaxes = {single:0,double:0,triple:0,dark:0,microlot:0}; q.opts.forEach(o => Object.entries(o.score).forEach(([k,v]) => { if (v > optMaxes[k]) optMaxes[k] = v; })); Object.entries(optMaxes).forEach(([k,v]) => { maxPossible[k] += v; }); if (oi == null) return; const opt = q.opts[oi]; Object.entries(opt.score).forEach(([k,v]) => { scores[k] += v; }); }); const pct = {}; Object.keys(scores).forEach(k => { pct[k] = maxPossible[k] > 0 ? Math.round((scores[k] / maxPossible[k]) * 100) : 0; }); return pct; } const q = questions[step]; const progress = Math.round((step / total) * 100); const quizLabel = lang === 'en' ? 'Taste quiz' : 'Smaakquiz'; const questionOf = lang === 'en' ? `Question ${step+1} of ${total}` : `Vraag ${step+1} van ${total}`; const prevLabel = lang === 'en' ? '← Previous question' : '← Vorige vraag'; const closeLabel = 'Sluit quiz'; return (
e.stopPropagation()} className="quiz-modal-shell" style={{ background:'#272727',color:'#fff',width:'100%',maxWidth:880,maxHeight:'92vh',overflow:'auto', position:'relative',animation:'qpop 320ms ease-out', borderTop:'4px solid #FFD900', }}> {!isResult ? (
{quizLabel} {questionOf}

{q.q}

{q.sub &&

{q.sub}

}
{q.opts.map((o,i) => ( ))}
{step > 0 && ( )}
) : ( { setStep(0); setAnswers({}); }} onClose={onClose}/> )}
); } function QuizResult({scores, lang, onRestart, onClose}) { const coffees = COFFEES[lang]; const ranked = Object.entries(scores).sort((a,b) => b[1]-a[1]); const [topKey, topPct] = ranked[0]; const top = coffees[topKey]; const t = lang === 'en' ? { matchLabel: 'Your match', matchHeading: <>Our {top.name} fits best, matchSub: 'Based on your 6 answers.', flavorLabel: 'Taste profile', quoteBtn: 'Request quote →', shopBtn: 'Visit shop', restTitle: 'The other roasts', restart: '↺ Redo the quiz', tastingCta: <>Not sure? Order a trial package, drink, compare, choose., } : { matchLabel: 'Jouw match', matchHeading: <>Onze {top.name} past het best, matchSub: 'Op basis van jouw 6 antwoorden.', flavorLabel: 'Smaakprofiel', quoteBtn: 'Vraag offerte aan →', shopBtn: 'Bekijk shop', restTitle: 'De andere roasts', restart: '↺ Quiz opnieuw doen', tastingCta: <>Niet zeker? Bestel een proefpakket, drink, vergelijk, kies., }; return (
{t.matchLabel}

{t.matchHeading}

{t.matchSub}

{topPct}% match
{top.name}
{top.sub}
{top.roast} · {top.body} · {top.price}

{top.why}

{t.flavorLabel} {top.notes}
{t.quoteBtn} {t.shopBtn}
{t.restTitle}
{ranked.slice(1).map(([k,p]) => { const c = coffees[k]; return (
{c.name}
{c.notes}
{p}%
); })}
{t.tastingCta}
); } Object.assign(window, {QuizButton, QuizTeaser, QuizModal});