{% extends 'base.html' %}
{% load static %}
{% block title %}PickkerMarket — Plan and Pick Fresh from Market{% endblock %}
{% block content %}
<section class="hero" style="background-image: url('{% static 'img/tomato-web.jpg' %}');">
    <div class="container hero-inner">
        <div class="hero-text">
            <h1>{{ t.home_hero_line1 }}<br>{{ t.home_hero_line2 }}<br><span class="accent-green">{{ t.home_hero_line3 }}</span></h1>
            <div class="hero-swipe" aria-hidden="true">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
                    <path d="M9 11.5V6a1.5 1.5 0 0 1 3 0v4.5M12 10.5V4.5a1.5 1.5 0 0 1 3 0v6M15 10.5v-2a1.5 1.5 0 0 1 3 0v6.5c0 3.31-2.69 6-6 6h-1c-2 0-3-.5-4.5-2.5L4 15c-.5-.7-.2-1.7.6-2 .5-.2 1.1 0 1.4.5L8 15.5"/>
                </svg>
            </div>
        </div>
    </div>
    {% include 'market/_market_ticker.html' %}
</section>

<section class="tiles-grid">
    <a href="{% url 'market:market' %}?open_chat=1" class="tile tile-plan-order">
        <div class="tile-label">
            <span class="label-plan">{{ t.home_plan_label }}</span>
            <span class="label-order">{{ t.home_order_label }}</span>
        </div>
        <div class="tile-arrow">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5">
                <path d="M7 17 17 7M9 7h8v8"/>
            </svg>
        </div>
    </a>

    <a href="{% url 'market:market' %}" class="tile tile-market" style="background-image: url('{% static 'img/market-web.jpg' %}');">
        <span class="market-pill">{{ t.home_market_pill }}</span>
    </a>
</section>
{% endblock %}