{% extends 'base.twig' %}

{% block title %}{{'newsletter_confirme_register'|trans}}{% endblock %}
{% block meta_description %}{{'newsletter_confirme_register'|trans}}{% endblock %}

{% block canonical_url %}
    <link rel="canonical" href="{{ url('app_newsletter') }}" />
{% endblock %}

{% block body %}
    <div class="bg-white min-h-[70vh] flex items-center justify-center py-20">
        <div class="container mx-auto px-6 max-w-2xl text-center">

            {# --- CARTE DE CONFIRMATION STYLE NEUBRUTALISTE --- #}
            <div class="bg-white border-8 border-gray-900 p-10 md:p-16 shadow-[20px_20px_0px_0px_rgba(79,70,229,1)] transform -rotate-1">

                {# Icône Email #}
                <div class="text-7xl mb-6 transform rotate-6 inline-block text-pink-500">
                    <i class="fas fa-envelope-open-text"></i>
                </div>

                <h1 class="text-4xl md:text-6xl font-black uppercase italic mb-6 tracking-tighter leading-none text-gray-900">
                    {{ 'newsletter.confirm_page.header'|trans }}
                </h1>

                <div class="w-24 h-4 bg-yellow-400 mx-auto mb-8 border-2 border-gray-900"></div>

                <p class="text-xl md:text-2xl font-bold text-gray-800 mb-10 leading-relaxed uppercase">
                    {{ 'newsletter.confirm_page.message'|trans }}
                </p>

                {# Info supplémentaire #}
                <div class="bg-gray-100 p-4 border-4 border-gray-900 border-dashed mb-10">
                    <p class="text-xs font-black uppercase tracking-widest text-gray-600">
                        {{ 'newsletter.confirm_page.spam_hint'|trans }}
                    </p>
                </div>

                {# Bouton retour #}
                <a href="{{ path('app_home') }}" class="inline-block px-10 py-4 bg-indigo-600 text-white border-4 border-gray-900 font-black uppercase hover:bg-black transition-all shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
                    {{ 'newsletter.confirm_page.back_home'|trans }}
                </a>
            </div>

        </div>
    </div>
{% endblock %}