{% extends 'base.html' %}

{% block title %}Inscription confirmée{% endblock %}

{% block content %}
<section class="py-20">
    <div class="max-w-xl mx-auto px-4 text-center">
        <div class="text-6xl mb-6">🎉</div>
        <h1 class="font-serif text-3xl font-bold mb-4">Bienvenue dans la communauté !</h1>
        <p class="text-gray-medium mb-8">
            {% if subscriber.first_name %}Merci {{ subscriber.first_name }} !{% else %}Merci !{% endif %}
            Ton inscription est confirmée. Tu recevras bientôt nos meilleurs conseils d'organisation.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{% url 'newsletter:download' subscriber.unsubscribe_token %}" class="bg-accent text-white px-6 py-3 rounded font-medium hover:bg-ink transition-colors inline-flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                Accéder à tes ressources gratuites
            </a>
        </div>
        <div class="mt-6 flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/blog/" class="text-accent hover:text-ink font-medium">
                Découvrir le blog
            </a>
            <span class="hidden sm:inline text-dot">|</span>
            <a href="/" class="text-accent hover:text-ink font-medium">
                Retour à l'accueil
            </a>
        </div>
    </div>
</section>
{% endblock %}