{% extends 'mails/base.twig' %}

{% block content %}
    <mj-section background-color="#ffffff" padding="40px 20px" border-radius="20px">
        <mj-column>
            {# En-tête avec avertissement d'annulation #}
            <mj-text font-size="20px" font-weight="bold" color="#e74c3c" align="center">
                ⚠️ Action requise : Risque d'annulation
            </mj-text>

            <mj-divider border-width="2px" border-color="#e74c3c" width="50px" />

            <mj-text font-size="14px" color="#555555" padding-top="20px">
                Bonjour {{ datas.customer.name }} {{ datas.customer.surname }},
            </mj-text>

            <mj-text font-size="14px" color="#555555" line-height="22px">
                Sauf erreur de notre part, votre contrat n°<strong>{{ datas.contrat.numReservation }}</strong> n'a pas encore été signé électroniquement.
            </mj-text>

            <mj-text font-size="15px" color="#e74c3c" font-weight="bold" line-height="22px" padding-top="10px">
                Attention : Conformément à nos conditions, si votre signature n'est pas effectuée sous 3 jours, votre réservation sera automatiquement annulée et les créneaux seront remis en disponibilité.
            </mj-text>

            <mj-divider border-color="#f4f4f4" padding-top="20px" />

            {# Récapitulatif financier #}
            <mj-text font-size="16px" color="#333333">
                <strong>Total de la réservation :</strong> {{ datas.contrat|totalContrat }} €
            </mj-text>

            <mj-text font-size="16px" color="#333333">
                <strong>Acompte :</strong> {{ datas.contrat|totalContratAccompte }} €
            </mj-text>

            <mj-text font-size="18px" color="#2c3e50" font-weight="bold" padding-top="10px">
                Arrhes à régler (25%) : {{ (datas.contrat|totalContrat * 0.25)|number_format(2, ',', ' ') }} €
            </mj-text>

            <mj-button background-color="#3498db" color="white" font-size="16px" font-weight="bold" border-radius="5px" href="{{ datas.sign }}" padding-top="30px">
                Voir et signer mon contrat
            </mj-button>

            <mj-text font-size="12px" color="#999999" padding-top="30px" align="center">
                Besoin d'aide ? Répondez simplement à cet email pour contacter notre équipe.
            </mj-text>
        </mj-column>
    </mj-section>


{% endblock %}
