{% extends "base.html" %}

{% block title %}Orchid Puzzle 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 Puzzle Game</h1>
                <p class="lead text-muted">Solve beautiful orchid image puzzles!</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 Puzzle Game is currently under development. We're creating an exciting sliding puzzle experience with beautiful orchid photographs.</p>
                        
                        <div class="row text-center mb-4">
                            <div class="col-md-4">
                                <div class="feature-item">
                                    <i data-feather="image" class="text-success mb-2" style="width: 48px; height: 48px;"></i>
                                    <h5>Beautiful Photos</h5>
                                    <p class="text-muted">High-quality orchid images</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="feature-item">
                                    <i data-feather="layers" class="text-warning mb-2" style="width: 48px; height: 48px;"></i>
                                    <h5>Multiple Levels</h5>
                                    <p class="text-muted">Easy to challenging puzzles</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="feature-item">
                                    <i data-feather="award" class="text-info mb-2" style="width: 48px; height: 48px;"></i>
                                    <h5>Achievements</h5>
                                    <p class="text-muted">Earn badges and scores</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 %}