{% extends "base.html" %}

{% block title %}About - Roster{% endblock %}

{% block content %}
<section class="py-5 bg-light-cg">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <h1 class="brand-font display-4 mb-4">The Mission</h1>
                <p class="lead text-slate fs-4">Roster is built for the squad-less, the solo-queuers, and the players tired of random teammate roulette.</p>
                <p class="text-muted">We believe gaming is at its best when you're playing with a team that matches your rank, shares your schedule, and fits your vibe. No more toxic lobbies, no more silent comms — just better games.</p>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-4">
                    <h3 class="brand-font h4">Skill Sync</h3>
                    <p>We match you based on actual rank and role data, ensuring you're never the odd one out in your own squad.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-4">
                    <h3 class="brand-font h4">Schedule Overlap</h3>
                    <p>Stop waiting for friends to come online. Find players who play when you do, whether it's 3 PM or 3 AM.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-4">
                    <h3 class="brand-font h4">Vibe Check</h3>
                    <p>Competitive, casual, or somewhere in between? Filter by playstyle and personality to find your perfect team.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-sand">
    <div class="container text-center">
        <h2 class="brand-font mb-4">Ready to find your squad?</h2>
        <a href="{% url 'signup' %}" class="btn btn-primary-cg btn-lg">Join Roster</a>
    </div>
</section>
{% endblock %}
