function MainComponent() { const questions = [ { id: 1, content: "¿Cuál es mi color favorito?" }, { id: 2, content: "¿Nombre de mi mascota?" }, { id: 3, content: "¿Mi comida preferida?" } ]; const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const [userAnswers, setUserAnswers] = React.useState({}); const handleInputChange = (event)=>{ const { name, value } = event.target; setUserAnswers({ ...userAnswers, [name]: value }); }; const handleFormSubmit = (event)=>{ event.preventDefault(); if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1); } else { // Here you would typically handle the final form submission alert('Celular desbloqueado con éxito!'); } }; const currentQuestion = questions[currentQuestionIndex]; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-sm w-full bg-white rounded-lg shadow-md p-8 m-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center text-gray-800 font-roboto mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "🧩 Juego de Preguntas"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, currentQuestion.content), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: `answer-${currentQuestion.id}`, placeholder: "Tu respuesta...", value: userAnswers[`answer-${currentQuestion.id}`] || '', onChange: handleInputChange, className: "w-full bg-gray-200 text-gray-700 border border-gray-300 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Siguiente")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-roboto text-gray-500", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Pregunta ", currentQuestionIndex + 1, " de ", questions.length)))); }