<!DOCTYPE html>
<html lang="en" 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.0"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="x-apple-disable-message-reformatting"/>
  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no"/>
  <title><%= typeof subject !== 'undefined' && subject ? subject : 'Message from Analytics Grade' %></title>

  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <![endif]-->

  <style>
    * { box-sizing: border-box; }
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; }
    body { margin: 0 !important; padding: 0 !important; background-color: #eef2f7; }
    body, td, th { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
    a { color: #8065f8; text-decoration: none; }
    a:hover { text-decoration: underline; }
    @media only screen and (max-width: 620px) {
      .email-container { width: 100% !important; max-width: 100% !important; }
      .mobile-padding { padding: 24px 16px !important; }
      .mobile-hero-padding { padding: 36px 20px !important; }
      .mobile-font-hero { font-size: 24px !important; line-height: 32px !important; }
      .mobile-hide { display: none !important; }
    }
  </style>
</head>
<body style="margin:0;padding:0;background-color:#eef2f7;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">

<!-- Hidden preheader -->
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;color:#eef2f7;line-height:1px">
  <% if (typeof subject !== 'undefined' && subject) { %><%= subject %><% } else { %>You have a new message from Analytics Grade.<% } %>
  &#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;
</div>

<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#eef2f7">
  <tr>
    <td align="center" style="padding:24px 12px">

      <table class="email-container" role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" style="max-width:600px;width:100%;border-radius:20px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.12)">

        <!-- HEADER -->
        <tr>
          <td style="background-color:#0b1f3a;padding:20px 32px" class="mobile-padding">
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td style="vertical-align:middle">
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td style="vertical-align:middle">
                        <img src="/analytics-grade.png" alt="" width="32" height="32" style="height:32px;width:32px;display:block;filter:brightness(0) invert(1)" />
                      </td>
                      <td style="padding-left:10px;vertical-align:middle">
                        <p style="margin:0;font-size:17px;font-weight:800;color:#ffffff;line-height:1;letter-spacing:-.3px">Analytics Grade</p>
                        <p style="margin:2px 0 0;font-size:9px;font-weight:500;color:rgba(255,255,255,.35);letter-spacing:.12em;text-transform:uppercase">by Analytics Grade</p>
                      </td>
                    </tr>
                  </table>
                </td>
                <td align="right" style="vertical-align:middle" class="mobile-hide">
                  <p style="margin:0;font-size:11px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.06em;text-transform:uppercase"><%= typeof isNewsletter !== 'undefined' && isNewsletter ? 'Newsletter' : 'System Message' %></p>
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <!-- HERO -->
        <tr>
          <td style="background-color:#0b1f3a;padding:0">
            <div style="height:3px;background:linear-gradient(90deg,#8065f8,#13b3b4,#4490d3)"></div>
            <div style="padding:44px 40px 40px;background:linear-gradient(160deg,#0b1f3a 0%,#0e1c30 60%,#081424 100%)" class="mobile-hero-padding">
              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:16px">
                <tr>
                  <td style="background:rgba(128,101,248,.2);border:1px solid rgba(128,101,248,.35);border-radius:99px;padding:4px 12px">
                    <p style="margin:0;font-size:11px;font-weight:700;color:#c4b5fd;letter-spacing:.05em">&#10022; <%= typeof isNewsletter !== 'undefined' && isNewsletter ? 'NEWSLETTER' : 'NOTIFICATION' %></p>
                  </td>
                </tr>
              </table>
              <h1 class="mobile-font-hero" style="margin:0;font-size:28px;font-weight:800;color:#ffffff;line-height:1.25;letter-spacing:-.4px;max-width:480px">
                <%= typeof subject !== 'undefined' && subject ? subject : 'You have a new message' %>
              </h1>
            </div>
          </td>
        </tr>

        <!-- BODY -->
        <tr>
          <td style="background-color:#ffffff;padding:40px 32px" class="mobile-padding">

            <% if (typeof firstName !== 'undefined' && firstName) { %>
            <p style="margin:0 0 20px;font-size:18px;font-weight:700;color:#0b1f3a;letter-spacing:-.2px">Hi <%= firstName %>,</p>
            <% } else { %>
            <p style="margin:0 0 20px;font-size:18px;font-weight:700;color:#0b1f3a;letter-spacing:-.2px">Hello,</p>
            <% } %>

            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-radius:16px;overflow:hidden;border:1px solid #e8ecf0;background:#f8f9fb">
              <tr>
                <td style="width:4px;background:linear-gradient(180deg,#8065f8,#4490d3)"></td>
                <td style="padding:24px 28px">
                  <div style="margin:0;font-size:15px;color:#374151;line-height:1.7;white-space:pre-line"><%= typeof message !== 'undefined' ? message : '' %></div>
                </td>
              </tr>
            </table>

            <%
              const isNewsletterEmail = typeof isNewsletter !== 'undefined' && isNewsletter;
              const isVerificationEmail = !isNewsletterEmail && typeof subject !== 'undefined' && subject && /verification|code|confirm|confirmation/i.test(subject);
              let codeMatch = null;
              if (isVerificationEmail && typeof message === 'string') {
                codeMatch = message.match(/(?:code|Code|CODE)[\s:]*(\d{4,8})\b/i) ||
                            message.match(/(?:is|are)[\s:]*(\d{4,8})\b/i);
              }
              if (codeMatch && codeMatch[1]) {
            %>
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top:24px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#0b1f3a,#162d4e)">
              <tr>
                <td style="padding:28px 32px;text-align:center">
                  <p style="margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8065f8">Verification Code</p>
                  <p style="margin:0;font-size:36px;font-weight:800;color:#ffffff;letter-spacing:.25em;font-family:'Courier New',Courier,monospace"><%= codeMatch[1] %></p>
                  <p style="margin:12px 0 0;font-size:12px;color:rgba(255,255,255,.45);line-height:1.5">Enter this code to complete verification. It expires soon.</p>
                </td>
              </tr>
            </table>
            <% } %>

            <%
              const urlMatch = !isNewsletterEmail && typeof message === 'string' ? message.match(/https?:\/\/[^\s"<>]+/) : null;
              if (urlMatch) {
            %>
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top:28px">
              <tr>
                <td align="center">
                  <a href="<%= urlMatch[0] %>" style="background:linear-gradient(135deg,#8065f8,#4490d3);color:#ffffff;font-size:14px;font-weight:700;text-decoration:none;padding:14px 32px;border-radius:12px;display:inline-block">Verify Email &rarr;</a>
                </td>
              </tr>
            </table>
            <% } %>

          </td>
        </tr>

        <!-- SUPPORT NOTE -->
        <tr>
          <td style="background-color:#ffffff;padding:0 32px 40px" class="mobile-padding">
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background:#f0f4f8;border-radius:16px">
              <tr>
                <td style="padding:24px 28px;text-align:center">
                  <p style="margin:0;font-size:13px;color:#6b7280;line-height:1.6">
                    Questions? Reply to this email or contact
                    <a href="mailto:support@analyticsgrade.com" style="color:#8065f8;font-weight:600;text-decoration:none">support@analyticsgrade.com</a>
                  </p>
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <!-- FOOTER -->
        <tr>
          <td style="background-color:#0b1f3a;padding:32px" class="mobile-padding">
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:20px">
              <tr>
                <td>
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td style="vertical-align:middle">
                        <img src="/analytics-grade.png" alt="" width="32" height="32" style="height:32px;width:32px;display:block;filter:brightness(0) invert(1)" />
                      </td>
                      <td style="padding-left:10px;vertical-align:middle">
                        <p style="margin:0;font-size:14px;font-weight:700;color:#fff">Analytics Grade</p>
                        <p style="margin:0;font-size:9px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.1em">by Analytics Grade</p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>

            <div style="height:1px;background:rgba(255,255,255,.08);margin-bottom:20px"></div>

            <p style="margin:0 0 8px;font-size:11px;color:rgba(255,255,255,.25);line-height:1.6">
              Analytics Grade &middot; 703-1600 Hornby Street, Vancouver BC V6Z 2S4 &middot; Canada<br/>
              <a href="mailto:info@analyticsgrade.com" style="color:rgba(255,255,255,.35);text-decoration:none">info@analyticsgrade.com</a>
            </p>
            <% if (typeof unsubscribeUrl !== 'undefined' && unsubscribeUrl) { %>
            <p style="margin:0 0 12px;font-size:11px;color:rgba(255,255,255,.35);line-height:1.6">
              <a href="<%= unsubscribeUrl %>" style="color:rgba(255,255,255,.45);text-decoration:underline">Unsubscribe</a> from this newsletter.
            </p>
            <% } %>
            <p style="margin:0;font-size:11px;color:rgba(255,255,255,.2);line-height:1.6">
              <%= typeof isNewsletter !== 'undefined' && isNewsletter ? 'You received this because you subscribed to Analytics Grade updates.' : 'This is an automated message from Analytics Grade. Please do not reply unless you need support.' %>
            </p>
          </td>
        </tr>

        <tr>
          <td style="height:4px;background:linear-gradient(90deg,#8065f8,#13b3b4,#4490d3)"></td>
        </tr>

      </table>

      <% if (typeof unsubscribeUrl !== 'undefined' && unsubscribeUrl) { %>
      <p style="text-align:center;font-size:11px;color:#9ca3af;margin:12px 0 0;line-height:1.6">
        <a href="<%= unsubscribeUrl %>" style="color:#9ca3af;text-decoration:underline">Unsubscribe</a>
      </p>
      <% } %>
      <p style="text-align:center;font-size:11px;color:#9ca3af;margin:20px 0 0;line-height:1.6">
        &copy; <%= new Date().getFullYear() %> Analytics Grade. All rights reserved.
      </p>

    </td>
  </tr>
</table>

</body>
</html>
