"""
Header component for SkillSync
"""

import gradio as gr

def create_header():
    """Create the application header"""
    
    gr.Markdown("""
    # 🎓 SkillSync: Generative AI Mastery
    ### A comprehensive journey from foundations to deployment
    
    Master the complete spectrum of Generative AI - from fundamental machine learning concepts 
    to advanced LLM deployment strategies.
    """)
    
    # Stats cards
    gr.HTML("""
    <div style="display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center;">
        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                    color: white; padding: 15px 25px; border-radius: 10px; text-align: center; min-width: 100px;">
            <div style="font-size: 24px; font-weight: bold;">5</div>
            <div style="font-size: 12px;">Modules</div>
        </div>
        <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
                    color: white; padding: 15px 25px; border-radius: 10px; text-align: center; min-width: 100px;">
            <div style="font-size: 24px; font-weight: bold;">25+</div>
            <div style="font-size: 12px;">Hours</div>
        </div>
        <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
                    color: white; padding: 15px 25px; border-radius: 10px; text-align: center; min-width: 100px;">
            <div style="font-size: 24px; font-weight: bold;">5</div>
            <div style="font-size: 12px;">Quizzes</div>
        </div>
        <div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); 
                    color: white; padding: 15px 25px; border-radius: 10px; text-align: center; min-width: 100px;">
            <div style="font-size: 24px; font-weight: bold;">6</div>
            <div style="font-size: 12px;">Projects</div>
        </div>
    </div>
    """)