{% extends "base.html" %}
{% block title %}How It Works{% endblock %}

{% block content %}
<div class="container py-5">

    <h1 class="text-center mb-4">How It Works</h1>

    <p class="lead text-center mb-5">
        Create an inspection report in just three easy steps.
    </p>

    <div class="mx-auto" style="max-width: 700px;">

        <div class="border-start border-3 ps-4 mb-5">
            <h4><i class="bi bi-person-plus-fill text-primary"></i> Step 1 — Create an Account</h4>
            <p>Sign up, enter your address, and gain full access to the system.</p>
        </div>

        <div class="border-start border-3 ps-4 mb-5">
            <h4><i class="bi bi-camera-fill text-success"></i> Step 2 — Upload Images</h4>
            <p>Document damage or observations using up to three photos.</p>
        </div>

        <div class="border-start border-3 ps-4">
            <h4><i class="bi bi-file-earmark-pdf-fill text-danger"></i> Step 3 — Export PDF</h4>
            <p>Download your final report including feedback and summary.</p>
        </div>

    </div>

</div>
{% endblock %}