<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SA STEM Tutor - Home</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">SA STEM Tutor</a>
            <div class="navbar-nav ms-auto">
                {% if user %}
                    <a class="nav-link" href="{{ url_for('dashboard') }}">Dashboard</a>
                    <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
                {% else %}
                    <a class="nav-link" href="{{ url_for('login') }}">Login</a>
                {% endif %}
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-8 mx-auto text-center">
                <h1>Welcome to SA STEM Tutor</h1>
                <p class="lead">Your AI-powered South African educational assistant</p>
                
                {% if not user %}
                    <div class="mt-4">
                        <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg me-3">Login to Get Started</a>
                        <a href="{{ url_for('pricing') }}" class="btn btn-outline-primary btn-lg">View Pricing</a>
                    </div>
                {% else %}
                    <div class="mt-4">
                        <a href="{{ url_for('dashboard') }}" class="btn btn-primary btn-lg">Go to Dashboard</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</body>
</html>