{% extends "base.html" %}

{% block title %}Home - National Medlab Cooperative{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-12">
        <div class="logo-section">
            <div class="mb-3">
                <img src="{{ url_for('static', filename='images/logo.jpeg') }}" alt="National Medlab Cooperative" class="img-fluid" style="max-width: 200px; height: auto;">
            </div>
            <p class="lead">Advancing Welfare Together...</p>
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-md-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <i class="fas fa-users fa-3x text-primary mb-3" style="color: var(--primary-green);"></i>
                <h5 class="card-title">Join Our Community</h5>
                <p class="card-text">Become a member of National Medlab Cooperative and access exclusive financial benefits.</p>
                <a href="{{ url_for('register') }}" class="btn btn-primary">Register Now</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <i class="fas fa-hand-holding-usd fa-3x text-warning mb-3" style="color: var(--primary-orange);"></i>
                <h5 class="card-title">Savings & Loans</h5>
                <p class="card-text">Save regularly and access affordable loans when you need them most.</p>
                <a href="{{ url_for('login') }}" class="btn btn-orange">Member Login</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <i class="fas fa-chart-line fa-3x text-success mb-3" style="color: var(--primary-green);"></i>
                <h5 class="card-title">Financial Growth</h5>
                <p class="card-text">Build your financial future with our cooperative management system.</p>
                <a href="#" class="btn btn-outline-primary">Learn More</a>
            </div>
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Why Choose National Medlab Cooperative?</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Competitive interest rates on savings
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Quick loan processing
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Transparent financial management
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Member-focused services
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Secure online platform
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Professional management team
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}