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

{% block title %}Welcome to Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="hero-section text-center py-5">
    <div class="container">
        <img src="{% static 'admin/img/logo-red.jpeg' %}" alt="Rapha-Bethel BNPS Logo" class="mb-4" height="120">
        <h1 class="display-4 fw-bold text-primary">Welcome to Rapha-Bethel BNPS</h1>
        <p class="lead">Comprehensive School Management System</p>
        
        <div class="row mt-5">
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow">
                    <div class="card-body text-center">
                        <i class="fas fa-user-graduate fa-3x text-primary mb-3"></i>
                        <h3>Student Management</h3>
                        <p>Track student information, attendance, and academic progress</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow">
                    <div class="card-body text-center">
                        <i class="fas fa-chalkboard-teacher fa-3x text-success mb-3"></i>
                        <h3>Academic Management</h3>
                        <p>Manage classes, subjects, and academic schedules</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow">
                    <div class="card-body text-center">
                        <i class="fas fa-money-bill-wave fa-3x text-warning mb-3"></i>
                        <h3>Finance Management</h3>
                        <p>Handle fees, invoices, and financial reporting</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-5">
            {% if user.is_authenticated %}
            <a href="{% url 'dashboard' %}" class="btn btn-primary btn-lg px-5">
                <i class="fas fa-tachometer-alt"></i> Go to Dashboard
            </a>
            {% else %}
            <a href="{% url 'admin:login' %}" class="btn btn-primary btn-lg px-5 me-3">
                <i class="fas fa-sign-in-alt"></i> Staff Login
            </a>
            <a href="#" class="btn btn-outline-primary btn-lg px-5">
                <i class="fas fa-info-circle"></i> Learn More
            </a>
            {% endif %}
        </div>
    </div>
</div>

<div class="container py-5">
    <h2 class="text-center mb-5">School Features</h2>
    <div class="row">
        <div class="col-lg-6">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <i class="fas fa-check text-success me-2"></i>
                    Student Registration & Management
                </li>
                <li class="list-group-item">
                    <i class="fas fa-check text-success me-2"></i>
                    Attendance Tracking
                </li>
                <li class="list-group-item">
                    <i class="fas fa-check text-success me-2"></i>
                    Grade Management
                </li>
                <li class="list-group-item">
                    <i class="fas fa-check text-success me-2"></i>
                    Fee Collection & Invoicing
                </li>
            </ul>
        </div>
        <div class="col-lg-6">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <i class="fas fa-check text-success me-2"></i>
                    Parent Communication
                </li>
                <li class="list-group-item">
                    <i class="fas fa-check text-success me-2"></i>
                    Staff Management
                </li>
                <li class="list-group-item">
                    <i class="fas fa-check text-success me-2"></i>
                    Library Management
                </li>
                <li class="list-group-item">
                    <i class="fas fa-check text-success me-2"></i>
                    Reports & Analytics
                </li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}