{% block subject -%}
{{ 'mails.welcome.subject'|trans({}, _locale) }}
{%- endblock %}

{% block text -%}
{%- set cta_link = app_url ~ '?utm_source=transactional&utm_medium=email&utm_campaign=bienvenue&utm_content=cta' -%}
{{ 'mails.welcome.greeting'|trans({ name: username }, _locale) }}

{{ 'mails.welcome.intro'|trans({}, _locale) }}

* {{ 'mails.welcome.perk1Title'|trans({}, _locale) }} {{ 'mails.welcome.perk1Body'|trans({}, _locale) }}
* {{ 'mails.welcome.perk2Title'|trans({}, _locale) }} {{ 'mails.welcome.perk2Body'|trans({}, _locale) }}
* {{ 'mails.welcome.perk3Title'|trans({}, _locale) }} {{ 'mails.welcome.perk3Body'|trans({}, _locale) }}

{{ 'mails.welcome.referralTip'|trans({}, _locale)|striptags }}
{% if referralCode %}
{{ 'mails.welcome.referralIntro'|trans({}, _locale) }} {{ referralCode }}

{{ 'mails.welcome.referralShare'|trans({}, _locale)|striptags }}
{% endif %}
{{ cta_link|raw }}

{{ 'mails.welcome.signoff'|trans({}, _locale) }}
-- {{ 'mails.welcome.team'|trans({}, _locale) }}
{%- endblock %}

{% block html -%}
{%- set cta_link = app_url ~ '?utm_source=transactional&utm_medium=email&utm_campaign=bienvenue&utm_content=cta' -%}
<!DOCTYPE html>
<html lang="{{ _locale }}" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>{{ 'mails.welcome.subject'|trans({}, _locale) }}</title>
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <![endif]-->
  <!--[if !mso]><!-->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&display=swap');
  </style>
  <!--<![endif]-->
  <style>
    body { margin:0; padding:0; word-spacing:normal; }
    @media (prefers-color-scheme: dark) {
      .ht-page   { background-color:#0b0b0a !important; }
      .ht-card   { background-color:#1a1919 !important; border-color:#4e4c4a !important; }
      .ht-logo-light { display:none !important; }
      .ht-logo-dark  { display:block !important; max-height:none !important; overflow:visible !important; }
      .ht-coupon { border-color:#e0703e !important; }
      .ht-code   { color:#e0703e !important; }
      .ht-title  { color:#f3f2f2 !important; }
      .ht-text   { color:#f3f2f2 !important; }
      .ht-muted  { color:#cdcccb !important; }
      .ht-footer { color:#979b9a !important; }
      .ht-link   { color:#e0703e !important; }
      .ht-tip    { background-color:#401c0c !important; }
    }
    @media only screen and (max-width:620px) {
      .ht-container { width:100% !important; }
      .ht-inner { padding:24px 20px !important; }
    }
  </style>
</head>
<body class="ht-page" bgcolor="#fcfcfb" style="margin:0;padding:0;background-color:#fcfcfb;">
  <div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
    {{ 'mails.welcome.preheader'|trans({}, _locale) }}&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
  </div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="ht-page" bgcolor="#fcfcfb" style="background-color:#fcfcfb;">
    <tr>
      <td align="center" style="padding:32px 16px;">
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="ht-container" style="width:600px;max-width:600px;">
          <tr>
            <td style="padding:0 4px 20px 4px;">
              <div class="ht-logo-light"><img src="{{ app_url }}/assets/logo-hexatrip.png?v=2" width="138" height="38" alt="Hexatrip" style="display:block;border:0;width:138px;height:38px;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:22px;font-weight:800;color:#d65e29;"></div>
              <div class="ht-logo-dark" style="display:none;mso-hide:all;max-height:0;overflow:hidden;"><img src="{{ app_url }}/assets/logo-hexatrip-blanc.png?v=2" width="138" height="38" alt="Hexatrip" style="display:block;border:0;width:138px;height:38px;"></div>
            </td>
          </tr>
          <tr>
            <td class="ht-card" bgcolor="#ffffff" style="background-color:#ffffff;border:1px solid #e6e5e5;border-radius:12px;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td class="ht-inner" style="padding:32px;">
                    <h1 class="ht-title" style="margin:0 0 20px 0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:26px;line-height:1.3;font-weight:700;color:#1a1919;">{{ 'mails.welcome.heading'|trans({}, _locale) }}</h1>
                    <p class="ht-text" style="margin:0 0 16px 0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#1a1919;">{{ 'mails.welcome.greeting'|trans({ name: username }, _locale) }}</p>
                    <p class="ht-text" style="margin:0 0 20px 0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#1a1919;">{{ 'mails.welcome.intro'|trans({}, _locale) }}</p>
                    <p class="ht-text" style="margin:0 0 14px 0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#1a1919;"><strong>{{ 'mails.welcome.perk1Title'|trans({}, _locale) }}</strong> {{ 'mails.welcome.perk1Body'|trans({}, _locale) }}</p>
                    <p class="ht-text" style="margin:0 0 14px 0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#1a1919;"><strong>{{ 'mails.welcome.perk2Title'|trans({}, _locale) }}</strong> {{ 'mails.welcome.perk2Body'|trans({}, _locale) }}</p>
                    <p class="ht-text" style="margin:0 0 20px 0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#1a1919;"><strong>{{ 'mails.welcome.perk3Title'|trans({}, _locale) }}</strong> {{ 'mails.welcome.perk3Body'|trans({}, _locale) }}</p>
                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 8px 0;">
                      <tr>
                        <td class="ht-tip" bgcolor="#fbefea" style="background-color:#fbefea;border-radius:12px;padding:16px 20px;">
                          <p class="ht-text" style="margin:0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;color:#1a1919;">{{ 'mails.welcome.referralTip'|trans({}, _locale)|raw }}</p>
                        </td>
                      </tr>
                    </table>
                    {% if referralCode %}
                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:16px 0 8px 0;">
                      <tr>
                        <td align="center" class="ht-coupon" style="border:2px dashed #d65e29;border-radius:12px;padding:20px;">
                          <p class="ht-muted" style="margin:0 0 8px 0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;color:#4e4c4a;">{{ 'mails.welcome.referralIntro'|trans({}, _locale) }}</p>
                          <p class="ht-code" style="margin:0 0 8px 0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:24px;font-weight:800;letter-spacing:3px;color:#d65e29;">{{ referralCode }}</p>
                          <p class="ht-muted" style="margin:0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;color:#4e4c4a;">{{ 'mails.welcome.referralShare'|trans({}, _locale)|raw }}</p>
                        </td>
                      </tr>
                    </table>
                    {% endif %}
                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:24px 0;">
                      <tr>
                        <td align="center" bgcolor="#d65e29" style="border-radius:12px;">
                          <!--[if mso]>
                          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ cta_link }}" style="height:52px;v-text-anchor:middle;width:260px;" arcsize="23%" fillcolor="#d65e29" stroke="f">
                            <w:anchorlock/>
                            <center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;">{{ 'mails.welcome.cta'|trans({}, _locale) }}</center>
                          </v:roundrect>
                          <![endif]-->
                          <!--[if !mso]><!-->
                          <a href="{{ cta_link }}" style="display:inline-block;padding:16px 32px;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;color:#ffffff;text-decoration:none;border-radius:12px;background-color:#d65e29;">{{ 'mails.welcome.cta'|trans({}, _locale) }}</a>
                          <!--<![endif]-->
                        </td>
                      </tr>
                    </table>
                    <p class="ht-text" style="margin:0;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#1a1919;">{{ 'mails.welcome.signoff'|trans({}, _locale) }}<br><strong>{{ 'mails.welcome.team'|trans({}, _locale) }}</strong></p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="ht-footer" align="center" style="padding:24px 8px 0 8px;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.6;color:#82807d;">
              {{ 'mails.welcome.footerWhy'|trans({}, _locale) }}<br>{{ 'mails.welcome.footerLegal'|trans({ year: 'now'|date('Y'), email: mail_from_address }, _locale) }}
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
{%- endblock %}
