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

{% block body %}
    {% set primaryColor = '#72a333' %}

    <h1 style="color: #0f172a; font-size: 22px; font-weight: 700; margin-bottom: 20px; text-align: center; font-family: 'Manrope', sans-serif;">
        Bienvenue dans l'équipe !
    </h1>

    <p style="color: #475569; font-size: 15px; line-height: 1.6;">
        Bonjour <strong>{{ user.prenom }}</strong>,
    </p>

    <p style="color: #475569; font-size: 15px; line-height: 1.6;">
        <strong>{{ rootUser.nomComplet }}</strong> vous a invité à rejoindre l'espace de gestion de <strong>{{ entreprise.raisonSociale }}</strong> sur LoyerExpress.com.
    </p>

    {# Bloc des identifiants #}
    <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px; margin: 30px 0;">
        <h3 style="margin-top: 0; font-size: 14px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px;">
            Vos accès de connexion
        </h3>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td style="padding-bottom: 10px; font-size: 14px; color: #475569;"><strong>Email :</strong></td>
                <td style="padding-bottom: 10px; font-size: 14px; color: #0f172a;">{{ user.email }}</td>
            </tr>
            <tr>
                <td style="font-size: 14px; color: #475569;"><strong>Mot de passe :</strong></td>
                <td style="font-size: 14px; color: #0f172a;"><code>{{ plainPassword }}</code></td>
            </tr>
        </table>
    </div>

    {# Bouton d'action #}
    <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: 8px; font-weight: 700; font-size: 15px; display: inline-block;">
                    ACCÉDER À MON ESPACE
                </a>
            </td>
        </tr>
    </table>

    <div style="background-color: #fffbeb; border-left: 4px solid #f59e0b; padding: 15px; margin-top: 20px;">
        <p style="font-size: 13px; color: #92400e; margin: 0;">
            <strong>Sécurité :</strong> Pour des raisons de confidentialité, nous vous recommandons de modifier votre mot de passe dès votre première connexion dans l'onglet "Mon profil".
        </p>
    </div>

    <p style="margin-top: 30px; font-size: 14px; color: #64748b; text-align: center;">
        Besoin d'aide ? Répondez simplement à cet email.
    </p>
{% endblock %}