{# Widget « Newsletter » — inscription enregistrée côté serveur
   (WidgetNewsletterController), avec honeypot et limitation de taux. #}

<div class="izi-newsletter" style="--izi-nl-accent: {{ accentColor }};">
    {% if title %}<h3 class="izi-newsletter__title">{{ title }}</h3>{% endif %}
    {% if subtitle %}<p class="izi-newsletter__subtitle">{{ subtitle }}</p>{% endif %}

    <form class="izi-newsletter__form izi-newsletter__form--{{ layout }}"
          method="post"
          action="{{ path('widget_newsletter_submit') }}"
          data-success-message="{{ successMessage|e('html_attr') }}">
        {# Honeypot : champ invisible qu'un humain ne remplit jamais #}
        <input type="text" name="newsletter[website_url]" value="" tabindex="-1" autocomplete="off" aria-hidden="true"
               style="position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;">
        <input type="hidden" name="newsletter[successMessage]" value="{{ successMessage|e('html_attr') }}">

        <input class="izi-newsletter__input" type="email" name="newsletter[email]" required
               placeholder="votre@email.fr" aria-label="Votre adresse email">
        <button class="izi-newsletter__button" type="submit">{{ buttonText }}</button>
    </form>

    <p class="izi-newsletter__feedback" role="status" aria-live="polite" hidden></p>
</div>

<style>
    .izi-newsletter {
        max-width: 640px;
        margin: 0 auto;
        padding: 40px 20px;
        text-align: center;
    }

    .izi-newsletter__title {
        margin: 0 0 8px 0;
        font-size: 26px;
        font-weight: 700;
        color: var(--color-text, #1e293b);
    }

    .izi-newsletter__subtitle {
        margin: 0 0 20px 0;
        font-size: 15px;
        color: var(--color-text-light, #64748b);
    }

    .izi-newsletter__form {
        display: flex;
        gap: 10px;
        max-width: 440px;
        margin: 0 auto;
    }

    .izi-newsletter__form--stacked { flex-direction: column; }

    .izi-newsletter__input {
        flex: 1;
        padding: 13px 16px;
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: var(--radius-md, 8px);
        font-size: 15px;
        min-width: 0;
    }

    .izi-newsletter__input:focus {
        outline: none;
        border-color: var(--izi-nl-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--izi-nl-accent) 20%, transparent);
    }

    .izi-newsletter__button {
        padding: 13px 24px;
        border: none;
        border-radius: var(--radius-md, 8px);
        background: var(--izi-nl-accent);
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: filter 0.2s;
        white-space: nowrap;
    }

    .izi-newsletter__button:hover { filter: brightness(0.92); }
    .izi-newsletter__button:disabled { opacity: 0.6; cursor: wait; }

    .izi-newsletter__feedback {
        margin: 14px 0 0 0;
        font-size: 14px;
        font-weight: 600;
    }

    .izi-newsletter__feedback--success { color: #16a34a; }
    .izi-newsletter__feedback--error { color: #dc2626; }

    .container-on-dark .izi-newsletter__title { color: #ffffff; }
    .container-on-dark .izi-newsletter__subtitle { color: var(--primitive-gray-200, #e2e8f0); }

    @media (max-width: 560px) {
        .izi-newsletter__form { flex-direction: column; }
    }
</style>

<script>
    (function () {
        document.querySelectorAll('.izi-newsletter__form').forEach(function (form) {
            if (form.dataset.iziNlBound) return;
            form.dataset.iziNlBound = '1';

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                var button = form.querySelector('.izi-newsletter__button');
                var feedback = form.parentNode.querySelector('.izi-newsletter__feedback');
                button.disabled = true;

                fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form),
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                    .then(function (response) { return response.json(); })
                    .then(function (result) {
                        feedback.hidden = false;
                        feedback.textContent = result.message ||
                            (result.success ? form.dataset.successMessage : 'Une erreur est survenue.');
                        feedback.className = 'izi-newsletter__feedback izi-newsletter__feedback--' +
                            (result.success ? 'success' : 'error');
                        if (result.success) form.reset();
                    })
                    .catch(function () {
                        feedback.hidden = false;
                        feedback.textContent = 'Une erreur est survenue. Veuillez réessayer.';
                        feedback.className = 'izi-newsletter__feedback izi-newsletter__feedback--error';
                    })
                    .finally(function () { button.disabled = false; });
            });
        });
    })();
</script>