{% extends "base.html" %}

{% block title %}Orchid Quiz Game - Five Cities Orchid Society{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="text-center mb-4">
                <h1 class="display-4" style="color: #2B6A30;">❓ Orchid Quiz Game</h1>
                <p class="lead text-muted">Test your orchid knowledge!</p>
                <a href="/games" class="btn btn-outline-success">
                    <i data-feather="arrow-left"></i> Back to Games
                </a>
            </div>
            
            <div class="card shadow">
                <div class="card-body p-4">
                    <div class="text-center">
                        <h3 class="mb-3">🚧 Coming Soon!</h3>
                        <p class="text-muted mb-4">The Orchid Quiz Game is currently under development. We're creating an engaging trivia experience to test your orchid expertise.</p>
                        
                        <div class="row text-center mb-4">
                            <div class="col-md-4">
                                <div class="feature-item">
                                    <i data-feather="help-circle" class="text-success mb-2" style="width: 48px; height: 48px;"></i>
                                    <h5>Multiple Choice</h5>
                                    <p class="text-muted">Variety of question types</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="feature-item">
                                    <i data-feather="book" class="text-warning mb-2" style="width: 48px; height: 48px;"></i>
                                    <h5>Learning Mode</h5>
                                    <p class="text-muted">Educational explanations</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="feature-item">
                                    <i data-feather="trending-up" class="text-info mb-2" style="width: 48px; height: 48px;"></i>
                                    <h5>Progress Tracking</h5>
                                    <p class="text-muted">Track your knowledge growth</p>
                                </div>
                            </div>
                        </div>
                        
                        <a href="/games" class="btn btn-success">
                            <i data-feather="gamepad-2"></i> Try Other Games
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Initialize feather icons
if (typeof feather !== 'undefined') {
    feather.replace();
}
</script>
{% endblock %}