{% extends 'base.html.twig' %}
{% block title %}{{ 'download.title'|trans }}{% endblock %}
{% block meta_description %}{{ 'download.meta_description'|trans }}{% endblock %}

{% block head_extra %}
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
{% endblock %}

{% block body %}
<section class="py-20">
    <div class="max-w-3xl mx-auto px-4 text-center">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-dark">{{ 'download.heading'|trans }}</h1>
        <p class="mt-4 text-lg text-gray-500">{{ 'download.subtitle'|trans }}</p>

        {# Waitlist count #}
        {% if waitlist_count > 0 %}
        {# |raw is intentional: translation contains <strong> tag for count highlight #}
        <p class="mt-6 text-sm text-gray-400">{{ 'download.waitlist_count'|trans({'%count%': waitlist_count})|raw }}</p>
        {% endif %}

        {# Waitlist form #}
        <div class="mt-10 bg-white rounded-2xl p-8 border border-gray-200 shadow-sm max-w-md mx-auto"
             data-controller="waitlist"
             data-waitlist-sending-label-value="{{ 'download.sending'|trans }}"
             data-waitlist-submit-label-value="{{ 'download.notify_me'|trans }}">
            <form data-waitlist-target="form" data-action="submit->waitlist#submit" class="space-y-4">
                <div>
                    <input type="text" name="name" placeholder="{{ 'download.name_placeholder'|trans }}" required
                        class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-scout focus:ring-2 focus:ring-scout/20 outline-none text-sm">
                </div>
                <div>
                    <input type="email" name="email" placeholder="{{ 'download.email_placeholder'|trans }}" required
                        class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-scout focus:ring-2 focus:ring-scout/20 outline-none text-sm">
                </div>
                <input type="hidden" name="_token" value="{{ csrf_token('public_form') }}">
                <div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}" data-theme="light" data-size="flexible"></div>
                <button type="submit" data-waitlist-target="submit"
                    class="w-full px-6 py-3 bg-blitz text-white font-bold rounded-full hover:bg-blitz/90 transition text-lg">
                    {{ 'download.notify_me'|trans }}
                </button>
            </form>
            <div data-waitlist-target="success" class="hidden text-center">
                <div class="text-4xl mb-4">🎉</div>
                <p class="text-lg font-bold text-dark" data-message>{{ 'download.thank_you'|trans }}</p>
            </div>
            <p data-waitlist-target="message" class="hidden mt-4 font-semibold"></p>
        </div>

        {# Preview phones placeholder #}
        <div class="mt-16 flex justify-center gap-4">
            {% for i in 1..3 %}
            <div class="w-40 h-72 bg-gray-100 rounded-2xl border border-gray-200 flex items-center justify-center text-gray-400 text-xs">
                {{ 'download.screenshot'|trans({'%number%': i}) }}
            </div>
            {% endfor %}
        </div>

        {% if site_settings.monetizationEnabled %}
        {# Store buttons #}
        <div class="mt-12 flex flex-col sm:flex-row gap-4 justify-center opacity-50">
            <a href="#" class="inline-flex items-center justify-center px-8 py-4 bg-dark text-white text-lg font-bold rounded-xl">
                <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
                {{ 'download.app_store_soon'|trans }}
            </a>
            <a href="#" class="inline-flex items-center justify-center px-8 py-4 bg-dark text-white text-lg font-bold rounded-xl">
                <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.302 2.302-2.302 2.302L15.396 12l2.302-2.492zM5.864 2.658L16.8 8.99l-2.302 2.302L5.864 2.658z"/></svg>
                {{ 'download.google_play_soon'|trans }}
            </a>
        </div>
        {% endif %}
    </div>
</section>

{% endblock %}