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

{% block title %}
BloodConnect | Donate Blood, Save Lives
{% endblock %}

{% block content %}

<!-- HERO SECTION -->
<section style="text-align:center; padding:60px 20px;">
    <h1 style="color:#b11226;">Donate Blood. Save Lives.</h1>

    <p style="max-width:750px; margin:20px auto; font-size:1.1rem; color:#555;">
        BloodConnect helps connect voluntary blood donors, patients,
        and blood banks during emergencies—quickly and safely.
    </p>

    <!-- PRIMARY BUTTONS -->
    <div style="margin-top:35px;">
        <a href="{% url 'donors' %}" class="btn btn-danger">
            Become a Donor
        </a>

        <a href="{% url 'search-donor' %}" class="btn btn-dark">
            Find Blood
        </a>

        <a href="{% url 'bank-detail' %}" class="btn btn-secondary">
            Blood Banks
        </a>
    </div>
</section>

<hr>

<!-- FEATURE SECTION -->
<section style="max-width:1100px; margin:auto; padding:40px 20px;">
    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:25px;">

        <div class="card p-3">
            <h4 style="color:#b11226;">Register as a Donor</h4>
            <p>
                Join our donor community and help save lives
                when blood is urgently needed.
            </p>
            <a href="{% url 'donors' %}" class="btn btn-outline-danger btn-sm">
                Register Now
            </a>
        </div>

        <div class="card p-3">
            <h4 style="color:#b11226;">Search for Blood</h4>
            <p>
                Quickly search for available donors
                based on blood group and location.
            </p>
            <a href="{% url 'search-donor' %}" class="btn btn-outline-danger btn-sm">
                Search Donors
            </a>
        </div>

        <div class="card p-3">
            <h4 style="color:#b11226;">Blood Bank Directory</h4>
            <p>
                View verified blood banks and
                contact them directly in emergencies.
            </p>
            <a href="{% url 'bank-detail' %}" class="btn btn-outline-danger btn-sm">
                View Banks
            </a>
        </div>

    </div>
</section>

<hr>

<!-- AUTH & CONTACT -->
<section style="text-align:center; padding:30px;">
    <a href="{% url 'login' %}" class="btn btn-success">
        Login
    </a>

    <a href="{% url 'register' %}" class="btn btn-warning">
        Sign Up
    </a>

    <a href="{% url 'contact' %}" class="btn btn-info">
        Contact Us
    </a>
</section>

{% endblock %}