{% extends "base.html" %}

{% block content %}
<div style="text-align: center; padding: 40px 0;">
    <h2 style="color: #667eea; margin-bottom: 20px;">Welcome to GradeSchoolMathSolver</h2>
    <p style="font-size: 1.2em; color: #666; margin-bottom: 40px;">
        An intelligent math learning platform with RAG-powered bots
    </p>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px;">
        <div style="padding: 30px; background: #f8f9fa; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);">
            <h3 style="color: #667eea; margin-bottom: 15px;">👥 Users</h3>
            <p style="color: #666; margin-bottom: 20px;">View all users and their progress</p>
            <a href="/users" class="button">View Users</a>
        </div>
        
        <div style="padding: 30px; background: #f8f9fa; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);">
            <h3 style="color: #667eea; margin-bottom: 15px;">📝 Take Exam</h3>
            <p style="color: #666; margin-bottom: 20px;">Start a new math exam</p>
            <a href="/exam" class="button">Start Exam</a>
        </div>
        
        <div style="padding: 30px; background: #f8f9fa; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);">
            <h3 style="color: #667eea; margin-bottom: 15px;">🎯 Immersive Exam</h3>
            <p style="color: #666; margin-bottom: 20px;">Create synchronized exams with ordered answering</p>
            <a href="/immersive" class="button" style="background: #4caf50;">New Feature!</a>
        </div>
        
        <div style="padding: 30px; background: #f8f9fa; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);">
            <h3 style="color: #667eea; margin-bottom: 15px;">🤖 RAG Bots</h3>
            <p style="color: #666; margin-bottom: 20px;">Manage RAG bot configurations</p>
            <a href="/agents" class="button">View RAG Bots</a>
        </div>
    </div>
    
    <div style="margin-top: 60px; padding: 30px; background: #f0f4ff; border-radius: 10px;">
        <h3 style="color: #667eea; margin-bottom: 20px;">Features</h3>
        <ul style="list-style: none; text-align: left; max-width: 600px; margin: 0 auto;">
            <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">✨ AI-generated math questions</li>
            <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">🎯 Question classification by category</li>
            <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">📊 User progress tracking</li>
            <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">🔍 RAG-powered learning from history</li>
            <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">🤖 Configurable RAG bots</li>
            <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">🎯 <strong>NEW:</strong> Immersive synchronized exams</li>
            <li style="padding: 10px 0;">📈 Performance analytics</li>
        </ul>
    </div>
</div>
{% endblock %}