{% extends 'base.html' %}
{% load static %}
{% block title %}Plan & Order — PickkerMarket{% endblock %}
{% block content %}
<section class="page-hero" style="background-image: url('{% static 'img/tomato-web.jpg' %}');">
    <div class="page-hero-inner">
        <h1>{{ t.plan_order_hero_title }}</h1>
        <p>{{ t.plan_order_hero_subtitle }}</p>
    </div>
</section>

<section class="content-section">
    <ul class="numbered-steps">
        <li>
            <div class="step-num">1</div>
            <div>
                <h3>{{ t.plan_order_step1_title }}</h3>
                <p>{{ t.plan_order_step1_body }}</p>
            </div>
        </li>
        <li>
            <div class="step-num">2</div>
            <div>
                <h3>{{ t.plan_order_step2_title }}</h3>
                <p>{{ t.plan_order_step2_body }}</p>
            </div>
        </li>
        <li>
            <div class="step-num">3</div>
            <div>
                <h3>{{ t.plan_order_step3_title }}</h3>
                <p>{{ t.plan_order_step3_body }}</p>
            </div>
        </li>
        <li>
            <div class="step-num">4</div>
            <div>
                <h3>{{ t.plan_order_step4_title }}</h3>
                <p>{{ t.plan_order_step4_body }}</p>
            </div>
        </li>
    </ul>
</section>
{% endblock %}