{% extends "layout.html" %}
{% set active = 'home' %}
{% block title %}Beranda{% endblock %}

{% block content %}
<h1 class="page-header mb-1">Beranda</h1>
<p class="text-inverse text-opacity-50 mb-4">KOMANDO Dry Fire Training — simulator latihan menembak berbasis deteksi laser.</p>

<!-- statistik ringkas -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg">
        <div class="card"><div class="card-body">
            <div class="stat-value text-theme">{{ stats.total_sesi }}</div>
            <div class="stat-label">Total Sesi</div>
        </div></div>
    </div>
    <div class="col-6 col-lg">
        <div class="card"><div class="card-body">
            <div class="stat-value">{{ stats.total_tembakan }}</div>
            <div class="stat-label">Total Tembakan</div>
        </div></div>
    </div>
    <div class="col-6 col-lg">
        <div class="card"><div class="card-body">
            <div class="stat-value">{{ stats.skor_terbaik }}</div>
            <div class="stat-label">Skor Terbaik</div>
        </div></div>
    </div>
    <div class="col-6 col-lg">
        <div class="card"><div class="card-body">
            <div class="stat-value">{{ '%.2fs'|format(stats.challenge_terbaik) if stats.challenge_terbaik else '–' }}</div>
            <div class="stat-label">Challenge Tercepat</div>
        </div></div>
    </div>
    <div class="col-6 col-lg">
        <div class="card"><div class="card-body">
            <div class="stat-value">{{ stats.penembak }}</div>
            <div class="stat-label">Penembak</div>
        </div></div>
    </div>
</div>

<!-- pilih mode -->
<h4 class="mb-3">Mulai Latihan</h4>
<div class="row g-3">
    <div class="col-md-4">
        <a href="{{ url_for('sesi_baru') }}?mode=baja" class="text-decoration-none">
            <div class="card mode-card h-100"><div class="card-body text-center py-4">
                <div class="mode-icon text-theme mb-3"><i class="bi bi-record-circle"></i></div>
                <h5 class="mb-1">Baja (Popper)</h5>
                <p class="text-inverse text-opacity-50 mb-0 small">Piringan baja roboh saat terkena laser.</p>
            </div></div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="{{ url_for('sesi_baru') }}?mode=kertas" class="text-decoration-none">
            <div class="card mode-card h-100"><div class="card-body text-center py-4">
                <div class="mode-icon text-theme mb-3"><i class="bi bi-bullseye"></i></div>
                <h5 class="mb-1">Sasaran Kertas</h5>
                <p class="text-inverse text-opacity-50 mb-0 small">Skor ring presisi (ArUco / kalibrasi manual).</p>
            </div></div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="{{ url_for('sesi_baru') }}?mode=campuran" class="text-decoration-none">
            <div class="card mode-card h-100"><div class="card-body text-center py-4">
                <div class="mode-icon text-theme mb-3"><i class="bi bi-collection"></i></div>
                <h5 class="mb-1">Campuran</h5>
                <p class="text-inverse text-opacity-50 mb-0 small">Baja &amp; kertas sekaligus dalam satu sesi.</p>
            </div></div>
        </a>
    </div>
</div>
{% endblock %}