{% extends 'emails/_layout-rich.html.twig' %}

{% set trustItems = [
    {icon: 'shield', title: 'Conforme', desc: 'Factur-X et réglementation à jour'},
    {icon: 'clock', title: 'Gain de temps', desc: 'Facturation en quelques clics'},
    {icon: 'server', title: 'Fiable', desc: 'Hébergement en France'},
    {icon: 'check', title: 'Sans jargon', desc: 'Pensé pour les non-comptables'},
] %}

{% block title %}{{ headline }}{% endblock %}

{% block banner_icon %}<img src="{{ (iconSrcs|default({}))['envelope-white']|default(email.image('emails/images/icon-envelope-white.png')) }}" width="18" height="18" alt="" style="display:block; width:18px; height:18px;">{% endblock %}
{% block banner_label %}Newsletter{% endblock %}

{% block body %}
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 28px;">
        <tr>
            <td style="vertical-align:middle;{% if heroImageUrl %} width:58%; padding-right:20px;{% endif %}">
                {% if kicker %}
                    <p style="margin:0 0 6px; font-size:11px; font-weight:bold; letter-spacing:0.08em; text-transform:uppercase; color:#111827;">{{ kicker }}</p>
                {% endif %}
                {% if headline %}
                    <h1 style="margin:0 0 12px; font-size:24px; line-height:1.3; color:#111827;">
                        {{ headline }}{% if headlineHighlight %} <span style="color:#4b5563;">{{ headlineHighlight }}</span>{% endif %}
                    </h1>
                {% endif %}
                {% if intro %}
                    <div style="margin:0 0 18px; color:#4b5563;">{{ intro|raw }}</div>
                {% endif %}
                {% if ctaUrl and ctaLabel %}
                    <table role="presentation" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="border-radius:8px; background-color:#111827;">
                                <a href="{{ ctaUrl }}" style="display:inline-block; padding:11px 16px; color:#ffffff; text-decoration:none; font-weight:bold; font-size:11.5px; line-height:1.25;">
                                    {{ ctaLabel|upper }} →
                                </a>
                            </td>
                        </tr>
                    </table>
                {% endif %}
            </td>
            {% if heroImageUrl %}
                <td width="42%" style="width:42%; vertical-align:middle; text-align:center;">
                    <img src="{{ heroImageUrl }}" alt="" width="208" style="display:block; width:100%; max-width:208px; height:auto; margin:0 auto;">
                </td>
            {% endif %}
        </tr>
    </table>

    {% if items|length > 0 %}
        <p style="margin:0 0 14px; text-align:center; font-size:11px; font-weight:bold; letter-spacing:0.08em; text-transform:uppercase; color:#111827;">Nouveautés</p>
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-bottom:20px;">
            {% for item in items %}
                <tr>
                    <td style="padding-bottom:12px;">
                        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f5f6fb; border-radius:10px;">
                            <tr>
                                {% if item.imageUrl %}
                                    <td width="56" style="padding:16px 0 16px 16px; vertical-align:top;">
                                        <img src="{{ item.imageUrl }}" alt="" width="40" height="40" style="display:block; width:40px; height:40px; object-fit:contain;">
                                    </td>
                                {% endif %}
                                <td style="padding:16px; vertical-align:top;">
                                    {% if item.title %}<p style="margin:0 0 4px; font-size:14px; font-weight:bold; color:#111827;">{{ item.title }}</p>{% endif %}
                                    {% if item.description %}<div style="margin:0; font-size:12.5px; color:#6b7280; line-height:1.5;">{{ item.description|raw }}</div>{% endif %}
                                </td>
                                {% if item.url %}
                                    <td width="32" style="padding-right:16px; vertical-align:middle; text-align:right;">
                                        <a href="{{ item.url }}" style="color:#111827; text-decoration:none; font-size:16px; font-weight:bold;">→</a>
                                    </td>
                                {% endif %}
                            </tr>
                        </table>
                    </td>
                </tr>
            {% endfor %}
        </table>
    {% endif %}

    {% if tipText %}
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2ff; border-radius:10px; margin-bottom:8px;">
            <tr>
                <td width="40" style="padding:16px 0 16px 16px; vertical-align:top; line-height:0;"><img src="{{ (iconSrcs|default({}))['bulb']|default(email.image('emails/images/icon-bulb.png')) }}" width="22" height="22" alt="" style="display:block; width:22px; height:22px;"></td>
                <td style="padding:16px; vertical-align:middle;">
                    <div style="margin:0; font-size:12.5px; color:#312e81; line-height:1.5;">{{ tipText|raw }}</div>
                </td>
                {% if tipCtaUrl and tipCtaLabel %}
                    <td style="padding-right:16px; vertical-align:middle; white-space:nowrap;">
                        <a href="{{ tipCtaUrl }}" style="display:inline-block; padding:8px 14px; border:1px solid #111827; border-radius:6px; color:#111827; text-decoration:none; font-weight:bold; font-size:11.5px;">{{ tipCtaLabel }} →</a>
                    </td>
                {% endif %}
            </tr>
        </table>
    {% endif %}

    {% include 'emails/_trust-row.html.twig' with {items: trustItems} %}
{% endblock %}

{% block footer_text %}Vous recevez cet email car vous êtes inscrit à la newsletter May·Facturation.{% endblock %}
{% block unsubscribe_label %}Se désinscrire{% endblock %}