{% extends 'emails/base_email.html.twig' %}

{% block body %}
    {# Configuration des styles et variables #}
    {% set isParticulier = (entreprise.typeCompte == 'PARTICULIER') %}
    {% set primaryColor = '#72a333' %}
    
    <h1 style="color: #0f172a; font-size: 20px; font-weight: 600; margin-bottom: 10px; text-align: center; font-family: 'Manrope', sans-serif;">
        {% if isParticulier %}
            Vos quittances sont prêtes,<br> {{ user.prenom }} !
        {% else %}
            Facturation traitée pour<br> {{ entreprise.raisonSociale }}
        {% endif %}
    </h1>
    
    <p style="text-align: center; color: #64748b; font-size: 15px; margin-bottom: 30px;">
        Le processus de génération automatique des factures est terminé.
    </p>

    <div style="color: #475569; font-size: 15px; line-height: 1.6;">
        <p>Bonjour <strong>{{ user.prenom }}</strong>,</p>
        
        <p>
            Nous vous informons que les factures arrivant à échéance demain ont été générées avec succès par le système <strong>LOYER-EXPRESS</strong>.
        </p>
    </div>

    {# Bloc d'information principal #}
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; border-left: 4px solid {{ primaryColor }}; margin: 25px 0;">
        <tr>
            <td style="padding: 25px;">
                <h3 style="margin-top: 0; font-size: 14px; color: {{ primaryColor }}; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 800;">
                    📊 Résumé de l'opération
                </h3>
                <p style="font-size: 14px; color: #475569; margin: 10px 0 0 0;">
                    {{ message }}
                </p>
            </td>
        </tr>
    </table>

    {# Bouton d'action #}
    {% if url %}
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 35px 0;">
        <tr>
            <td align="center">
                <a href="{{ url }}" 
                   style="background-color: {{ primaryColor }}; color: #ffffff; padding: 14px 35px; text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 13px; display: inline-block; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 6px rgba(114, 163, 51, 0.2);">
                    CONSULTER LES FACTURES
                </a>
            </td>
        </tr>
    </table>
    {% endif %}

    {# Rappel informatif #}
    <div style="background-color: #ffffff; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 15px; margin-top: 20px;">
        <p style="font-size: 13px; color: #64748b; margin: 0; text-align: center;">
            💡 <strong>Rappel :</strong> Les locataires concernés recevront leur notification de paiement conformément à vos réglages de gestion.
        </p>
    </div>

    {# Lien de secours #}
    {% if url %}
    <p style="margin-top: 30px; font-size: 11px; color: #94a3b8; text-align: center; line-height: 1.5;">
        Si le bouton ne fonctionne pas, copiez ce lien :<br>
        <span style="color: {{ primaryColor }};">{{ url }}</span>
    </p>
    {% endif %}

    {# Signature #}
    <div style="margin-top: 40px; font-size: 14px; border-top: 1px solid #f1f5f9; padding-top: 20px; color: #475569;">
        <p style="margin-bottom: 5px;">Une question sur cette génération ? Notre support est à votre écoute.</p>
        <p style="margin-top: 20px;">
            Cordialement,<br>
            <strong style="color: {{ primaryColor }};">L'équipe LOYER-EXPRESS</strong>
        </p>
    </div>
{% endblock %}