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

{% block body %}
    {# Définition des libellés selon le type de compte #}
    {% set isParticulier = (entreprise.typeCompte == 'PARTICULIER') %}
    {% set primaryColor = '#72a333' %}
    
    <h1 style="color: #0f172a; font-size: 18px; font-weight: 600; margin-bottom: 10px; text-align: center; font-family: 'Manrope', sans-serif;">
        {% if isParticulier %}
            Bienvenue sur LOYER-EXPRESS<br> {{ user.prenom }} !
        {% else %}
            Bienvenue chez LOYER-EXPRESS<br> {{ entreprise.raisonSociale }} !
        {% endif %}
    </h1>
    
    <p style="text-align: center; color: #64748b; font-size: 15px; margin-bottom: 30px;">
        Votre espace de gestion immobilière intelligente est prêt.
    </p>

    <div style="color: #475569; font-size: 15px; line-height: 1.6;">
        <p>Bonjour <strong>{{ user.prenom }}</strong>,</p>
        
        <p>
            {% if isParticulier %}
                Nous sommes ravis de vous accompagner dans la gestion de votre patrimoine personnel. <strong>LOYER-EXPRESS</strong> a été conçu pour vous faire gagner du temps et sécuriser vos revenus locatifs.
            {% else %}
                Merci d'avoir choisi <strong>LOYER-EXPRESS</strong> pour votre agence. Notre solution est là pour optimiser la productivité de votre équipe et professionnaliser vos échanges.
            {% endif %}
        </p>
        
        <p>Pour activer votre accès et commencer à configurer vos biens, merci de confirmer votre adresse e-mail en cliquant sur le bouton ci-dessous :</p>
    </div>

    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 35px 0;">
        <tr>
            <td align="center">
                <a href="{{ url('app_verify_email', {token: user.confirmationToken}) }}" 
                   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);">
                    ACTIVER MON COMPTE
                </a>
            </td>
        </tr>
    </table>

    <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 }};">
        <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;">
                    🚀 Prêt pour votre premier loyer ?
                </h3>
                <p style="font-size: 13px; color: #64748b; margin-bottom: 15px;">Voici comment débuter en 2 minutes :</p>
                
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td width="25" style="vertical-align: top; font-weight: 800; color: {{ primaryColor }}; font-size: 14px;">1.</td>
                        <td style="padding-bottom: 12px; font-size: 13px; color: #475569;">
                            <strong>Configurez votre compte</strong> : Ajoutez vos infos de contact pour vos quittances.
                        </td>
                    </tr>
                    <tr>
                        <td width="25" style="vertical-align: top; font-weight: 800; color: {{ primaryColor }}; font-size: 14px;">2.</td>
                        <td style="padding-bottom: 12px; font-size: 13px; color: #475569;">
                            <strong>Créez vos biens</strong> : Enregistrez vos immeubles ou appartements.
                        </td>
                    </tr>
                    <tr>
                        <td width="25" style="vertical-align: top; font-weight: 800; color: {{ primaryColor }}; font-size: 14px;">3.</td>
                        <td style="font-size: 13px; color: #475569;">
                            <strong>Générez vos baux</strong> : Enregistrez vos locataires pour automatiser la facturation.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <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('app_verify_email', {token: user.confirmationToken}) }}</span>
    </p>

    <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'un coup de main ? Notre support est disponible pour vous aider.</p>
        <p style="margin-top: 20px;">
            À très bientôt,<br>
            <strong style="color: {{ primaryColor }};">L'équipe LOYER-EXPRESS</strong>
        </p>
    </div>
{% endblock %}