function MainComponent() { const [currentLevel, setCurrentLevel] = useState(0); const [points, setPoints] = useState(0); const levels = [ { id: 0, title: "Trafikregler", points: 0, required: 0, icon: "fa-solid fa-traffic-light" }, { id: 1, title: "Vägmärken", points: 0, required: 100, icon: "fa-solid fa-signs-post" }, { id: 2, title: "Trafiksäkerhet", points: 0, required: 200, icon: "fa-solid fa-shield" }, { id: 3, title: "Körförhållanden", points: 0, required: 300, icon: "fa-solid fa-cloud-sun" }, { id: 4, title: "Miljö & Teknik", points: 0, required: 400, icon: "fa-solid fa-leaf" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1E1F35] text-white font-roboto p-6", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-12 text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#00ff00] text-4xl font-bold mb-4 tracking-wider", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "KörkortsAppen"), /*#__PURE__*/ React.createElement("div", { className: "text-xl bg-[#252644] rounded-full px-6 py-2 inline-block", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Poäng:"), /*#__PURE__*/ React.createElement("span", { className: "text-[#00ff00] ml-2 font-bold", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, points))), /*#__PURE__*/ React.createElement("div", { className: "relative mb-12", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-3 bg-[#252644] rounded-full shadow-[0_0_10px_rgba(0,255,0,0.2)]", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#00ff00] to-[#00cc00] rounded-full transition-all duration-500 shadow-[0_0_20px_rgba(0,255,0,0.4)]", style: { width: `${currentLevel / (levels.length - 1) * 100}%` }, __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, levels.map((level, index)=>/*#__PURE__*/ React.createElement("div", { key: level.id, className: `p-6 rounded-xl relative ${index <= currentLevel ? "bg-gradient-to-r from-[#252644] to-[#1E1F35] shadow-[0_0_20px_rgba(0,255,0,0.1)]" : "bg-[#252644] opacity-50"}`, style: { border: index <= currentLevel ? "1px solid rgba(0, 255, 0, 0.3)" : "1px solid rgba(255, 255, 255, 0.1)" }, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-2xl ${index <= currentLevel ? "text-[#00ff00]" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: level.icon, __source: { fileName: "", lineNumber: 88, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-1", __source: { fileName: "", lineNumber: 91, columnNumber: 21 }, __self: this }, level.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 92, columnNumber: 21 }, __self: this }, index <= currentLevel ? "Tillgänglig" : `Låst - Kräver ${level.required} poäng`))), index <= currentLevel && /*#__PURE__*/ React.createElement("button", { className: "px-6 py-3 bg-gradient-to-r from-[#00ff00] to-[#00cc00] text-black rounded-full hover:shadow-[0_0_20px_rgba(0,255,0,0.4)] transition-all duration-300 font-bold text-lg", onClick: ()=>{ if (index === currentLevel) { setPoints(points + 100); if (points + 100 >= levels[currentLevel].required) { setCurrentLevel(Math.min(currentLevel + 1, levels.length - 1)); } } }, __source: { fileName: "", lineNumber: 100, columnNumber: 19 }, __self: this }, "Starta"))))), currentLevel === levels.length - 1 && points >= levels[levels.length - 1].required && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-6 bg-gradient-to-r from-[#00ff00] to-[#00cc00] text-black rounded-xl text-center shadow-[0_0_30px_rgba(0,255,0,0.4)]", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, "Grattis!"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "Du är redo för körkortsprovet")))); }