{% extends 'base.html' %}
{% load static %}
{% block title %}{{ t.title_home }}{% endblock %}
{% block content %}
<section class="hero" style="background-image: url('{% if hero_image_url %}{{ hero_image_url }}{% else %}{% static 'img/tomato-web.jpg' %}{% endif %}');">
    <div class="container hero-inner">
        <div class="hero-text">
            <h1>{{ home_text.hero_title_line1|default:t.home_hero_line1 }}<br>{{ home_text.hero_title_line2|default:t.home_hero_line2 }}<br><span class="accent-green">{{ home_text.hero_title_line3|default: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">{{ home_text.home_plan_label|default:t.home_plan_label }}</span>
            <span class="label-order">{{ home_text.home_order_label|default: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">{{ home_text.home_market_pill|default:t.home_market_pill }}</span>
    </a>
</section>

{% if how_to.how_to_title or how_to.how_to_description or how_to_video_embed_url or how_to.how_to_image_url %}
<section class="content-section">
    <div class="content-inner">
        <h2 style="margin-bottom: 6px;">{{ how_to.how_to_title|default:t.home_how_to_title }}</h2>
        {% if how_to.how_to_description %}<p style="color: var(--muted); margin-bottom: 14px;">{{ how_to.how_to_description }}</p>{% endif %}

        {% if how_to_video_embed_url %}
        <div class="video-embed-wrap" id="how-to-video-wrap" data-video-src="{{ how_to_video_embed_url }}">
            {% if how_to.how_to_thumbnail_url %}
            <div id="how-to-video-poster" class="video-poster" style="background-image: url('{{ how_to.how_to_thumbnail_url }}');">
                <button type="button" id="how-to-play-btn" class="video-play-btn" aria-label="Play video">&#9658;</button>
            </div>
            {% else %}
            <iframe src="{{ how_to_video_embed_url }}" title="{{ how_to.how_to_title|default:t.home_how_to_title }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            {% endif %}
        </div>
        {% elif how_to.how_to_image_url %}
        <img src="{{ how_to.how_to_image_url }}" alt="{{ how_to.how_to_title|default:t.home_how_to_title }}" style="max-width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);">
        {% endif %}
    </div>
</section>
{% endif %}

{% if news_items %}
<section class="content-section">
    <div class="content-inner">
        <h2 style="margin-bottom: 14px;">{{ home_text.home_news_heading|default:t.home_news_title }}</h2>
        {% for item in news_items %}
        <div class="order-card" style="margin-bottom: 14px; overflow: hidden;">
            {% if item.image_url %}
            <img src="{{ item.image_url }}" alt="{{ item.title }}" style="width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 10px;">
            {% endif %}
            <strong>{{ item.title }}</strong>
            <p style="color: var(--muted); font-size: 0.8rem; margin-top: 2px;">{{ item.created_at|slice:":10" }}</p>
            {% if item.body %}<p style="margin-top: 8px;">{{ item.body|linebreaksbr }}</p>{% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

{% if partners %}
<section class="content-section">
    <div class="content-inner">
        <h2 style="margin-bottom: 6px;">{{ partners_heading.partners_heading|default:t.home_partners_title }}</h2>
        {% if partners_heading.partners_subheading %}<p style="color: var(--muted); margin-bottom: 18px;">{{ partners_heading.partners_subheading }}</p>{% endif %}
        <div class="partners-grid">
            {% for partner in partners %}
            {% if partner.website_url %}
            <a href="{{ partner.website_url }}" target="_blank" rel="noopener noreferrer" class="partner-logo-card" title="{{ partner.name }}">
                <img src="{{ partner.logo_url }}" alt="{{ partner.name }}" loading="lazy">
            </a>
            {% else %}
            <div class="partner-logo-card" title="{{ partner.name }}">
                <img src="{{ partner.logo_url }}" alt="{{ partner.name }}" loading="lazy">
            </div>
            {% endif %}
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}
{% endblock %}

{% block extra_scripts %}
{% if how_to.how_to_thumbnail_url and how_to_video_embed_url %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var playBtn = document.getElementById('how-to-play-btn');
        var poster = document.getElementById('how-to-video-poster');
        var wrap = document.getElementById('how-to-video-wrap');
        if (!playBtn || !poster || !wrap) return;
        playBtn.addEventListener('click', function () {
            var iframe = document.createElement('iframe');
            iframe.src = wrap.dataset.videoSrc + (wrap.dataset.videoSrc.indexOf('?') === -1 ? '?' : '&') + 'autoplay=1';
            iframe.title = 'How it works';
            iframe.frameBorder = '0';
            iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
            iframe.allowFullscreen = true;
            wrap.replaceChild(iframe, poster);
        });
    });
</script>
{% endif %}
{% endblock %}