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

{% block content %}
    <mj-section padding-top="40px">
        <mj-column>
            <mj-image width="180px" src="https://votre-site.fr/images/logo.png" alt="Ludik Event" />
        </mj-column>
    </mj-section>

    <mj-section>
        <mj-column background-color="#ffffff" padding="40px" border-radius="30px">
            <mj-text align="center" css-class="hero-title">
                Bienvenue parmi nous, <span class="brand-color">{{ datas.customer.surname }}</span> !
            </mj-text>

            <mj-image src="https://votre-site.fr/images/welcome-banner.jpg" alt="Fête Ludik Event" border-radius="20px" padding-top="20px" />

            <mj-text align="center" padding-top="30px">
                Nous sommes ravis de vous compter parmi nos clients. Votre compte est désormais actif, vous pouvez dès à présent explorer notre catalogue et planifier votre prochain événement.
            </mj-text>

            <mj-button href="https://votre-site.fr/reservation" padding-top="20px">
                Découvrir le catalogue
            </mj-button>

            <mj-text align="center" font-size="14px" color="#9ca3af" padding-top="20px">
                Besoin d'aide ? Notre équipe est à votre disposition pour vous accompagner dans votre projet.
            </mj-text>
        </mj-column>
    </mj-section>

    <mj-section padding-top="0px">
        <mj-column width="33.33%" padding="10px">
            <mj-text align="center" font-size="12px" font-weight="bold" color="#2563eb">
                🎈 +100 Structures
            </mj-text>
        </mj-column>
        <mj-column width="33.33%" padding="10px">
            <mj-text align="center" font-size="12px" font-weight="bold" color="#2563eb">
                🚚 Livraison Rapide
            </mj-text>
        </mj-column>
        <mj-column width="33.33%" padding="10px">
            <mj-text align="center" font-size="12px" font-weight="bold" color="#2563eb">
                ✅ 100% Sécurisé
            </mj-text>
        </mj-column>
    </mj-section>
{% endblock %}
