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

{% block body %}
    {# Configuration des styles et variables #}
    {% set isParticulier = (entreprise.typeCompte == 'PARTICULIER') %}
    
    {# Couleur dynamique : Rouge si J-0/J-3, Orange sinon #}
    {% set alertColor = (days <= 3) ? '#e11d48' : '#f59e0b' %} 
    {% 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 days == 0 %}
            ⚠️ Votre abonnement<br> expire AUJOURD'HUI !
        {% else %}
            Expiration imminente :<br> J-{{ days }} avant blocage
        {% endif %}
    </h1>
    
    <p style="text-align: center; color: #64748b; font-size: 15px; margin-bottom: 30px;">
        {% if isParticulier %}
            Bonjour {{ user.prenom }}, ne perdez pas l'accès à vos données.
        {% else %}
            Alerte de continuité de service pour {{ entreprise.raisonSociale }}.
        {% endif %}
    </p>

    <div style="color: #475569; font-size: 15px; line-height: 1.6;">
        <p>Bonjour <strong>{{ user.prenom }}</strong>,</p>
        
        <p>
            Nous vous informons que votre abonnement actuel sur <strong>LoyerExpress</strong> arrive à son terme. 
            Sans action de votre part, l'accès à la gestion de vos loyers sera <span style="color: {{ alertColor }}; font-weight: 700;">restreint</span> à partir du <strong>{{ "now"|date_modify("+" ~ days ~ " days")|date('d/m/Y') }}</strong>.
        </p>
    </div>

    {# Bloc d'information principal - Style Alerte #}
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: {{ days <= 3 ? '#fff1f2' : '#fffbeb' }}; border-radius: 8px; border: 1px solid {{ days <= 3 ? '#fecdd3' : '#fef3c7' }}; border-left: 4px solid {{ alertColor }}; margin: 25px 0;">
        <tr>
            <td style="padding: 25px;">
                <h3 style="margin-top: 0; font-size: 14px; color: {{ alertColor }}; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 800;">
                    {{ days == 0 ? "🛑 ALERTE CRITIQUE" : "⏳ RENOUVELLEMENT NÉCESSAIRE" }}
                </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: {{ alertColor }}; 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 {{ days <= 3 ? 'rgba(225, 29, 72, 0.2)' : 'rgba(245, 158, 11, 0.2)' }};">
                    RENOUVELER MON ABONNEMENT
                </a>
            </td>
        </tr>
    </table>
    {% endif %}

    {# Rappel informatif #}
    <div style="background-color: #f8fafc; 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>Note :</strong> Le renouvellement prolonge votre accès sans perte de données. Vos configurations et historiques seront conservés intacts.
        </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: {{ alertColor }}; text-decoration: underline;">{{ 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;">Besoin d'aide pour choisir votre plan ? Nous sommes là pour vous accompagner.</p>
        <p style="margin-top: 20px;">
            Cordialement,<br>
            <strong style="color: {{ primaryColor }};">L'équipe LOYER-EXPRESS</strong>
        </p>
    </div>
{% endblock %}