{% extends 'base.html' %}

{% block title %}Orchid Games - Five Cities Orchid Society{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 bg-dark">
                <div class="card-body text-center">
                    <h1 class="display-4 text-success mb-3">
                        <i data-feather="gamepad-2" class="me-3"></i>
                        Orchid Games
                    </h1>
                    <p class="lead text-light">Test your orchid knowledge with these fun interactive games!</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Games Grid -->
    <div class="row g-4">
        <!-- Orchid Quiz -->
        <div class="col-lg-6 col-md-6">
            <div class="card bg-dark border-success h-100">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i data-feather="help-circle" style="width: 4rem; height: 4rem;" class="text-success"></i>
                    </div>
                    <h3 class="card-title text-success">Orchid Quiz</h3>
                    <p class="card-text text-light">
                        Can you identify these beautiful orchids? Test your knowledge with our photo quiz!
                    </p>
                    <div class="mt-auto">
                        <a href="{{ url_for('games.orchid_quiz') }}" class="btn btn-success btn-lg">
                            <i data-feather="play" class="me-2"></i>Start Quiz
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Memory Match -->
        <div class="col-lg-6 col-md-6">
            <div class="card bg-dark border-warning h-100">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i data-feather="grid" style="width: 4rem; height: 4rem;" class="text-warning"></i>
                    </div>
                    <h3 class="card-title text-warning">Memory Match</h3>
                    <p class="card-text text-light">
                        Match pairs of orchid photos in this classic memory game. How's your recall?
                    </p>
                    <div class="mt-auto">
                        <a href="{{ url_for('games.memory_match') }}" class="btn btn-warning btn-lg">
                            <i data-feather="play" class="me-2"></i>Play Memory
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Orchid Trivia -->
        <div class="col-lg-6 col-md-6">
            <div class="card bg-dark border-info h-100">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i data-feather="award" style="width: 4rem; height: 4rem;" class="text-info"></i>
                    </div>
                    <h3 class="card-title text-info">Orchid Trivia</h3>
                    <p class="card-text text-light">
                        How much do you know about orchid facts? Challenge yourself with trivia questions!
                    </p>
                    <div class="mt-auto">
                        <a href="{{ url_for('games.orchid_trivia') }}" class="btn btn-info btn-lg">
                            <i data-feather="play" class="me-2"></i>Start Trivia
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Guess the Orchid -->
        <div class="col-lg-6 col-md-6">
            <div class="card bg-dark border-danger h-100">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i data-feather="eye" style="width: 4rem; height: 4rem;" class="text-danger"></i>
                    </div>
                    <h3 class="card-title text-danger">Guess the Orchid</h3>
                    <p class="card-text text-light">
                        Progressive hints reveal more about a mystery orchid. Can you guess before the final hint?
                    </p>
                    <div class="mt-auto">
                        <a href="{{ url_for('games.guess_the_orchid') }}" class="btn btn-danger btn-lg">
                            <i data-feather="play" class="me-2"></i>Start Guessing
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Philosophy Quiz -->
        <div class="col-lg-6 col-md-6">
            <div class="card bg-dark border-purple h-100" style="border-color: #8b5cf6 !important;">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i data-feather="compass" style="width: 4rem; height: 4rem; color: #8b5cf6;"></i>
                    </div>
                    <h3 class="card-title" style="color: #8b5cf6;">Philosophy of Orchids</h3>
                    <p class="card-text text-light">
                        Discover your unique orchid growing philosophy. Are you a Stoic? Epicurean? Find out!
                    </p>
                    <div class="mt-auto">
                        <a href="/philosophy-quiz" class="btn btn-lg" style="background: #8b5cf6; border-color: #8b5cf6; color: white;">
                            <i data-feather="help-circle" class="me-2"></i>Take Quiz
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Leaderboard Section -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card bg-dark border-light">
                <div class="card-header">
                    <h4 class="mb-0 text-light">
                        <i data-feather="trophy" class="me-2"></i>Your High Scores
                    </h4>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <a href="{{ url_for('games.leaderboard') }}" class="btn btn-outline-light">
                            <i data-feather="list" class="me-2"></i>View Leaderboard
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fun Facts -->
    <div class="row mt-4 mb-5">
        <div class="col-12">
            <div class="card bg-dark border-secondary">
                <div class="card-body">
                    <h5 class="text-secondary mb-3">
                        <i data-feather="lightbulb" class="me-2"></i>Did You Know?
                    </h5>
                    <p class="text-light mb-0">
                        Playing these games helps you learn orchid identification skills that are valuable for real-world orchid appreciation! 
                        Our {{ "{:,}".format(5465) }} orchid database provides endless learning opportunities.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Initialize Feather Icons
feather.replace();

// Add some animation to the game cards
document.addEventListener('DOMContentLoaded', function() {
    const cards = document.querySelectorAll('.card');
    cards.forEach((card, index) => {
        card.style.animationDelay = `${index * 0.1}s`;
        card.classList.add('fade-in');
    });
});
</script>

<style>
.fade-in {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.btn:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}
</style>
{% endblock %}