{% comment %}
Composant réutilisable pour le formulaire d'inscription newsletter.

Paramètres (optionnels) :
- title : Titre de la section (défaut: "Rejoins la communauté")
- subtitle : Sous-titre (défaut: "Reçois des tips d'organisation...")
- source : Source pour le tracking (défaut: "website")
- variant : "full" (avec fond accent) ou "compact" (sans fond) - défaut: "full"
{% endcomment %}

{% if variant == "compact" %}
<!-- Version compacte sans fond coloré -->
<div class="border-2 border-accent rounded-lg p-8 text-center">
    <h2 class="font-serif text-2xl font-bold mb-4 text-ink">
        {{ title|default:"Rejoins la communauté" }}
    </h2>
    <p class="mb-6 text-gray-medium">
        {{ subtitle|default:"Reçois des tips d'organisation directement dans ta boîte mail. Pas de spam, promis." }}
    </p>
    <form id="newsletter-form-{{ source|default:'website' }}" action="{% url 'newsletter:subscribe' %}" method="post" class="flex flex-col sm:flex-row gap-4 justify-center">
        {% csrf_token %}
        <input type="hidden" name="source" value="{{ source|default:'website' }}">
        <!-- Honeypot anti-spam -->
        <input type="text" name="website" class="hidden" tabindex="-1" autocomplete="off">
        <input
            type="email"
            name="email"
            placeholder="ton@email.com"
            class="px-4 py-3 rounded text-ink border border-dot w-full sm:w-auto sm:min-w-[300px] focus:outline-none focus:border-accent"
            required
        >
        <button type="submit" class="bg-accent text-white px-6 py-3 rounded font-medium hover:bg-ink transition-colors">
            S'inscrire
        </button>
    </form>
    <p class="text-sm text-gray-medium mt-4">
        À toi de JoPer !
    </p>
</div>
{% else %}
<!-- Version complète avec fond accent -->
<section class="bg-accent text-white py-16">
    <div class="max-w-2xl mx-auto px-4 text-center">
        <h2 class="font-serif text-3xl font-bold mb-4">
            {{ title|default:"Rejoins la communauté" }}
        </h2>
        <p class="mb-8 opacity-90">
            {{ subtitle|default:"Reçois des tips d'organisation directement dans ta boîte mail. Pas de spam, promis." }}
        </p>
        <form id="newsletter-form-{{ source|default:'website' }}" action="{% url 'newsletter:subscribe' %}" method="post" class="flex flex-col sm:flex-row gap-4 justify-center">
            {% csrf_token %}
            <input type="hidden" name="source" value="{{ source|default:'website' }}">
            <!-- Honeypot anti-spam -->
            <input type="text" name="website" class="hidden" tabindex="-1" autocomplete="off">
            <input
                type="email"
                name="email"
                placeholder="ton@email.com"
                class="px-4 py-3 rounded text-ink bg-cream border-2 border-white w-full sm:w-auto sm:min-w-[300px] focus:outline-none focus:border-kraft"
                required
            >
            <button type="submit" class="bg-ink text-white px-6 py-3 rounded font-medium hover:bg-gray-800 transition-colors">
                S'inscrire
            </button>
        </form>
        <p id="newsletter-message-{{ source|default:'website' }}" class="text-sm opacity-70 mt-4">
            À toi de JoPer !
        </p>
    </div>
</section>
{% endif %}