{% extends "base.html" %}

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

{% block content %}
<div class="max-w-4xl mx-auto">
    <h1 class="pitt-primary text-4xl font-bold mb-8 text-center">ℹ️ About the Rating System</h1>
    
    {% include "components/nav.html" %}
    
    <div class="card">
        <h2 class="pitt-primary text-2xl font-bold mb-4">🎯 ELO Basics</h2>
        <p class="mb-4">
            This system uses <strong>ELO rating</strong>, a proven method for measuring competitive skill. Everyone starts at <strong>1500</strong>.
        </p>
        <p class="mb-4">
            Unlike traditional win/loss records, ELO captures:
        </p>
        <ul class="ml-6 mb-4 space-y-2">
            <li>✅ <strong>Skill level of opponents</strong> — Beating better players earns more points</li>
            <li>✅ <strong>Individual performance</strong> — Point differential matters (11-2 vs 11-9)</li>
            <li>✅ <strong>Consistency</strong> — Your rating reflects your true skill over time</li>
        </ul>
    </div>
    
    <div class="card">
        <h2 class="pitt-primary text-2xl font-bold mb-4">📊 Unified Rating</h2>
        <p class="mb-4">
            One rating covers <strong>all match types</strong> (singles and doubles). This is more realistic:
        </p>
        <ul class="ml-6 mb-4 space-y-2">
            <li>🏓 <strong>Singles:</strong> Your direct 1v1 skill shows immediately</li>
            <li>👥 <strong>Doubles:</strong> Teamwork and court awareness matter just as much</li>
        </ul>
        <p class="mb-4">
            Your "ELO Rating" represents your expected performance in ANY match type. A 1700-rated player will usually beat a 1500-rated player, whether playing singles or doubles.
        </p>
    </div>
    
    <div class="card">
        <h2 class="pitt-primary text-2xl font-bold mb-4">🧮 How Points Change</h2>
        <p class="mb-4">
            The <strong>core formula</strong> is simple:
        </p>
        <div class="bg-blue-50 p-4 rounded-lg mb-4 font-mono">
            Rating Change = 32 × (Actual Performance - Expected Performance)
        </div>
        <p class="mb-4">
            Where:
        </p>
        <ul class="ml-6 mb-4 space-y-2">
            <li><strong>Actual Performance</strong> = Points You Scored ÷ Total Points</li>
            <li><strong>Expected Performance</strong> = Calculated from rating difference</li>
        </ul>
        <p class="mb-4">
            <strong>Example:</strong>
        </p>
        <ul class="ml-6 mb-4 space-y-2">
            <li>You (1600) beat them (1400) 11-5: <code class="bg-gray-100 px-2 py-1 rounded">Actual = 11/16 = 0.6875</code></li>
            <li>You were expected to win ~70% of points (rating difference)</li>
            <li>You performed worse than expected → smaller gain (~+8)</li>
            <li>They performed better than expected → smaller loss (~-8)</li>
        </ul>
    </div>
    
    <div class="card">
        <h2 class="pitt-primary text-2xl font-bold mb-4">👥 Doubles Scoring</h2>
        <p class="mb-4">
            In doubles, we calculate your <strong>effective opponent</strong> rating:
        </p>
        <div class="bg-blue-50 p-4 rounded-lg mb-4 font-mono">
            Effective Opponent &#x3D; (Opp1 + Opp2 - Teammate) ÷ 2
        </div>
        <p class="mb-4">
            This accounts for <strong>teammate strength</strong>:
        </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>Why?</strong> Winning with a weaker partner takes more individual skill. Winning with a stronger partner is easier. The system recognizes this.
        </p>
    </div>
    
    <div class="card">
        <h2 class="pitt-primary text-2xl font-bold mb-4">✨ Why This System?</h2>
        <ul class="ml-6 space-y-3">
            <li>🎯 <strong>Transparent:</strong> No hidden "k-factors" or magical numbers</li>
            <li>⚖️ <strong>Fair:</strong> Rewards individual skill, not just team wins</li>
            <li>📈 <strong>Responsive:</strong> Converges quickly to true skill level</li>
            <li>🔄 <strong>Unified:</strong> One rating works for all match types</li>
        </ul>
    </div>
    
    <div class="card">
        <h2 class="pitt-primary text-2xl font-bold mb-4">🚀 Get Started</h2>
        <p class="mb-4">
            Ready to join? <a href="/players/new" class="pitt-primary font-bold hover:underline">Add yourself as a player</a>, then <a href="/matches/new" class="pitt-primary font-bold hover:underline">record your first match</a>. Your journey begins at 1500! 🏓
        </p>
    </div>
</div>
{% endblock %}