{% extends "base.html" %}
{% block title %}Charity Compass{% endblock %}
{% block content %}
<section class="hero">
    <div class="hero-copy">
        <p class="eyebrow">Personal giving guidance</p>
        <h1>Find charities that fit what you care about.</h1>
        <p>
            Create a profile, share your causes and preferred ways to help, and get
            recommendations from structured charity data with optional LLM-powered explanations.
        </p>
        <a class="button primary" href="{{ url_for('register') }}">Start matching</a>
    </div>
    <div class="hero-panel">
        <span>Cause fit</span>
        <strong>92%</strong>
        <p>Database scoring plus concise recommendation reasoning.</p>
    </div>
</section>

<section class="process">
    <article>
        <span>1</span>
        <h2>Create your account</h2>
        <p>Capture contact details and clear messaging consent.</p>
    </article>
    <article>
        <span>2</span>
        <h2>Share preferences</h2>
        <p>Choose causes, support types, availability, and motivation.</p>
    </article>
    <article>
        <span>3</span>
        <h2>Review matches</h2>
        <p>See ranked charity options and why each one fits.</p>
    </article>
</section>
{% endblock %}