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

{% block content %}
    <mj-section background-color="#ffffff" padding-top="0px">
        <mj-column width="100%">
            <mj-text font-size="24px" color="#10b981" font-family="Arial, sans-serif" font-weight="bold" align="center">
                Signature confirmée !
            </mj-text>
            <mj-text font-size="16px" color="#333333" font-family="Arial, sans-serif" align="center">
                Votre contrat <strong>#{{ datas.contrats.numReservation }}</strong> est désormais signé.
            </mj-text>
        </mj-column>
    </mj-section>

    <mj-section background-color="#fffbeb" border="2px solid #fbbf24" border-radius="10px">
        <mj-column width="100%">
            <mj-text font-size="16px" color="#92400e" font-family="Arial, sans-serif" font-weight="bold" align="center">
                ⚠️ ACTION REQUISE : PAIEMENT DE L'ACOMPTE
            </mj-text>
            <mj-text font-size="14px" color="#b45309" font-family="Arial, sans-serif" line-height="1.5" align="center">
                Pour valider définitivement votre réservation, vous disposez de <strong>3 jours</strong> pour effectuer le paiement de l'acompte.
                <br/><br/>
                Passé ce délai, votre réservation sera <strong>automatiquement annulée</strong> et les dates seront libérées.
            </mj-text>
        </mj-column>
    </mj-section>

    <mj-section background-color="#ffffff">
        <mj-column width="100%">
            <mj-text font-size="14px" color="#555555" font-family="Arial, sans-serif">
                Bonjour {{ datas.contrats.customer.name }},<br/><br/>
                Nous avons bien reçu votre signature électronique. Vous trouverez en pièces jointes de cet e-mail :
            </mj-text>
            <mj-text font-size="13px" color="#555555" font-family="Arial, sans-serif">
                <ul>
                    <li>Votre contrat signé au format PDF</li>
                    <li>Le certificat d'audit de la signature</li>
                </ul>
            </mj-text>
        </mj-column>
    </mj-section>
{% endblock %}
