frontend/src/pages/Roadmap.tsx

import React from 'react';
import { BookOpen, Code, Database, Brain, Stethoscope, Shield, Wrench, Users, TrendingUp, Award, Target, Crown, ExternalLink, Clock, Star, Users2, Globe, Video, FileText, Laptop } from 'lucide-react';

interface Course {
  title: string;
  platform: string;
  url: string;
  duration: string;
  level: 'Beginner' | 'Intermediate' | 'Advanced';
  rating?: number;
}

interface Book {
  title: string;
  author: string;
  url: string;
  description: string;
}

interface PhaseProps {
  phaseNumber: number;
  title: string;
  description: string;
  items: {
    title: string;
    objective: string;
    icon: React.ReactNode;
    courses: Course[];
    books?: Book[];
    topics: string[];
    practicalProjects?: string[];
    estimatedTime: string;
  }[];
  icon: React.ReactNode;
  color: string;
  isLast?: boolean;
}

const Phase: React.FC<PhaseProps> = ({ phaseNumber, title, description, items, icon, color, isLast }) => {
  return (
    <div className="relative">
      {/* Timeline line */}
      {!isLast && (
        <div className="absolute left-8 top-20 w-0.5 h-full bg-gray-300 z-0"></div>
      )}
      
      <div className="relative z-10 flex items-start mb-16">
        {/* Phase circle indicator */}
        <div className={`flex-shrink-0 w-16 h-16 rounded-full ${color} flex items-center justify-center mr-8 shadow-lg`}>
          <div className="text-white font-bold text-lg">{phaseNumber}</div>
        </div>
        
        {/* Phase content */}
        <div className="flex-grow">
          <div className="mb-6">
            <h2 className="text-2xl font-bold text-gray-900 mb-2">{title}</h2>
            <p className="text-gray-600 text-lg">{description}</p>
          </div>
          
          <div className="space-y-8">
            {items.map((item, index) => (
              <div key={index} className="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg p-8 border border-gray-200 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300 ml-8 group">
                {/* Header with icon and title */}
                <div className="flex items-center mb-6">
                  <div className="bg-gradient-to-br from-blue-500 to-purple-600 p-3 rounded-lg mr-4 group-hover:scale-110 transition-transform duration-300">
                    {item.icon}
                  </div>
                  <div className="flex-grow">
                    <h3 className="text-xl font-bold text-gray-900 mb-1">{item.title}</h3>
                    <div className="flex items-center text-sm text-gray-500">
                      <Clock className="h-4 w-4 mr-1" />
                      <span>Estimated time: {item.estimatedTime}</span>
                    </div>
                  </div>
                </div>
                
                {/* Objective */}
                <div className="mb-6 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                  <h4 className="text-sm font-semibold text-blue-900 mb-2 flex items-center">
                    <Target className="h-4 w-4 mr-2" />
                    Objective
                  </h4>
                  <p className="text-sm text-blue-800">{item.objective}</p>
                </div>
                
                {/* Courses */}
                <div className="mb-6">
                  <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <Video className="h-4 w-4 mr-2" />
                    Recommended Courses
                  </h4>
                  <div className="grid gap-3 sm:grid-cols-2">
                    {item.courses.map((course, courseIndex) => (
                      <a
                        key={courseIndex}
                        href={course.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="block p-4 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all duration-200 group/course"
                      >
                        <div className="flex items-start justify-between mb-2">
                          <h5 className="font-medium text-gray-900 text-sm group-hover/course:text-blue-600 transition-colors">{course.title}</h5>
                          <ExternalLink className="h-3 w-3 text-gray-400 group-hover/course:text-blue-500 flex-shrink-0 ml-2" />
                        </div>
                        <div className="flex items-center justify-between text-xs text-gray-500">
                          <span className="bg-gray-100 px-2 py-1 rounded">{course.platform}</span>
                          <div className="flex items-center space-x-2">
                            <span className={`px-2 py-1 rounded text-xs font-medium ${
                              course.level === 'Beginner' ? 'bg-green-100 text-green-700' :
                              course.level === 'Intermediate' ? 'bg-yellow-100 text-yellow-700' :
                              'bg-red-100 text-red-700'
                            }`}>
                              {course.level}
                            </span>
                            <span>{course.duration}</span>
                            {course.rating && (
                              <div className="flex items-center">
                                <Star className="h-3 w-3 text-yellow-400 fill-current" />
                                <span className="ml-1">{course.rating}</span>
                              </div>
                            )}
                          </div>
                        </div>
                      </a>
                    ))}
                  </div>
                </div>

                {/* Books */}
                {item.books && item.books.length > 0 && (
                  <div className="mb-6">
                    <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                      <BookOpen className="h-4 w-4 mr-2" />
                      Essential Reading
                    </h4>
                    <div className="space-y-3">
                      {item.books.map((book, bookIndex) => (
                        <a
                          key={bookIndex}
                          href={book.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="block p-4 bg-orange-50 rounded-lg border border-orange-200 hover:border-orange-300 hover:shadow-md transition-all duration-200 group/book"
                        >
                          <div className="flex items-start justify-between mb-2">
                            <div>
                              <h5 className="font-medium text-gray-900 text-sm group-hover/book:text-orange-600 transition-colors">{book.title}</h5>
                              <p className="text-xs text-gray-600">by {book.author}</p>
                            </div>
                            <ExternalLink className="h-3 w-3 text-gray-400 group-hover/book:text-orange-500 flex-shrink-0 ml-2" />
                          </div>
                          <p className="text-xs text-gray-600">{book.description}</p>
                        </a>
                      ))}
                    </div>
                  </div>
                )}

                {/* Practical Projects */}
                {item.practicalProjects && item.practicalProjects.length > 0 && (
                  <div className="mb-6">
                    <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                      <Laptop className="h-4 w-4 mr-2" />
                      Hands-on Projects
                    </h4>
                    <div className="bg-green-50 rounded-lg p-4">
                      <ul className="space-y-2">
                        {item.practicalProjects.map((project, projectIndex) => (
                          <li key={projectIndex} className="flex items-start text-sm text-green-800">
                            <div className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></div>
                            {project}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                )}
                
                {/* Topics */}
                <div>
                  <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <FileText className="h-4 w-4 mr-2" />
                    Key Topics to Master
                  </h4>
                  <div className="flex flex-wrap gap-2">
                    {item.topics.map((topic, topicIndex) => (
                      <span
                        key={topicIndex}
                        className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium hover:bg-purple-200 transition-colors"
                      >
                        {topic}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const Roadmap: React.FC = () => {
  const phases = [
    {
      phaseNumber: 1,
      title: "Foundational Knowledge",
      description: "Build essential understanding of AI concepts and programming skills",
      icon: <BookOpen className="h-8 w-8 text-white" />,
      color: "bg-blue-500",
      items: [
        {
          title: "Introduction to AI",
          objective: "Understand the basics of AI, its history, and key concepts.",
          icon: <Brain className="h-6 w-6 text-white" />,
          estimatedTime: "4-6 weeks",
          courses: [
            {
              title: "AI For Everyone",
              platform: "Coursera",
              url: "https://www.coursera.org/learn/ai-for-everyone",
              duration: "4 weeks",
              level: "Beginner",
              rating: 4.8
            },
            {
              title: "Introduction to Artificial Intelligence",
              platform: "edX MIT",
              url: "https://www.edx.org/course/introduction-to-artificial-intelligence-ai",
              duration: "5 weeks",
              level: "Beginner",
              rating: 4.6
            },
            {
              title: "AI Fundamentals",
              platform: "IBM Cognitive Class",
              url: "https://cognitiveclass.ai/courses/artificial-intelligence-fundamentals",
              duration: "3 weeks",
              level: "Beginner"
            }
          ],
          books: [
            {
              title: "Artificial Intelligence: A Guide for Thinking Humans",
              author: "Melanie Mitchell",
              url: "https://www.amazon.com/Artificial-Intelligence-Guide-Thinking-Humans/dp/0374257833",
              description: "An accessible introduction to AI concepts without technical jargon"
            },
            {
              title: "Human Compatible: Artificial Intelligence and the Problem of Control",
              author: "Stuart Russell",
              url: "https://www.amazon.com/Human-Compatible-Artificial-Intelligence-Problem/dp/0525558616",
              description: "Explores the future of AI and its implications for humanity"
            }
          ],
          topics: ["AI vs. ML vs. Deep Learning", "History of AI", "Types of AI", "AI Ethics", "Current Applications", "Future Trends"]
        },
        {
          title: "Basic Programming Skills",
          objective: "Gain proficiency in Python, the most commonly used programming language in AI.",
          icon: <Code className="h-6 w-6 text-white" />,
          estimatedTime: "8-12 weeks",
          courses: [
            {
              title: "Python for Everybody Specialization",
              platform: "Coursera",
              url: "https://www.coursera.org/specializations/python",
              duration: "8 months",
              level: "Beginner",
              rating: 4.8
            },
            {
              title: "Learn Python 3",
              platform: "Codecademy",
              url: "https://www.codecademy.com/learn/learn-python-3",
              duration: "25 hours",
              level: "Beginner",
              rating: 4.7
            },
            {
              title: "Python Programming MOOC",
              platform: "University of Helsinki",
              url: "https://programming-23.mooc.fi/",
              duration: "14 weeks",
              level: "Beginner"
            },
            {
              title: "CS50's Introduction to Programming with Python",
              platform: "Harvard edX",
              url: "https://www.edx.org/course/cs50s-introduction-to-programming-with-python",
              duration: "10 weeks",
              level: "Beginner",
              rating: 4.9
            }
          ],
          books: [
            {
              title: "Python Crash Course",
              author: "Eric Matthes",
              url: "https://www.amazon.com/Python-Crash-Course-Hands-Project-Based/dp/1593279280",
              description: "A hands-on, project-based introduction to programming"
            }
          ],
          practicalProjects: [
            "Build a simple calculator application",
            "Create a weather data scraper using APIs",
            "Develop a basic web scraper with BeautifulSoup",
            "Make a simple data visualization with matplotlib"
          ],
          topics: ["Python Syntax", "Data Structures", "Functions & Classes", "NumPy", "Pandas", "File Handling", "Error Handling", "Libraries & Modules"]
        },
        {
          title: "Data Literacy",
          objective: "Learn about data types, collection, preprocessing, and analysis.",
          icon: <Database className="h-6 w-6 text-white" />,
          estimatedTime: "6-8 weeks",
          courses: [
            {
              title: "Data Science Fundamentals",
              platform: "DataCamp",
              url: "https://www.datacamp.com/tracks/data-scientist-with-python",
              duration: "87 hours",
              level: "Beginner",
              rating: 4.6
            },
            {
              title: "Introduction to Data Science in Python",
              platform: "Coursera (University of Michigan)",
              url: "https://www.coursera.org/learn/python-data-analysis",
              duration: "4 weeks",
              level: "Intermediate",
              rating: 4.5
            },
            {
              title: "Data Analysis with Python",
              platform: "freeCodeCamp",
              url: "https://www.freecodecamp.org/learn/data-analysis-with-python/",
              duration: "300 hours",
              level: "Intermediate"
            }
          ],
          books: [
            {
              title: "Python for Data Analysis",
              author: "Wes McKinney",
              url: "https://www.amazon.com/Python-Data-Analysis-Wrangling-IPython/dp/1491957662",
              description: "Essential guide to data manipulation and analysis with pandas"
            }
          ],
          practicalProjects: [
            "Analyze a real dataset from Kaggle",
            "Create comprehensive data visualizations",
            "Build an interactive dashboard with Streamlit",
            "Perform exploratory data analysis on healthcare data"
          ],
          topics: ["Data Types", "Data Cleaning", "Exploratory Data Analysis", "Statistical Analysis", "Matplotlib", "Seaborn", "Plotly", "Data Ethics"]
        }
      ]
    },
    {
      phaseNumber: 2,
      title: "Core AI Concepts",
      description: "Master fundamental machine learning and deep learning techniques",
      icon: <Brain className="h-8 w-8 text-white" />,
      color: "bg-purple-500",
      items: [
        {
          title: "Machine Learning Basics",
          objective: "Study the fundamentals of machine learning algorithms and techniques.",
          icon: <TrendingUp className="h-6 w-6 text-white" />,
          estimatedTime: "10-12 weeks",
          courses: [
            {
              title: "Machine Learning Course",
              platform: "Coursera (Stanford)",
              url: "https://www.coursera.org/learn/machine-learning",
              duration: "11 weeks",
              level: "Intermediate",
              rating: 4.9
            },
            {
              title: "Scikit-Learn Course",
              platform: "DataCamp",
              url: "https://www.datacamp.com/courses/supervised-learning-with-scikit-learn",
              duration: "4 hours",
              level: "Intermediate",
              rating: 4.7
            },
            {
              title: "Machine Learning A-Z",
              platform: "Udemy",
              url: "https://www.udemy.com/course/machinelearning/",
              duration: "44 hours",
              level: "Beginner",
              rating: 4.5
            },
            {
              title: "Introduction to Machine Learning",
              platform: "MIT OpenCourseWare",
              url: "https://ocw.mit.edu/courses/6-0002-introduction-to-computational-thinking-and-data-science-fall-2016/",
              duration: "12 weeks",
              level: "Intermediate"
            }
          ],
          books: [
            {
              title: "Hands-On Machine Learning",
              author: "Aurélien Géron",
              url: "https://www.amazon.com/Hands-Machine-Learning-Scikit-Learn-TensorFlow/dp/1492032646",
              description: "Practical approach to ML with Python, scikit-learn, and TensorFlow"
            },
            {
              title: "Pattern Recognition and Machine Learning",
              author: "Christopher Bishop",
              url: "https://www.amazon.com/Pattern-Recognition-Learning-Information-Statistics/dp/0387310738",
              description: "Comprehensive theoretical foundation of machine learning"
            }
          ],
          practicalProjects: [
            "Build a house price prediction model",
            "Create a customer segmentation analysis",
            "Develop a recommendation system",
            "Implement classification for medical diagnosis"
          ],
          topics: ["Supervised Learning", "Unsupervised Learning", "Regression", "Classification", "Clustering", "Model Evaluation", "Cross-Validation", "Feature Engineering"]
        },
        {
          title: "Deep Learning",
          objective: "Master neural networks and their applications in various domains.",
          icon: <Brain className="h-6 w-6 text-white" />,
          estimatedTime: "12-16 weeks",
          courses: [
            {
              title: "Deep Learning Specialization",
              platform: "Coursera (deeplearning.ai)",
              url: "https://www.coursera.org/specializations/deep-learning",
              duration: "4 months",
              level: "Intermediate",
              rating: 4.8
            },
            {
              title: "CS231n: Convolutional Neural Networks",
              platform: "Stanford Online",
              url: "http://cs231n.stanford.edu/",
              duration: "16 weeks",
              level: "Advanced"
            },
            {
              title: "Fast.ai Practical Deep Learning",
              platform: "fast.ai",
              url: "https://course.fast.ai/",
              duration: "7 weeks",
              level: "Intermediate",
              rating: 4.9
            },
            {
              title: "PyTorch for Deep Learning",
              platform: "Udacity",
              url: "https://www.udacity.com/course/deep-learning-pytorch--ud188",
              duration: "2 months",
              level: "Intermediate"
            }
          ],
          books: [
            {
              title: "Deep Learning",
              author: "Ian Goodfellow, Yoshua Bengio, Aaron Courville",
              url: "https://www.amazon.com/Deep-Learning-Ian-Goodfellow/dp/0262035618",
              description: "The definitive textbook on deep learning theory and practice"
            }
          ],
          practicalProjects: [
            "Build an image classifier for medical images",
            "Create a neural network for time series forecasting",
            "Develop a generative model for synthetic data",
            "Implement transfer learning for medical imaging"
          ],
          topics: ["Neural Networks", "CNNs", "RNNs", "LSTMs", "GANs", "Transfer Learning", "Optimization", "Regularization", "TensorFlow", "PyTorch"]
        },
        {
          title: "Natural Language Processing",
          objective: "Learn to process and analyze textual data, especially medical literature.",
          icon: <FileText className="h-6 w-6 text-white" />,
          estimatedTime: "8-10 weeks",
          courses: [
            {
              title: "Natural Language Processing Specialization",
              platform: "Coursera (deeplearning.ai)",
              url: "https://www.coursera.org/specializations/natural-language-processing",
              duration: "4 months",
              level: "Intermediate",
              rating: 4.6
            },
            {
              title: "CS224n: Natural Language Processing with Deep Learning",
              platform: "Stanford Online",
              url: "http://web.stanford.edu/class/cs224n/",
              duration: "10 weeks",
              level: "Advanced"
            },
            {
              title: "NLP with Python",
              platform: "DataCamp",
              url: "https://www.datacamp.com/tracks/natural-language-processing-in-python",
              duration: "17 hours",
              level: "Intermediate",
              rating: 4.5
            }
          ],
          books: [
            {
              title: "Natural Language Processing with Python",
              author: "Steven Bird, Ewan Klein, Edward Loper",
              url: "https://www.amazon.com/Natural-Language-Processing-Python-Analyzing/dp/0596516495",
              description: "Practical guide to NLP using NLTK and Python"
            }
          ],
          practicalProjects: [
            "Build a medical text classifier",
            "Create a clinical notes summarizer",
            "Develop sentiment analysis for patient feedback",
            "Implement named entity recognition for medical terms"
          ],
          topics: ["Text Preprocessing", "Tokenization", "Word Embeddings", "Transformers", "BERT", "Sentiment Analysis", "Named Entity Recognition", "Language Models"]
        }
      ]
    },
    {
      phaseNumber: 3,
      title: "AI in Healthcare",
      description: "Apply AI knowledge specifically to healthcare and medical applications",
      icon: <Stethoscope className="h-8 w-8 text-white" />,
      color: "bg-green-500",
      items: [
        {
          title: "Healthcare Data Standards",
          objective: "Master healthcare data formats and interoperability standards.",
          icon: <Database className="h-6 w-6 text-white" />,
          estimatedTime: "6-8 weeks",
          courses: [
            {
              title: "Health Informatics on FHIR",
              platform: "Coursera (UC Davis)",
              url: "https://www.coursera.org/learn/fhir",
              duration: "4 weeks",
              level: "Intermediate",
              rating: 4.5
            },
            {
              title: "Healthcare Data Models and APIs",
              platform: "edX",
              url: "https://www.edx.org/course/healthcare-data-models-and-apis",
              duration: "6 weeks",
              level: "Intermediate"
            },
            {
              title: "DICOM and Medical Imaging",
              platform: "RSNA",
              url: "https://www.rsna.org/education",
              duration: "Self-paced",
              level: "Intermediate"
            }
          ],
          books: [
            {
              title: "Healthcare Information Systems",
              author: "Marion J. Ball",
              url: "https://www.amazon.com/Healthcare-Information-Systems-Marion-Ball/dp/0387403299",
              description: "Comprehensive guide to healthcare IT systems and standards"
            }
          ],
          practicalProjects: [
            "Parse and analyze FHIR resources",
            "Build a DICOM image viewer",
            "Create an HL7 message processor",
            "Develop healthcare data pipeline"
          ],
          topics: ["HL7", "FHIR", "DICOM", "EHR Systems", "Healthcare APIs", "Data Interoperability", "Medical Coding", "Healthcare Databases"]
        },
        {
          title: "AI Applications in Medicine",
          objective: "Study and implement AI solutions for specific medical domains.",
          icon: <Stethoscope className="h-6 w-6 text-white" />,
          estimatedTime: "10-12 weeks",
          courses: [
            {
              title: "AI for Medical Diagnosis",
              platform: "Coursera (deeplearning.ai)",
              url: "https://www.coursera.org/learn/ai-for-medical-diagnosis",
              duration: "3 weeks",
              level: "Intermediate",
              rating: 4.7
            },
            {
              title: "Medical Image Analysis",
              platform: "MIT OpenCourseWare",
              url: "https://ocw.mit.edu/courses/health-sciences-and-technology/",
              duration: "12 weeks",
              level: "Advanced"
            },
            {
              title: "Clinical Data Science",
              platform: "Harvard T.H. Chan School",
              url: "https://www.hsph.harvard.edu/biostatistics/",
              duration: "8 weeks",
              level: "Advanced"
            }
          ],
          books: [
            {
              title: "Artificial Intelligence in Medicine",
              author: "Peter Lucas, Arie Hasman",
              url: "https://www.amazon.com/Artificial-Intelligence-Medicine-Peter-Lucas/dp/0444502753",
              description: "Comprehensive overview of AI applications in healthcare"
            }
          ],
          practicalProjects: [
            "Build a medical image classification system",
            "Create a clinical decision support tool",
            "Develop a drug discovery pipeline",
            "Implement predictive analytics for patient outcomes"
          ],
          topics: ["Medical Imaging AI", "Clinical Decision Support", "Genomics", "Drug Discovery", "Predictive Analytics", "Personalized Medicine", "Telemedicine", "Robotic Surgery"]
        },
        {
          title: "Healthcare AI Ethics & Regulation",
          objective: "Navigate ethical and regulatory challenges in healthcare AI.",
          icon: <Shield className="h-6 w-6 text-white" />,
          estimatedTime: "4-6 weeks",
          courses: [
            {
              title: "AI in Healthcare Ethics",
              platform: "Stanford Medicine",
              url: "https://med.stanford.edu/aiethics.html",
              duration: "4 weeks",
              level: "Intermediate"
            },
            {
              title: "FDA Regulation of AI/ML",
              platform: "FDA",
              url: "https://www.fda.gov/medical-devices/software-medical-device-samd/artificial-intelligence-and-machine-learning-software-medical-device",
              duration: "Self-paced",
              level: "Intermediate"
            }
          ],
          books: [
            {
              title: "The Ethical Algorithm",
              author: "Michael Kearns, Aaron Roth",
              url: "https://www.amazon.com/Ethical-Algorithm-Science-Socially-Design/dp/0190948205",
              description: "Framework for designing ethical AI systems"
            }
          ],
          practicalProjects: [
            "Conduct bias analysis in medical AI models",
            "Design privacy-preserving healthcare AI",
            "Create AI governance framework",
            "Develop explainable AI for medical decisions"
          ],
          topics: ["AI Ethics", "HIPAA Compliance", "FDA Regulations", "Bias Detection", "Explainable AI", "Privacy Protection", "Algorithmic Fairness", "Regulatory Compliance"]
        }
      ]
    },
    {
      phaseNumber: 4,
      title: "Practical Experience",
      description: "Gain hands-on experience with real-world AI projects",
      icon: <Wrench className="h-8 w-8 text-white" />,
      color: "bg-orange-500",
      items: [
        {
          title: "Healthcare AI Projects",
          objective: "Build real-world AI solutions for healthcare challenges.",
          icon: <Laptop className="h-6 w-6 text-white" />,
          estimatedTime: "12-16 weeks",
          courses: [
            {
              title: "Applied Data Science Capstone",
              platform: "Coursera (IBM)",
              url: "https://www.coursera.org/learn/applied-data-science-capstone",
              duration: "6 weeks",
              level: "Advanced",
              rating: 4.4
            },
            {
              title: "Kaggle Learn",
              platform: "Kaggle",
              url: "https://www.kaggle.com/learn",
              duration: "Self-paced",
              level: "Intermediate"
            }
          ],
          practicalProjects: [
            "Medical image analysis with CNNs",
            "Clinical trial outcome prediction",
            "Drug-drug interaction detection",
            "Electronic health record analysis",
            "Medical chatbot development"
          ],
          topics: ["Project Management", "Version Control", "Model Deployment", "Cloud Platforms", "API Development", "Database Management", "Testing", "Documentation"]
        },
        {
          title: "Professional Development",
          objective: "Build network and stay current with healthcare AI trends.",
          icon: <Users2 className="h-6 w-6 text-white" />,
          estimatedTime: "Ongoing",
          courses: [
            {
              title: "Healthcare AI Leadership",
              platform: "MIT xPRO",
              url: "https://learn-xpro.mit.edu/",
              duration: "8 weeks",
              level: "Advanced"
            }
          ],
          practicalProjects: [
            "Join AMIA and attend conferences",
            "Contribute to open-source healthcare AI projects",
            "Publish research papers",
            "Present at healthcare AI meetups"
          ],
          topics: ["Professional Networks", "Research Publications", "Conference Presentations", "Open Source Contribution", "Mentorship", "Industry Trends"]
        }
      ]
    },
    {
      phaseNumber: 5,
      title: "Advanced Topics and Specialization",
      description: "Explore cutting-edge research and develop specialized expertise",
      icon: <TrendingUp className="h-8 w-8 text-white" />,
      color: "bg-red-500",
      items: [
        {
          title: "Advanced AI Research",
          objective: "Master cutting-edge AI techniques and research methodologies.",
          icon: <Award className="h-6 w-6 text-white" />,
          estimatedTime: "16-20 weeks",
          courses: [
            {
              title: "Reinforcement Learning Specialization",
              platform: "Coursera (University of Alberta)",
              url: "https://www.coursera.org/specializations/reinforcement-learning",
              duration: "4 months",
              level: "Advanced",
              rating: 4.7
            },
            {
              title: "Explainable AI",
              platform: "MIT xPRO",
              url: "https://learn-xpro.mit.edu/artificial-intelligence",
              duration: "8 weeks",
              level: "Advanced"
            }
          ],
          topics: ["Reinforcement Learning", "GANs", "Explainable AI", "AutoML", "Federated Learning", "Graph Neural Networks", "Meta-Learning", "Research Methods"]
        },
        {
          title: "Healthcare Specialization",
          objective: "Develop deep expertise in a specific healthcare AI domain.",
          icon: <Target className="h-6 w-6 text-white" />,
          estimatedTime: "6+ months",
          courses: [
            {
              title: "Genomics Data Science",
              platform: "Coursera (Johns Hopkins)",
              url: "https://www.coursera.org/specializations/genomic-data-science",
              duration: "6 months",
              level: "Advanced",
              rating: 4.5
            }
          ],
          topics: ["Medical Imaging", "Genomics", "Clinical Decision Support", "Drug Discovery", "Precision Medicine", "Digital Therapeutics", "Wearables", "Telemedicine"]
        }
      ]
    },
    {
      phaseNumber: 6,
      title: "Implementation and Leadership",
      description: "Lead AI initiatives and drive adoption in healthcare organizations",
      icon: <Crown className="h-8 w-8 text-white" />,
      color: "bg-indigo-500",
      items: [
        {
          title: "Clinical Implementation",
          objective: "Lead successful AI integration in healthcare organizations.",
          icon: <Wrench className="h-6 w-6 text-white" />,
          estimatedTime: "6+ months",
          courses: [
            {
              title: "Healthcare Innovation and Entrepreneurship",
              platform: "Harvard Business School Online",
              url: "https://online.hbs.edu/courses/healthcare-innovation/",
              duration: "8 weeks",
              level: "Advanced"
            }
          ],
          topics: ["Change Management", "Workflow Integration", "ROI Analysis", "Quality Assurance", "Risk Management", "Stakeholder Engagement", "Pilot Studies", "Scale-up Strategies"]
        },
        {
          title: "AI Leadership & Strategy",
          objective: "Drive organizational AI strategy and policy development.",
          icon: <Crown className="h-6 w-6 text-white" />,
          estimatedTime: "Ongoing",
          courses: [
            {
              title: "AI Strategy and Leadership",
              platform: "MIT Sloan",
              url: "https://executive.mit.edu/openenrollment/program/artificial_intelligence_strategy_and_leadership/",
              duration: "3 days",
              level: "Executive"
            }
          ],
          topics: ["Strategic Planning", "Policy Development", "Team Leadership", "Budget Management", "Regulatory Navigation", "Public Speaking", "Grant Writing", "Board Presentations"]
        }
      ]
    }
  ];

  return (
    <div className="max-w-7xl mx-auto">
      <div className="text-center mb-12">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">AI Learning Roadmap</h1>
        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
          A comprehensive guide to mastering artificial intelligence with a focus on healthcare applications. 
          Follow this structured path from foundational concepts to advanced implementation and leadership.
        </p>
      </div>

      <div className="mb-8">
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
          <div className="flex items-center mb-3">
            <Target className="h-6 w-6 text-blue-600 mr-2" />
            <h3 className="text-lg font-semibold text-blue-900">Learning Journey Overview</h3>
          </div>
          <p className="text-blue-800">
            This roadmap is designed as a progressive learning journey spanning 6 phases. Each phase builds upon the previous one, 
            taking you from AI fundamentals to becoming a leader in healthcare AI implementation. Expect to spend 6-12 months on each phase, 
            depending on your background and time commitment.
          </p>
        </div>
      </div>

      <div className="relative">
        {phases.map((phase, index) => (
          <Phase key={phase.phaseNumber} {...phase} isLast={index === phases.length - 1} />
        ))}
      </div>

      <div className="mt-12 text-center">
        <div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg p-8">
          <Award className="h-12 w-12 text-gray-600 mx-auto mb-4" />
          <h3 className="text-2xl font-bold text-gray-900 mb-4">Ready to Begin Your Journey?</h3>
          <p className="text-gray-700 max-w-2xl mx-auto">
            Remember, this roadmap is a guide, not a rigid prescription. Adapt it to your specific interests, 
            background, and career goals. The key is consistent learning and practical application of knowledge.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Roadmap;