{% extends "base.html" %}

{% block title %}Home - Pickleball ELO Tracker{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <h1 class="pitt-primary text-4xl font-bold text-center mb-2">🏓 Pickleball ELO Tracker</h1>
    <p class="text-center text-gray-600 mb-8">Pure ELO Rating System v3.0</p>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div class="stat-card">
            <div class="text-4xl font-bold mb-2">{{ match_count }}</div>
            <div class="text-sm opacity-90">Matches</div>
        </div>
        <div class="stat-card">
            <div class="text-4xl font-bold mb-2">{{ player_count }}</div>
            <div class="text-sm opacity-90">Players</div>
        </div>
        <div class="stat-card">
            <div class="text-4xl font-bold mb-2">{{ session_count }}</div>
            <div class="text-sm opacity-90">Sessions</div>
        </div>
    </div>
    
    {% include "components/nav.html" %}
    
    <div class="card mt-8">
        <h2 class="pitt-primary text-2xl font-bold mb-4">📊 How Ratings Work</h2>
        
        <p class="mb-4"><strong>One unified rating</strong> — Singles and doubles matches both contribute to a single ELO rating. Everyone starts at 1500.</p>
        
        <p class="mb-4"><strong>Per-point scoring</strong> — Your rating change depends on your actual point performance (points won ÷ total points), not just whether you won or lost. Winning 11-2 earns more than winning 11-9.</p>
        
        <p class="mb-4"><strong>Smart doubles scoring</strong> — In doubles, we calculate your "effective opponent" using:<br>
        <code class="bg-gray-100 px-2 py-1 rounded">Effective Opponent &#x3D; Opp1 + Opp2 - Teammate</code></p>
        
        <p class="mb-4">This means:</p>
        <ul class="ml-6 mb-4 space-y-2">
            <li><strong>Strong teammate</strong> → lower effective opponent → less credit for winning</li>
            <li><strong>Weak teammate</strong> → higher effective opponent → more credit for winning</li>
        </ul>
        
        <p class="mb-4"><strong>The formula:</strong><br>
        <code class="bg-gray-100 px-3 py-2 rounded inline-block mt-2">Rating Change = 32 × (Actual Performance - Expected Performance)</code></p>
        
        <p class="text-sm text-gray-600">Fair, transparent, and no mysterious "volatility" numbers. Just skill vs. expectations.</p>
    </div>
</div>
{% endblock %}
