function VrLearningHeader({ platformName, mission }) { return /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 text-white p-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, platformName), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-medium font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, mission)); } function VrLearningHeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VrLearningHeader, { platformName: "VR Learning Platform", mission: "Empower professionals with immersive learning experiences", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(VrLearningHeader, { platformName: "Advanced VR Education", mission: "Transforming education through virtual reality", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [username, setUsername] = React.useState(''); const [learningPaths, setLearningPaths] = React.useState([]); const [selectedPath, setSelectedPath] = React.useState(null); const handleInputChange = (e)=>{ setUsername(e.target.value); }; const assessSkillsAndSetPaths = ()=>{ const paths = [ { path: "Healthcare", description: "Master patient care and clinical procedures." }, { path: "Engineering", description: "Learn key engineering principles and applications." }, { path: "Sales", description: "Enhance sales techniques and customer interaction." } ]; setLearningPaths(paths); }; const handleSelectPath = (path)=>{ setSelectedPath(path); }; React.useEffect(()=>{ assessSkillsAndSetPaths(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 font-roboto text-white", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "VR Learning Platform for Professionals"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#010101] mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Personalized Learning Paths"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", value: username, onChange: handleInputChange, className: "w-full p-2 mb-4 border border-gray-300 rounded", placeholder: "Enter your name", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, learningPaths.map((path, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 bg-blue-100 rounded-lg text-[#010101] cursor-pointer", onClick: ()=>handleSelectPath(path), __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, path.path), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, path.description)))), selectedPath && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-purple-100 rounded-lg text-[#010101]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Selected Path: ", selectedPath.path), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, selectedPath.description)))); }