{% extends "base.html" %}

{% block preheader %}Welcome to {{ product_name }}! Let's get you started.{% endblock %}

{% block content %}
<!-- Heading -->
<h1 style="margin: 0 0 8px 0; font-size: 26px; font-weight: 700; color: #1a1a2e; line-height: 1.3;">
  Welcome to {{ product_name }}!
</h1>

<p style="margin: 0 0 28px 0; font-size: 16px; line-height: 1.6; color: #4a4a5a;">
  {% if user_name %}Hi {{ user_name }},{% else %}Hi there,{% endif %}
</p>

<p style="margin: 0 0 28px 0; font-size: 16px; line-height: 1.6; color: #4a4a5a;">
  We're thrilled to have you on board. {{ product_name }} is built to help you work smarter, and here's what you can do right away:
</p>

<!-- Features list -->
{% if features %}
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 0 32px 0;">
  {% for feature in features %}
  <tr>
    <td style="padding: 0 12px 16px 0; vertical-align: top; width: 28px;">
      <div style="width: 28px; height: 28px; border-radius: 50%; background-color: #eef2ff; text-align: center; line-height: 28px; font-size: 14px; color: #6366f1; font-weight: 600;">
        {{ loop.index }}
      </div>
    </td>
    <td style="padding: 0 0 16px 0; vertical-align: top;">
      <p style="margin: 0; font-size: 15px; line-height: 1.5; color: #4a4a5a; padding-top: 3px;">
        {{ feature }}
      </p>
    </td>
  </tr>
  {% endfor %}
</table>
{% endif %}

<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
  <tr>
    <td style="text-align: center; padding: 4px 0 16px 0;">
      <a href="{{ login_url }}" style="display: inline-block; background-color: #6366f1; color: #ffffff; font-size: 16px; font-weight: 600; text-decoration: none; padding: 14px 36px; border-radius: 8px; mso-padding-alt: 0; text-align: center;">
        <!--[if mso]><i style="letter-spacing: 36px; mso-font-width: -100%; mso-text-raise: 26pt;">&nbsp;</i><![endif]-->
        <span style="mso-text-raise: 13pt;">Get Started</span>
        <!--[if mso]><i style="letter-spacing: 36px; mso-font-width: -100%;">&nbsp;</i><![endif]-->
      </a>
    </td>
  </tr>
</table>

<p style="margin: 16px 0 0 0; font-size: 14px; line-height: 1.5; color: #8c8c9a; text-align: center;">
  If you didn't create this account, you can safely ignore this email.
</p>
{% endblock %}