/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Video Course Types interface Course { id: string; title: string; description: string; category: 'Neural Training' | 'Strength' | 'Flexibility' | 'Cognitive Performance'; difficulty: 'Beginner' | 'Intermediate' | 'Advanced'; duration: number; // in minutes price: number; videoUrl: string; thumbnailUrl: string; sections: CourseSection[]; } interface CourseSection { id: string; title: string; videos: CourseVideo[]; } interface CourseVideo { id: string; title: string; duration: number; completed: boolean; } // Expanded Mock Course Data const mockCourses: Course[] = [ { id: 'neural-focus-1', title: 'Neural Focus Fundamentals', description: 'Enhance cognitive performance through targeted neural exercises', category: 'Neural Training', difficulty: 'Beginner', duration: 45, price: 29.99, videoUrl: 'https://maxm-imggenurl.web.val.run/neural-training-course-preview', thumbnailUrl: 'https://maxm-imggenurl.web.val.run/neural-course-thumbnail', sections: [ { id: 'intro-section', title: 'Introduction to Neural Training', videos: [ { id: 'intro-video-1', title: 'What is Neural Fitness?', duration: 12, completed: false }, { id: 'intro-video-2', title: 'Brain Plasticity Explained', duration: 15, completed: false } ] } ] }, { id: 'cognitive-performance-1', title: 'Cognitive Performance Mastery', description: 'Advanced techniques to boost mental clarity and focus', category: 'Cognitive Performance', difficulty: 'Advanced', duration: 60, price: 49.99, videoUrl: 'https://maxm-imggenurl.web.val.run/cognitive-performance-course', thumbnailUrl: 'https://maxm-imggenurl.web.val.run/cognitive-course-thumbnail', sections: [ { id: 'focus-section', title: 'Concentration Techniques', videos: [ { id: 'focus-video-1', title: 'Mindfulness and Attention', duration: 20, completed: false }, { id: 'focus-video-2', title: 'Meditation Strategies', duration: 25, completed: false } ] } ] }, { id: 'neural-strength-1', title: 'Neural Strength Integration', description: 'Combine physical and mental training for optimal performance', category: 'Strength', difficulty: 'Intermediate', duration: 55, price: 39.99, videoUrl: 'https://maxm-imggenurl.web.val.run/neural-strength-course', thumbnailUrl: 'https://maxm-imggenurl.web.val.run/strength-course-thumbnail', sections: [ { id: 'strength-section', title: 'Mind-Muscle Connection', videos: [ { id: 'strength-video-1', title: 'Neurological Muscle Activation', duration: 18, completed: false }, { id: 'strength-video-2', title: 'Advanced Strength Protocols', duration: 22, completed: false } ] } ] } ]; function VideoPlayer({ course }: { course: Course }) { const [currentVideo, setCurrentVideo] = useState(null); const [progress, setProgress] = useState(0); const handleVideoProgress = (watchedPercentage: number) => { setProgress(watchedPercentage); }; useEffect(() => { // Default to first video in first section when course is selected if (course.sections.length > 0 && course.sections[0].videos.length > 0) { setCurrentVideo(course.sections[0].videos[0]); } }, [course]); return (

{currentVideo ? (

{currentVideo.title}

) : (

Select a video to begin

)}

{course.sections.map(section => (

{section.title}

{section.videos.map(video => (

setCurrentVideo(video)} > {video.title}

{video.duration} mins {video.completed && ( ✓ )}

))}

Progress: {Math.round(progress)}% Course Duration: {course.duration} mins

); } function CourseCatalog() { const [selectedCourse, setSelectedCourse] = useState(null); const [filter, setFilter] = useState(null); const filteredCourses = filter ? mockCourses.filter(course => course.category === filter) : mockCourses; return (

NeuroFit Course Catalog

{['Neural Training', 'Cognitive Performance', 'Strength'].map(category => ( ))}

{filteredCourses.map(course => (

setSelectedCourse(course)} >

{course.title}

{course.description}

{course.difficulty} ${course.price.toFixed(2)}

))}

{selectedCourse && (

)}

); } function App() { return ; } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` NeuroFit Courses

`, { headers: { "Content-Type": "text/html" } }); }

adventurousApricotGopher

Version 5