{% extends "base.html" %}

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

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <!-- Help Header -->
            <div class="d-flex align-items-center mb-4">
                <a href="/games" class="btn btn-outline-secondary me-3">
                    <i data-feather="arrow-left" class="me-2"></i>Back to Games
                </a>
                <h1 class="h2 mb-0">
                    <i data-feather="help-circle" class="me-2 text-info"></i>
                    How to Play
                </h1>
            </div>
            
            <!-- Quick Navigation -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Quick Navigation</h5>
                    <div class="row g-2">
                        <div class="col-md-3">
                            <a href="#memory-games" class="btn btn-outline-primary w-100 btn-sm">Memory Games</a>
                        </div>
                        <div class="col-md-3">
                            <a href="#rebus-puzzles" class="btn btn-outline-success w-100 btn-sm">Rebus Puzzles</a>
                        </div>
                        <div class="col-md-3">
                            <a href="#scoring" class="btn btn-outline-warning w-100 btn-sm">Scoring System</a>
                        </div>
                        <div class="col-md-3">
                            <a href="#badges" class="btn btn-outline-info w-100 btn-sm">Badges & Awards</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Memory Games Section -->
            <section id="memory-games" class="mb-5">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3 class="mb-0">
                            <i data-feather="cpu" class="me-2"></i>
                            Orchid Memory Challenge
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h5>How to Play</h5>
                                <ol class="mb-4">
                                    <li><strong>Choose your difficulty level:</strong>
                                        <ul class="mt-2">
                                            <li><strong>Easy:</strong> Match identical orchid photographs</li>
                                            <li><strong>Medium:</strong> Match orchid photos with their genus names</li>
                                            <li><strong>Hard:</strong> Match photos with full scientific names</li>
                                        </ul>
                                    </li>
                                    <li><strong>Click cards to flip them over</strong> and reveal what's underneath</li>
                                    <li><strong>Find matching pairs</strong> by remembering card positions</li>
                                    <li><strong>Clear the entire board</strong> before time runs out to win</li>
                                    <li><strong>Earn bonus points</strong> for speed and efficiency</li>
                                </ol>
                                
                                <h5>Pro Tips</h5>
                                <ul class="mb-0">
                                    <li>Start by clicking cards around the edges - they're easier to remember</li>
                                    <li>Create a mental pattern or story to remember card locations</li>
                                    <li>Focus on one section at a time rather than random clicking</li>
                                    <li>Use the timer strategically - sometimes it's better to be accurate than fast</li>
                                    <li>Learn orchid genera and species names to excel at higher difficulties</li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <div class="help-visual">
                                    <div class="memory-demo">
                                        <h6>Memory Grid Example</h6>
                                        <div class="demo-grid">
                                            <div class="demo-card">?</div>
                                            <div class="demo-card">?</div>
                                            <div class="demo-card">?</div>
                                            <div class="demo-card">?</div>
                                            <div class="demo-card flipped">🌸</div>
                                            <div class="demo-card">?</div>
                                            <div class="demo-card flipped">🌸</div>
                                            <div class="demo-card">?</div>
                                        </div>
                                        <small class="text-muted">Click cards to reveal and match pairs</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- Rebus Puzzles Section -->
            <section id="rebus-puzzles" class="mb-5">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h3 class="mb-0">
                            <i data-feather="puzzle-piece" class="me-2"></i>
                            Daily Rebus Puzzles
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h5>What are Rebus Puzzles?</h5>
                                <p>Rebus puzzles use pictures, symbols, and wordplay to represent orchid names or concepts. Each puzzle tells a story that leads to a specific orchid genus or species name.</p>
                                
                                <h5>How to Solve</h5>
                                <ol class="mb-4">
                                    <li><strong>Look at the visual clues</strong> - each emoji or symbol represents part of the answer</li>
                                    <li><strong>Think about orchid terminology</strong> - the answer is always orchid-related</li>
                                    <li><strong>Consider wordplay</strong> - sometimes it's about how words sound, not just their meaning</li>
                                    <li><strong>Use the hint button</strong> if you're stuck - it provides additional context</li>
                                    <li><strong>Submit your answer</strong> - genus names, common names, or scientific names are all accepted</li>
                                </ol>
                                
                                <h5>Example Puzzle Types</h5>
                                <ul class="mb-0">
                                    <li><strong>Direct representation:</strong> 👞 + 👑 = "Lady Slipper" (Cypripedium)</li>
                                    <li><strong>Habitat clues:</strong> 🏔️ + 🌸 = Mountain orchid genus</li>
                                    <li><strong>Characteristic clues:</strong> 🕷️ + 🦵 = Spider orchid (Brassia)</li>
                                    <li><strong>Phonetic clues:</strong> Sound-alike words that form orchid names</li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <div class="help-visual">
                                    <div class="rebus-demo">
                                        <h6>Example Rebus</h6>
                                        <div class="demo-rebus">
                                            <div class="rebus-clue">👞 + 👑</div>
                                            <div class="rebus-equals">=</div>
                                            <div class="rebus-answer">Lady Slipper</div>
                                        </div>
                                        <small class="text-muted">Shoe + Crown = Lady Slipper (Cypripedium)</small>
                                        <div class="mt-3">
                                            <button class="btn btn-sm btn-outline-warning">💡 Get Hint</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- Scoring System Section -->
            <section id="scoring" class="mb-5">
                <div class="card">
                    <div class="card-header bg-warning text-dark">
                        <h3 class="mb-0">
                            <i data-feather="target" class="me-2"></i>
                            Scoring System
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <div class="col-md-4">
                                <h5>Base Points</h5>
                                <div class="scoring-table">
                                    <div class="score-item">
                                        <span class="level easy">Easy:</span>
                                        <span class="points">100 pts/pair</span>
                                    </div>
                                    <div class="score-item">
                                        <span class="level medium">Medium:</span>
                                        <span class="points">200 pts/pair</span>
                                    </div>
                                    <div class="score-item">
                                        <span class="level hard">Hard:</span>
                                        <span class="points">300 pts/pair</span>
                                    </div>
                                    <div class="score-item">
                                        <span class="level rebus">Rebus:</span>
                                        <span class="points">50 pts</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h5>Time Bonuses</h5>
                                <ul class="bonus-list">
                                    <li><strong>Speed bonus:</strong> 2 points per second remaining</li>
                                    <li><strong>Quick completion:</strong> Extra bonus for finishing under 50% of time limit</li>
                                    <li><strong>Lightning round:</strong> Special bonus for sub-30-second completions</li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <h5>Efficiency Bonuses</h5>
                                <ul class="bonus-list">
                                    <li><strong>Perfect game:</strong> Match every pair in minimum moves</li>
                                    <li><strong>Near perfect:</strong> Within 150% of minimum moves</li>
                                    <li><strong>Efficiency multiplier:</strong> Fewer mistakes = higher bonuses</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- Badges & Awards Section -->
            <section id="badges" class="mb-5">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h3 class="mb-0">
                            <i data-feather="award" class="me-2"></i>
                            Badges & Achievement System
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <h5>How Badges Work</h5>
                                <p>Badges are earned automatically when you achieve certain milestones. They're displayed on your profile and show your progress as an orchid gaming enthusiast.</p>
                                
                                <h6>Badge Categories</h6>
                                <ul>
                                    <li><strong>Beginner Badges:</strong> First-time achievements</li>
                                    <li><strong>Skill Badges:</strong> Demonstrate mastery of different game types</li>
                                    <li><strong>Speed Badges:</strong> Fast completion times</li>
                                    <li><strong>Accuracy Badges:</strong> Perfect or near-perfect games</li>
                                    <li><strong>Dedication Badges:</strong> Playing multiple games or consecutive days</li>
                                    <li><strong>Knowledge Badges:</strong> Excel at harder difficulty levels</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h5>Available Badges</h5>
                                <div class="badge-showcase-help">
                                    <div class="badge-item">
                                        <i data-feather="cpu" class="badge-icon text-info"></i>
                                        <div class="badge-details">
                                            <strong>Memory Rookie</strong>
                                            <small>Complete your first memory game</small>
                                        </div>
                                    </div>
                                    <div class="badge-item">
                                        <i data-feather="zap" class="badge-icon text-warning"></i>
                                        <div class="badge-details">
                                            <strong>Speed Demon</strong>
                                            <small>Complete hard game in under 2 minutes</small>
                                        </div>
                                    </div>
                                    <div class="badge-item">
                                        <i data-feather="star" class="badge-icon text-success"></i>
                                        <div class="badge-details">
                                            <strong>Perfect Memory</strong>
                                            <small>Complete game with perfect efficiency</small>
                                        </div>
                                    </div>
                                    <div class="badge-item">
                                        <i data-feather="award" class="badge-icon text-danger"></i>
                                        <div class="badge-details">
                                            <strong>Genus Master</strong>
                                            <small>Score 400+ points in medium difficulty</small>
                                        </div>
                                    </div>
                                    <div class="badge-item">
                                        <i data-feather="target" class="badge-icon text-primary"></i>
                                        <div class="badge-details">
                                            <strong>Species Expert</strong>
                                            <small>Score 600+ points in hard difficulty</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- Need More Help Section -->
            <div class="card">
                <div class="card-body text-center">
                    <h5>Still Need Help?</h5>
                    <p class="text-muted">Check out our FAQ or report any issues you encounter.</p>
                    <div class="d-flex gap-3 justify-content-center">
                        <a href="/games/faq" class="btn btn-outline-success">
                            <i data-feather="message-circle" class="me-2"></i>View FAQ
                        </a>
                        <a href="/games/bug-report" class="btn btn-outline-warning">
                            <i data-feather="flag" class="me-2"></i>Report Issue
                        </a>
                        <a href="/games/settings" class="btn btn-outline-primary">
                            <i data-feather="settings" class="me-2"></i>Game Settings
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
.demo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 200px;
    margin-bottom: 10px;
}

.demo-card {
    aspect-ratio: 1;
    background: #343a40;
    border: 2px solid #495057;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #adb5bd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.demo-card.flipped {
    background: #198754;
    border-color: #20c997;
    color: white;
    transform: rotateY(180deg);
}

.rebus-demo {
    text-align: center;
    padding: 1rem;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
}

.demo-rebus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.rebus-clue {
    font-size: 1.5rem;
    padding: 0.5rem;
    background: #495057;
    border-radius: 8px;
}

.rebus-equals {
    font-size: 1.2rem;
    font-weight: bold;
}

.rebus-answer {
    font-size: 1rem;
    padding: 0.5rem;
    background: #198754;
    color: white;
    border-radius: 8px;
    font-weight: bold;
}

.scoring-table {
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 1rem;
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.score-item:last-child {
    border-bottom: none;
}

.level {
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.level.easy { background: #198754; color: white; }
.level.medium { background: #ffc107; color: #212529; }
.level.hard { background: #dc3545; color: white; }
.level.rebus { background: #6f42c1; color: white; }

.points {
    font-weight: bold;
    color: var(--bs-success);
}

.bonus-list {
    padding-left: 1.2rem;
}

.bonus-list li {
    margin-bottom: 0.5rem;
}

.badge-showcase-help {
    max-height: 300px;
    overflow-y: auto;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.badge-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.badge-details small {
    display: block;
    color: var(--bs-text-muted);
    margin-top: 0.25rem;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Highlight target section */
section:target {
    scroll-margin-top: 20px;
}

section:target .card-header {
    animation: highlight 2s ease-in-out;
}

@keyframes highlight {
    0% { box-shadow: 0 0 0 4px rgba(13, 202, 240, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(13, 202, 240, 0); }
}
</style>

<script>
// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
    
    // Smooth scrolling for navigation links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Demo card click animation
    document.querySelectorAll('.demo-card').forEach(card => {
        card.addEventListener('click', function() {
            if (!this.classList.contains('flipped')) {
                this.classList.add('flipped');
                this.textContent = '🌺';
                
                // Reset after 2 seconds
                setTimeout(() => {
                    this.classList.remove('flipped');
                    this.textContent = '?';
                }, 2000);
            }
        });
    });
});
</script>
{% endblock %}