{% 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="font-display text-4xl sm:text-5xl font-extrabold text-dark tracking-tight" style="text-wrap: balance">{{ 'download.heading'|trans }}</h1>
        <p class="mt-4 text-lg text-gray-500">{{ 'download.subtitle'|trans }}</p>


        {# 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>

    </div>
</section>

{% endblock %}