function MainComponent() { const [currentQuestion, setCurrentQuestion] = useState(0); const [answers, setAnswers] = useState([]); const [showResults, setShowResults] = useState(false); const [error, setError] = useState(null); const [selectedStyle, setSelectedStyle] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); const questions = [ { question: "Quiero aprender a jugar un nuevo juego de mesa o de cartas. Yo:", options: [ { type: "V", text: "Utilizaría los diagramas que explican las distintas fases, movimientos y estrategias del juego." }, { type: "A", text: "Escucharía a alguien que lo explicara y haría preguntas." }, { type: "R", text: "Leería las instrucciones." }, { type: "K", text: "Observaría a otros jugar antes de unirme al juego." } ] }, { question: "Necesito dar instrucciones a alguien sobre cómo llegar a mi casa. Yo:", options: [ { type: "V", text: "Dibujaría un mapa en un papel o usaría una aplicación para mostrarle el camino." }, { type: "A", text: "Le explicaría verbalmente las indicaciones." }, { type: "R", text: "Le escribiría las instrucciones paso a paso." }, { type: "K", text: "Lo acompañaría hasta mi casa." } ] }, { question: "Estoy a punto de cocinar algo especial para mi familia. Yo:", options: [ { type: "V", text: "Buscaría un video de YouTube que muestre cómo se prepara." }, { type: "A", text: "Llamaría a un amigo para que me explique la receta." }, { type: "R", text: "Seguiría una receta escrita." }, { type: "K", text: "Cocinaría algo que ya he preparado antes sin necesidad de instrucciones." } ] }, { question: "Quiero ayudar a alguien que quiere ir al aeropuerto, al centro comercial o a la estación. Yo:", options: [ { type: "V", text: "Le mostraría el camino en un mapa." }, { type: "A", text: "Le diría cómo llegar." }, { type: "R", text: "Le escribiría las indicaciones (sin un mapa)." }, { type: "K", text: "Lo acompañaría hasta el lugar." } ] }, { question: "Me gustan los sitios web que tienen:", options: [ { type: "V", text: "Diseños interesantes y características visuales." }, { type: "A", text: "Canales de audio donde puedo escuchar música, programas de radio o entrevistas." }, { type: "R", text: "Descripciones escritas, listados y explicaciones interesantes." }, { type: "K", text: "Cosas que puedo probar y hacer." } ] }, { question: "Quiero aprender un nuevo programa, habilidad o juego en una computadora. Yo:", options: [ { type: "V", text: "Observaría las imágenes y diagramas del manual o libro." }, { type: "A", text: "Hablaría con personas que saben sobre el programa." }, { type: "R", text: "Leería las instrucciones escritas que vienen con el programa." }, { type: "K", text: "Usaría los controles o el teclado." } ] }, { question: "He terminado una competencia o una prueba y quisiera algunos consejos. Me gustaría tener:", options: [ { type: "V", text: "Diagramas mostrando lo que hice." }, { type: "A", text: "La oportunidad de hablar sobre lo que hice." }, { type: "R", text: "Descripciones escritas de lo que hice." }, { type: "K", text: "Ejemplos de lo que hice." } ] }, { question: "Quiero aprender a tomar mejores fotos. Yo:", options: [ { type: "V", text: "Usaría ejemplos de buenas y malas fotos mostrando cómo mejorar." }, { type: "A", text: "Hablaría con un experto en fotografía." }, { type: "R", text: "Leería instrucciones escritas sobre cómo tomar buenas fotos." }, { type: "K", text: "Tomaría fotos y las iría mejorando con la práctica." } ] }, { question: "Estoy eligiendo una carrera. Yo:", options: [ { type: "V", text: "Observaría gráficos sobre las diferentes opciones y sus resultados." }, { type: "A", text: "Hablaría con personas que trabajan en las diferentes carreras." }, { type: "R", text: "Leería detalles sobre las diferentes carreras." }, { type: "K", text: "Visitaría lugares de trabajo y probaría diferentes opciones." } ] }, { question: "Quiero aprender sobre un nuevo proyecto. Yo:", options: [ { type: "V", text: "Vería ejemplos del proyecto terminado." }, { type: "A", text: "Hablaría sobre el proyecto con otros." }, { type: "R", text: "Leería instrucciones escritas." }, { type: "K", text: "Comenzaría a trabajar y aprendería sobre la marcha." } ] }, { question: "Me gusta un sitio web porque:", options: [ { type: "V", text: "Tiene un diseño atractivo y características visuales." }, { type: "A", text: "Tiene características de sonido, puedo escuchar música, programas de radio o entrevistas." }, { type: "R", text: "Tiene artículos, listas y explicaciones interesantes para leer." }, { type: "K", text: "Tiene elementos interactivos que puedo probar." } ] }, { question: "Prefiero un profesor o expositor que usa:", options: [ { type: "V", text: "Diagramas, gráficos o presentaciones visuales." }, { type: "A", text: "Preguntas y respuestas, charlas y discusiones grupales." }, { type: "R", text: "Manuales, documentos y lecturas." }, { type: "K", text: "Demostraciones, modelos o sesiones prácticas." } ] }, { question: "He acabado un proyecto. Lo que haría después es:", options: [ { type: "V", text: "Hacer un diagrama mostrando lo que logré." }, { type: "A", text: "Tener una conversación con otros sobre el proyecto." }, { type: "R", text: "Escribir un reporte detallado sobre lo realizado." }, { type: "K", text: "Mostrar a otros lo que hice y que lo prueben." } ] }, { question: "Necesito armar un objeto. Prefiero:", options: [ { type: "V", text: "Ver un video de alguien armándolo." }, { type: "A", text: "Escuchar a alguien explicando cómo armarlo." }, { type: "R", text: "Leer las instrucciones escritas." }, { type: "K", text: "Intentar armarlo y desarmarlo hasta lograrlo." } ] }, { question: "Quiero aprender una nueva habilidad. Yo:", options: [ { type: "V", text: "Vería demostraciones en video." }, { type: "A", text: "Preguntaría a un experto cómo hacerlo." }, { type: "R", text: "Leería sobre cómo hacerlo en un libro o manual." }, { type: "K", text: "Lo intentaría directamente y aprendería haciéndolo." } ] }, { question: "Cuando aprendo en internet prefiero:", options: [ { type: "V", text: "Videos y presentaciones visuales." }, { type: "A", text: "Podcasts y discusiones en audio." }, { type: "R", text: "Leer artículos y textos." }, { type: "K", text: "Ejercicios interactivos y prácticos." } ] } ]; const handleAnswer = (type)=>{ setAnswers([ ...answers, type ]); if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { setShowResults(true); } }; const calculateResults = ()=>{ const results = { V: answers.filter((a)=>a === "V").length, A: answers.filter((a)=>a === "A").length, R: answers.filter((a)=>a === "R").length, K: answers.filter((a)=>a === "K").length }; return results; }; const getResultDescription = (type, score)=>{ const descriptions = { V: "Aprendes mejor con imágenes, diagramas y material visual.", A: "Prefieres escuchar y discutir información.", R: "Te beneficias más de la lectura y escritura.", K: "Aprendes mejor a través de la experiencia práctica." }; return descriptions[type]; }; const getStyleName = (type)=>{ const styles = { V: "bg-[#4CAF50]", A: "bg-[#2196F3]", R: "bg-[#9C27B0]", K: "bg-[#FF9800]" }; return styles[type]; }; const progress = (currentQuestion + 1) / questions.length * 100; const getDetailedRecommendations = (type)=>{ const recommendations = { V: { title: "Estrategias de Aprendizaje Visual", content: `El documento "Resultat_V_VARK.pdf" ofrece estrategias para personas con una preferencia de aprendizaje visual, es decir, aquellas que aprenden mejor a través de representaciones gráficas y elementos visuales. A continuación, se resumen las principales recomendaciones: **Palabras clave:** Diferentes formatos, espacio, gráficos, tablas, diagramas, mapas y planos. **Descripción:** Esta preferencia utiliza simbolismos y diversos formatos, fuentes y colores para enfatizar los puntos importantes. No se limita únicamente a videos e imágenes, sino a todo lo que muestre imágenes reales o visualizaciones mentales. **Técnicas para captar la información:** • Aprender de profesores que utilizan gestos y un lenguaje descriptivo. • Utilizar imágenes, videos, carteles y diapositivas. • Emplear diagramas de flujo o esquemas. • Subrayar y usar diversos colores y resaltadores. • Consultar libros de texto con diagramas y fotografías. • Analizar gráficos. • Utilizar símbolos y dejar espacios en blanco entre palabras. **Estrategias de estudio:** • Implementar todas las técnicas mencionadas anteriormente. • Reconstruir los contenidos utilizando imágenes, esquemas o diagramas. • Experimentar con diferentes disposiciones espaciales. • Dibujar y escribir repetidamente la teoría. • Sustituir palabras por símbolos o siglas. • Revisar las propias notas para estimular la memoria visual. **Para realizar pruebas, asignaciones o exámenes:** • Dibujar representaciones y utilizar diagramas. • Escribir las respuestas del examen. • Recordar las imágenes creadas en las notas. • Practicar la conversión de representaciones visuales nuevamente en palabras.` }, A: { title: "Estrategias de Aprendizaje Auditivo", content: `El documento "Resultat_A_VARK.pdf" proporciona estrategias para personas con una preferencia de aprendizaje auditivo, es decir, aquellas que aprenden mejor a través de la escucha y el habla. A continuación, se resumen las principales recomendaciones: **Palabras clave:** Escuchar, discutir, hablar, cuestionar, recordar. **Descripción:** Esta preferencia se centra en la información que se escucha o se habla, y el uso de preguntas es una parte importante de la estrategia de aprendizaje para las personas con esta preferencia. **Técnicas para captar la información:** • Asistir a las clases. • Participar en debates y tutorías. • Discutir los temas con otras personas. • Hablar sobre los temas con los profesores. • Explicar las nuevas ideas a otras personas. • Utilizar una grabadora. • Recordar ejemplos interesantes, historias, chistes, etc. • Describir imágenes, fotos y otros elementos visuales a alguien que no los ve. **Estudio sin esfuerzo - Conjunto de aprendizaje:** • Las notas pueden ser insuficientes porque se prefiere escuchar. • Se recomienda ampliar las notas hablando con otros y recopilando información de los libros de texto. • Grabar los apuntes o resúmenes y escucharlos. • Pedir a otros que "escuchen" tu comprensión de un tema. • Leer las notas o resúmenes en voz alta. • Explicar tus notas a otra persona. **Para llevar a cabo cualquier prueba, asignación o examen:** • Imaginar que hablas con el examinador. • Escuchar tu propia voz y escribir lo que dices. • Pasar tiempo en lugares tranquilos recordando las ideas. • Practicar la escritura de respuestas a las preguntas del examen. • Decir las respuestas en voz alta o mentalmente. • Pedir que te expliquen la página, por ejemplo. • Las palabras escritas no son tan valiosas como las que se escuchan.` }, R: { title: "Estrategias de Aprendizaje de Lectura/Escritura", content: `El documento "Resultat_R_VARK.pdf" ofrece estrategias para personas con una preferencia de aprendizaje de Lectura/Escritura, es decir, aquellas que aprenden mejor a través de material textual. A continuación, se resumen las principales recomendaciones: **Palabras clave:** Listas de tareas, notas y texto en todos los formatos, ya sean impresos o en línea. **Descripción:** Esta preferencia se centra en el uso de la palabra escrita como el medio más importante para transmitir y recibir información. **Técnicas para captar la información:** • Utilizar listas. • Emplear encabezados. • Consultar diccionarios. • Revisar glosarios. • Leer definiciones. • Estudiar libros de texto. • Realizar lecturas y acudir a la biblioteca. • Tomar notas (a menudo textuales). • Aprender de profesores que utilizan bien las palabras y proporcionan información detallada en frases y notas. • Trabajar con ensayos y manuales (de informática o laboratorio). **Estrategias de estudio:** • Escribir las palabras repetidamente. • Leer las notas (en silencio) varias veces. • Reescribir ideas y principios con otras palabras. • Convertir diagramas o gráficos en enunciados, por ejemplo, "La tendencia es...". • Transformar reacciones, acciones, diagramas, gráficos y flujos en palabras. • Imaginar listas como preguntas de opción múltiple. **Para realizar pruebas, asignaciones o exámenes:** • Escribir las respuestas del examen. • Practicar con preguntas de opción múltiple. • Redactar párrafos, introducciones y conclusiones. • Elaborar listas (a, b, c, d, 1, 2, 3, 4). • Organizar las palabras en jerarquías y puntos.` }, K: { title: "Estrategias de Aprendizaje Kinestésico", content: `El documento "Resultat_K_VARK.pdf" ofrece estrategias para personas con una preferencia de aprendizaje kinestésica, es decir, aquellas que aprenden mejor a través de la experiencia práctica y el uso de todos sus sentidos. A continuación, se resumen las principales recomendaciones: **Palabras clave:** Sentidos, ejercicios prácticos, ejemplos, casos, ensayo y error. **Descripción:** Esta preferencia se basa en utilizar experiencias y elementos reales, incluso cuando se presentan en imágenes o pantallas. **Técnicas para captar la información:** • Involucrar todos los sentidos: vista, tacto, gusto, olfato y oído. • Participar en laboratorios. • Realizar viajes de estudio y experimentar directamente. • Asistir a visitas de campo y experiencias en vivo. • Utilizar ejemplos prácticos de principios teóricos. • Aprender de profesores que proporcionen ejemplos de la vida real. • Aplicar conocimientos en situaciones prácticas. • Practicar enfoques, como en informática. • Aprender mediante ensayo y error. • Coleccionar y estudiar objetos físicos como rocas, plantas, conchas, hierbas, etc. • Asistir a exposiciones, muestras y revisar fotografías. • Utilizar "recetas" o soluciones a problemas, como exámenes anteriores. **Estudio sin esfuerzo - Conjunto de aprendizaje:** • Las notas de una conferencia pueden ser insuficientes si los temas no son "concretos" o "relevantes". • Se tiende a recordar mejor las experiencias reales que ocurrieron. • Incluir numerosos ejemplos en los resúmenes. • Utilizar estudios de casos y aplicaciones para ayudar a comprender principios y conceptos abstractos. • Discutir apuntes con otra persona que también tenga una preferencia kinestésica. • Utilizar imágenes y fotografías que ilustren ideas para facilitar su comprensión. • Volver al laboratorio o al manual de laboratorio para reforzar el aprendizaje. • Recordar experimentos, excursiones y experiencias prácticas. **Para llevar a cabo cualquier prueba, asignación o examen:** • Escribir y practicar respuestas y párrafos. • Realizar juegos de roles para simular la situación del examen en casa. • Experimentar el examen de manera práctica para facilitar su comprensión. • Las ideas presentadas solo son valiosas si se ponen en práctica y resultan relevantes para el individuo. • Es necesario realizar actividades prácticas para comprender plenamente los conceptos.` } }; return recommendations[type]; }; const handleDownloadPDF = async (type)=>{ setIsLoading(true); try { const response = await fetch("/api/generar-pdf-recomendaciones", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type }) }); if (!response.ok) { throw new Error(`Error HTTP: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } window.open(data.url, "_blank"); } catch (err) { console.error("Error al generar PDF:", err); setError("No se pudo generar el PDF. Por favor, inténtalo de nuevo."); } finally{ setIsLoading(false); } }; const Modal = ({ isOpen, onClose, type })=>{ if (!isOpen) return null; const styleInfo = getDetailedRecommendations(type); const styleName = type === "V" ? "Visual" : type === "A" ? "Auditivo" : type === "R" ? "Lectura/Escritura" : "Kinestésico"; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 593, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg max-w-4xl w-full max-h-[80vh] flex flex-col", __source: { fileName: "", lineNumber: 594, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center sticky top-0 bg-white dark:bg-gray-800 rounded-t-lg z-10", __source: { fileName: "", lineNumber: 595, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 596, columnNumber: 13 }, __self: this }, styleInfo.title), /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", __source: { fileName: "", lineNumber: 599, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 603, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 609, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-6 overflow-y-auto", __source: { fileName: "", lineNumber: 619, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "prose dark:prose-invert max-w-none", __source: { fileName: "", lineNumber: 620, columnNumber: 13 }, __self: this }, styleInfo.content.split("\n\n").map((section, index)=>{ if (section.startsWith("**")) { const [title, ...content] = section.split("\n"); return /*#__PURE__*/ React.createElement("div", { key: index, className: "mb-6", __source: { fileName: "", lineNumber: 625, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 626, columnNumber: 23 }, __self: this }, title.replace(/\*\*/g, "")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 629, columnNumber: 23 }, __self: this }, content.map((line, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "pl-4", __source: { fileName: "", lineNumber: 631, columnNumber: 27 }, __self: this }, line)))); } return /*#__PURE__*/ React.createElement("p", { key: index, className: "text-gray-700 dark:text-gray-300 mb-4", __source: { fileName: "", lineNumber: 640, columnNumber: 19 }, __self: this }, section); }))))); }; if (showResults) { const results = calculateResults(); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4", __source: { fileName: "", lineNumber: 658, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 659, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-inter font-bold text-gray-900 dark:text-white mb-8 text-center", __source: { fileName: "", lineNumber: 660, columnNumber: 11 }, __self: this }, "Resultados del Test VARK"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 663, columnNumber: 11 }, __self: this }, Object.entries(results).map(([type, score])=>/*#__PURE__*/ React.createElement("div", { key: type, className: "bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 665, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 669, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-inter font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 670, columnNumber: 19 }, __self: this }, type === "V" ? "Visual" : type === "A" ? "Auditivo" : type === "R" ? "Lectura/Escritura" : "Kinestésico"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-inter font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 679, columnNumber: 19 }, __self: this }, Math.round(score / questions.length * 100), "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4", __source: { fileName: "", lineNumber: 683, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-2.5 rounded-full ${getStyleName(type)}`, style: { width: `${score / questions.length * 100}%` }, __source: { fileName: "", lineNumber: 684, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 text-sm mb-4", __source: { fileName: "", lineNumber: 689, columnNumber: 17 }, __self: this }, getResultDescription(type, score)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedStyle(type); setIsModalOpen(true); }, className: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium", __source: { fileName: "", lineNumber: 692, columnNumber: 17 }, __self: this }, "Leer más recomendaciones →")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 704, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setCurrentQuestion(0); setAnswers([]); setShowResults(false); }, className: "w-full bg-gray-900 dark:bg-gray-700 text-white font-inter py-3 px-6 rounded-md hover:bg-gray-800 dark:hover:bg-gray-600 transition-colors", __source: { fileName: "", lineNumber: 705, columnNumber: 13 }, __self: this }, "Realizar el test nuevamente"))), /*#__PURE__*/ React.createElement(Modal, { isOpen: isModalOpen, onClose: ()=>setIsModalOpen(false), type: selectedStyle, __source: { fileName: "", lineNumber: 717, columnNumber: 9 }, __self: this })); } if (error) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4", __source: { fileName: "", lineNumber: 728, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto text-center text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 729, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-inter font-bold mb-4", __source: { fileName: "", lineNumber: 730, columnNumber: 11 }, __self: this }, "Error"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 731, columnNumber: 11 }, __self: this }, error))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4", __source: { fileName: "", lineNumber: 738, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 739, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 740, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 741, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-inter text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 742, columnNumber: 13 }, __self: this }, "Pregunta ", currentQuestion + 1, " de ", questions.length), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-inter text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 745, columnNumber: 13 }, __self: this }, Math.round(progress), "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2", __source: { fileName: "", lineNumber: 749, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900 dark:bg-gray-500 h-2 rounded-full transition-all duration-300", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 750, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 mb-6 border border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 757, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-inter font-bold text-gray-900 dark:text-white mb-6", __source: { fileName: "", lineNumber: 758, columnNumber: 11 }, __self: this }, questions[currentQuestion].question), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 761, columnNumber: 11 }, __self: this }, questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswer(option.type), className: "w-full text-left p-4 rounded-md border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-inter", __source: { fileName: "", lineNumber: 763, columnNumber: 15 }, __self: this }, option.text)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 774, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentQuestion(Math.max(0, currentQuestion - 1)), disabled: currentQuestion === 0, className: `px-6 py-2 rounded-md border border-gray-200 dark:border-gray-700 font-inter ${currentQuestion === 0 ? "text-gray-400 dark:text-gray-600 cursor-not-allowed" : "text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 775, columnNumber: 11 }, __self: this }, "Anterior"), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-inter text-gray-700 dark:text-gray-300 self-center", __source: { fileName: "", lineNumber: 787, columnNumber: 11 }, __self: this }, currentQuestion + 1, " de ", questions.length), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentQuestion(Math.min(questions.length - 1, currentQuestion + 1)), disabled: currentQuestion === questions.length - 1, className: `px-6 py-2 rounded-md border border-gray-200 dark:border-gray-700 font-inter ${currentQuestion === questions.length - 1 ? "text-gray-400 dark:text-gray-600 cursor-not-allowed" : "text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 790, columnNumber: 11 }, __self: this }, "Siguiente")))); }