function MainComponent() { const [language, setLanguage] = React.useState("nl"); const [selectedQuiz, setSelectedQuiz] = React.useState(null); const [currentQuestion, setCurrentQuestion] = React.useState(0); const [userAnswers, setUserAnswers] = React.useState([]); const [quizScore, setQuizScore] = React.useState(null); const translations = { nl: { title: "Kennisquiz", subtitle: "Test je kennis over de olie- en gasindustrie", selectQuiz: "Selecteer een quiz", question: "Vraag", of: "van", next: "Volgende", submit: "Indienen", restart: "Opnieuw beginnen", score: "Jouw score", correct: "Correct", incorrect: "Incorrect", explanation: "Uitleg", chooseAnswer: "Kies een antwoord", backToQuizzes: "Terug naar quizzes", startQuiz: "Start Quiz" }, en: { title: "Knowledge Quiz", subtitle: "Test your knowledge about the oil and gas industry", selectQuiz: "Select a quiz", question: "Question", of: "of", next: "Next", submit: "Submit", restart: "Restart", score: "Your score", correct: "Correct", incorrect: "Incorrect", explanation: "Explanation", chooseAnswer: "Choose an answer", backToQuizzes: "Back to quizzes", startQuiz: "Start Quiz" } }; const quizzes = [ { id: 1, title: { nl: "Basis Olie & Gas Kennis", en: "Basic Oil & Gas Knowledge" }, questions: [ { question: { nl: "Waar staat FPSO voor?", en: "What does FPSO stand for?" }, options: [ { nl: "Floating Production Storage and Offloading", en: "Floating Production Storage and Offloading" }, { nl: "Fixed Platform Storage Operation", en: "Fixed Platform Storage Operation" }, { nl: "Floating Petroleum System Offshore", en: "Floating Petroleum System Offshore" }, { nl: "Fixed Production Storage Operation", en: "Fixed Production Storage Operation" } ], correct: 0 }, { question: { nl: "Welk bedrijf is Suriname's nationale oliemaatschappij?", en: "Which company is Suriname's national oil company?" }, options: [ "TotalEnergies", "Apache", "Staatsolie", "ExxonMobil" ], correct: 2 }, { question: { nl: "Wat is het hoofddoel van lokale content vereisten?", en: "What is the main purpose of local content requirements?" }, options: [ { nl: "Kosten verlagen", en: "Reduce costs" }, { nl: "Lokale economie ondersteunen", en: "Benefit local economy" }, { nl: "Productie versnellen", en: "Speed up production" }, { nl: "Veiligheid verbeteren", en: "Improve safety" } ], correct: 1 } ] }, { id: 2, title: { nl: "Surinaamse Olie Historie", en: "Suriname Oil History" }, questions: [ { question: { nl: "In welk blok deed TotalEnergies significante ontdekkingen?", en: "In which block did TotalEnergies make significant discoveries?" }, options: [ "Block 45", "Block 58", "Block 62", "Block 33" ], correct: 1 }, { question: { nl: "Wat werd er ontdekt bij Maka Central-1?", en: "What was discovered at Maka Central-1?" }, options: [ { nl: "Aardgas", en: "Natural gas" }, { nl: "Olie", en: "Oil" }, { nl: "Zowel olie als gas", en: "Both oil and gas" }, { nl: "Water", en: "Water" } ], correct: 1 } ] } ]; const t = (key)=>translations[language][key] || key; const startQuiz = (quiz)=>{ setSelectedQuiz(quiz); setCurrentQuestion(0); setUserAnswers([]); setQuizScore(null); }; const handleAnswer = (answerIndex)=>{ const newAnswers = [ ...userAnswers, answerIndex ]; setUserAnswers(newAnswers); if (currentQuestion + 1 < selectedQuiz.questions.length) { setCurrentQuestion(currentQuestion + 1); } else { const correct = newAnswers.reduce((score, answer, index)=>{ return score + (answer === selectedQuiz.questions[index].correct ? 1 : 0); }, 0); setQuizScore(Math.round(correct / selectedQuiz.questions.length * 100)); } }; const resetQuiz = ()=>{ setSelectedQuiz(null); setCurrentQuestion(0); setUserAnswers([]); setQuizScore(null); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 188, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b border-gray-200", __source: { fileName: "", lineNumber: 189, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 190, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, "📝"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#DA020E]", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, t("title")), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, t("subtitle")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage(language === "nl" ? "en" : "nl"), className: "text-gray-600 hover:text-[#DA020E]", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, language === "nl" ? "🇬🇧 EN" : "🇳🇱 NL")))), /*#__PURE__*/ React.createElement("main", { className: "max-w-3xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 209, columnNumber: 7 }, __self: this }, !selectedQuiz ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, t("selectQuiz")), quizzes.map((quiz)=>/*#__PURE__*/ React.createElement("div", { key: quiz.id, className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer", onClick: ()=>startQuiz(quiz), __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, quiz.title[language]), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, quiz.questions.length, " ", language === "nl" ? "vragen" : "questions"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#DA020E] text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors", __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __self: this }, t("startQuiz"))))) : /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6", __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }, quizScore === null ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 236, columnNumber: 19 }, __self: this }, selectedQuiz.title[language]), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 239, columnNumber: 19 }, __self: this }, t("question"), " ", currentQuestion + 1, " ", t("of"), " ", selectedQuiz.questions.length)), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 244, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 mb-4", __source: { fileName: "", lineNumber: 245, columnNumber: 19 }, __self: this }, selectedQuiz.questions[currentQuestion].question[language]), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, selectedQuiz.questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswer(index), className: "w-full text-left p-4 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors", __source: { fileName: "", lineNumber: 250, columnNumber: 23 }, __self: this }, typeof option === "string" ? option : option[language]))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, t("score"), ": ", quizScore, "%"), /*#__PURE__*/ React.createElement("button", { onClick: resetQuiz, className: "bg-[#DA020E] text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this }, t("backToQuizzes"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white border-t border-gray-200 mt-12", __source: { fileName: "", lineNumber: 278, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 279, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600", __source: { fileName: "", lineNumber: 280, columnNumber: 11 }, __self: this }, "© 2025 Suriname Oil & Gas Hub. All rights reserved.")))); }