{% extends 'base.html' %}
{% block title %}{{ t.shopping_guide_title }} — PickkerMarket{% 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 'market:home' %}">&larr; {{ t.shopping_guide_back }}</a></p>
        <h1>{{ t.shopping_guide_title }}</h1>
        <p style="color: var(--muted); margin-bottom: 24px;">{{ t.shopping_guide_intro }}</p>

        {% if personalized_tip %}
        <div class="picking-guide-tip" style="border-left: 3px solid var(--blue); margin-bottom: 24px;">
            <h3 style="margin-bottom: 6px;">{{ t.shopping_guide_tip_title }}</h3>
            <p>{{ personalized_tip }}</p>
        </div>
        {% endif %}

        <h2 style="margin: 28px 0 12px;">{{ t.shopping_guide_section_storage }}</h2>
        <div class="picking-guide-tip">
            <h3>{{ t.shopping_guide_storage_vegetables_title }}</h3>
            <p>{{ t.shopping_guide_storage_vegetables_body }}</p>
        </div>
        <div class="picking-guide-tip">
            <h3>{{ t.shopping_guide_storage_fruits_title }}</h3>
            <p>{{ t.shopping_guide_storage_fruits_body }}</p>
        </div>
        <div class="picking-guide-tip">
            <h3>{{ t.shopping_guide_storage_grains_title }}</h3>
            <p>{{ t.shopping_guide_storage_grains_body }}</p>
        </div>
        <div class="picking-guide-tip">
            <h3>{{ t.shopping_guide_storage_fish_title }}</h3>
            <p>{{ t.shopping_guide_storage_fish_body }}</p>
        </div>
        <div class="picking-guide-tip">
            <h3>{{ t.shopping_guide_storage_meat_title }}</h3>
            <p>{{ t.shopping_guide_storage_meat_body }}</p>
        </div>

        <h2 style="margin: 28px 0 12px;">{{ t.shopping_guide_section_plan }}</h2>
        <div class="picking-guide-tip">
            <p>{{ t.shopping_guide_plan_body_1 }}</p>
        </div>
        <div class="picking-guide-tip">
            <p>{{ t.shopping_guide_plan_body_2 }}</p>
        </div>
        <div class="picking-guide-tip">
            <p>{{ t.shopping_guide_plan_body_3 }}</p>
        </div>

        <h2 style="margin: 28px 0 12px;">{{ t.shopping_guide_section_picker }}</h2>
        <div class="picking-guide-tip">
            <p>{{ t.shopping_guide_picker_body_1 }}</p>
        </div>
        <div class="picking-guide-tip">
            <p>{{ t.shopping_guide_picker_body_2 }}</p>
        </div>
        <div class="picking-guide-tip">
            <p>{{ t.shopping_guide_picker_body_3 }}</p>
        </div>

        <h2 style="margin: 28px 0 12px;">{{ t.shopping_guide_section_measures }}</h2>
        <div class="picking-guide-tip">
            <p>{{ t.shopping_guide_measures_body_1 }}</p>
        </div>
        <div class="picking-guide-tip">
            <p>{{ t.shopping_guide_measures_body_2 }}</p>
        </div>
        <div class="picking-guide-tip">
            <p>{{ t.shopping_guide_measures_body_3 }}</p>
        </div>
    </div>
</section>
{% endblock %}