{% extends "base.html" %}
{% block content %}
    <section class="panel hero">
        <div class="hero-copy">
            <h2>Work. Crime. Mug. Bank. Repeat.</h2>
            <p class="muted">
                This MicroPie example is a compact browser-RPG loop: register a character,
                build stats in the gym, run crimes, buy gear, mug wallet cash, protect money
                in the bank, and trade items on the player market.
            </p>
            <div class="action-row">
                <a href="/register" class="button primary">Create Account</a>
                <a href="/login" class="button subtle">Login</a>
            </div>
        </div>
        <div class="cards">
            <div class="card">
                <h3>{{ world.users_count }}</h3>
                <p class="muted">Registered players</p>
            </div>
            <div class="card">
                <h3>{{ world.active_listings }}</h3>
                <p class="muted">Active market listings</p>
            </div>
            <div class="card">
                <h3>{{ world.combat_count }}</h3>
                <p class="muted">Recorded fights</p>
            </div>
        </div>
    </section>

    <section class="grid-3">
        <article class="panel">
            <h2>Character Loop</h2>
            <p class="muted">Resources regen from timestamps, stats scale through training, and timers lock actions when jail or hospital hits.</p>
        </article>
        <article class="panel">
            <h2>Economy Loop</h2>
            <p class="muted">Jobs and crimes feed wallet cash, mugging threatens it, the bank protects it, and the market turns item drops into trade.</p>
        </article>
        <article class="panel">
            <h2>Combat Loop</h2>
            <p class="muted">Attack other players, choose whether to leave, hospitalize, or mug, and let gear plus stats decide the result.</p>
        </article>
    </section>
{% endblock %}