{% extends 'base.html' %}
{% block title %}{{ t.picker_guide_title }} — {{ t.title_picker_suffix }}{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 750px;">
        <p class="auth-switch" style="margin-bottom: 10px;"><a href="{% url 'accounts:picker_home' %}">&larr; {{ t.picker_guide_back }}</a></p>
        <h1>{{ t.picker_guide_title }}</h1>
        <p style="color: var(--muted); margin-bottom: 24px;">{{ t.picker_guide_intro }}</p>

        <div class="picking-guide-list">
            <div class="picking-guide-tip">
                <h3>1. {{ t.picker_guide_tip_freshness_title }}</h3>
                <p>{{ t.picker_guide_tip_freshness_body }}</p>
            </div>
            <div class="picking-guide-tip">
                <h3>2. {{ t.picker_guide_tip_bruises_title }}</h3>
                <p>{{ t.picker_guide_tip_bruises_body }}</p>
            </div>
            <div class="picking-guide-tip">
                <h3>3. {{ t.picker_guide_tip_weight_title }}</h3>
                <p>{{ t.picker_guide_tip_weight_body }}</p>
            </div>
            <div class="picking-guide-tip">
                <h3>4. {{ t.picker_guide_tip_seasonal_title }}</h3>
                <p>{{ t.picker_guide_tip_seasonal_body }}</p>
            </div>
            <div class="picking-guide-tip">
                <h3>5. {{ t.picker_guide_tip_match_title }}</h3>
                <p>{{ t.picker_guide_tip_match_body }}</p>
            </div>
            <div class="picking-guide-tip">
                <h3>6. {{ t.picker_guide_tip_pack_title }}</h3>
                <p>{{ t.picker_guide_tip_pack_body }}</p>
            </div>
            <div class="picking-guide-tip">
                <h3>7. {{ t.picker_guide_tip_hygiene_title }}</h3>
                <p>{{ t.picker_guide_tip_hygiene_body }}</p>
            </div>
            <div class="picking-guide-tip">
                <h3>8. {{ t.picker_guide_tip_timing_title }}</h3>
                <p>{{ t.picker_guide_tip_timing_body }}</p>
            </div>
        </div>
    </div>
</section>
{% endblock %}