{% extends "base.html" %}
{% load static %}

{% block title %}TeamLink - Organization Member Database{% endblock %}

{% block content %}
<section class="hero-section text-center text-lg-start">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <h1 class="display-4 fw-bold">Connecting our <br><span class="text-emerald">People and Purpose</span></h1>
                <p class="lead text-white-50 mb-4">The centralized hub for managing Staff, Board Members, and Youth Volunteers. Secure, searchable, and always accessible.</p>
                <div class="d-flex gap-3 justify-content-center justify-content-lg-start">
                    <a href="{% url 'member_list' %}" class="btn btn-primary btn-lg">Browse Directory</a>
                    <a href="/admin/core/member/add/" class="btn btn-outline-light btn-lg">Add Member</a>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
                <div class="p-4 bg-white rounded-4 shadow-lg text-dark">
                    <h4 class="mb-4">Quick Stats</h4>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="stat-card border rounded-3 p-3">
                                <span class="number h2 mb-0">{{ stats.total }}</span>
                                <span class="label small">Total Members</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="stat-card border rounded-3 p-3">
                                <span class="number h2 mb-0">{{ stats.staff }}</span>
                                <span class="label small">Staff</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="stat-card border rounded-3 p-3">
                                <span class="number h2 mb-0">{{ stats.board }}</span>
                                <span class="label small">Board</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="stat-card border rounded-3 p-3">
                                <span class="number h2 mb-0">{{ stats.volunteers }}</span>
                                <span class="label small">Volunteers</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="h3 mb-3">One Secure Location for All Team Records</h2>
                <p class="text-muted">Effortlessly manage your organization's core contacts with advanced search, role-based filtering, and administrative oversight.</p>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 p-4">
                    <div class="icon h3 text-primary mb-3"><i class="bi bi-shield-lock-fill"></i></div>
                    <h5>Secure Management</h5>
                    <p class="text-muted small">Admin-only data entry ensures your sensitive member data is protected and managed by authorized staff only.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4">
                    <div class="icon h3 text-primary mb-3"><i class="bi bi-search"></i></div>
                    <h5>Quick Discovery</h5>
                    <p class="text-muted small">Instantly find any staff member, board representative, or volunteer using our powerful search and filter tools.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4">
                    <div class="icon h3 text-primary mb-3"><i class="bi bi-file-earmark-spreadsheet-fill"></i></div>
                    <h5>Reporting Ready</h5>
                    <p class="text-muted small">Our structured data model makes it easy to export and report on your organization's human resources at any time.</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}