<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>{{title}}</title>
    <link
      href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'
      rel='stylesheet'
    />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
        background-color: #F8F9FA;
        font-family: 'Poppins', Arial, sans-serif;
      }

      .email-wrapper {
        padding: 32px 16px;
        background-color: #F8F9FA;
      }

      .email-container {
        max-width: 600px;
        margin: 0 auto;
        background-color: #FFFFFF;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(22, 36, 25, 0.08);
        color: #162419;
      }

      .logo-container {
        text-align: center;
        padding: 32px 32px 20px;
        background: linear-gradient(135deg, #E7EEE4 0%, #DCE6D7 100%);
        border-bottom: 1px solid #CFDDCA;
      }

      .logo-container img {
        max-width: 150px;
        width: auto;
        height: auto;
      }

      .content {
        font-size: 16px;
        line-height: 1.75;
        color: #162419;
        padding: 40px 32px;
      }

      .content h1,
      .content h2,
      .content h3 {
        color: #3A5A40;
        margin-top: 0;
      }

      .content p {
        margin: 0 0 16px 0;
      }

      .content a {
        color: #3A5A40;
        text-decoration: none;
        font-weight: 500;
      }

      .content a:hover {
        color: #162419;
        text-decoration: underline;
      }

      .button {
        display: inline-block;
        padding: 14px 32px;
        background-color: #3A5A40;
        color: #FFFFFF !important;
        text-decoration: none !important;
        border-radius: 8px;
        font-weight: 600;
        font-size: 15px;
        margin: 20px 0;
      }

      .button:hover {
        background-color: #162419;
      }

      .info-box {
        background-color: #EBEEEC;
        border-left: 4px solid #3A5A40;
        padding: 16px 20px;
        margin: 20px 0;
        border-radius: 4px;
      }

      .info-box strong {
        color: #3A5A40;
      }

      .footer {
        background: linear-gradient(180deg, #24391F 0%, #182A15 100%);
        padding: 32px 32px 28px;
        text-align: center;
      }

      .footer .social-row {
        margin-bottom: 20px;
      }

      .footer .social-circle {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.35);
        text-align: center;
        line-height: 32px;
        margin: 0 5px;
      }

      .footer-brand {
        font-size: 18px;
        color: #EAF0E7;
        margin: 0 0 12px 0;
        font-weight: 600;
      }

      .support-text {
        font-size: 12px;
        color: #B9C6B4;
        margin: 0 0 4px 0;
      }

      .support-link {
        color: #D7E4D2;
        text-decoration: underline;
        font-weight: 600;
      }

      .divider {
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin: 20px 0;
      }

      .copyright {
        font-size: 12px;
        color: #B9C6B4;
        margin: 0 0 4px 0;
      }

      @media (max-width: 520px) {
        .email-wrapper {
          padding: 16px 8px;
        }

        .content {
          padding: 24px 20px;
        }

        .button {
          padding: 12px 24px;
          font-size: 14px;
        }
      }
    </style>
  </head>
  <body>
    <div class='email-wrapper'>
      <div class='email-container'>
        <div class='logo-container'>
          <img src='cid:logo' alt='Spiriment' />
        </div>

        <div class='content'>
          {{{body}}}
        </div>

        <div class='footer'>
          <div class='social-row'>
            <a href='https://www.instagram.com/spiriment_/' class='social-circle' style='text-decoration:none;' title='Instagram'>
              <img src='{{iconInstagramSrc}}' width='18' height='18' alt='Instagram' style='vertical-align:middle; display:inline-block; border:0;' />
            </a>
            <a href='https://www.tiktok.com/@spiriment_' class='social-circle' style='text-decoration:none;' title='TikTok'>
              <img src='{{iconTiktokSrc}}' width='18' height='18' alt='TikTok' style='vertical-align:middle; display:inline-block; border:0;' />
            </a>
            <a href='https://x.com/spiriment_' class='social-circle' style='text-decoration:none;' title='X'>
              <img src='{{iconXSrc}}' width='18' height='18' alt='X' style='vertical-align:middle; display:inline-block; border:0;' />
            </a>
            <a href='https://www.linkedin.com/company/spiriment/' class='social-circle' style='text-decoration:none;' title='LinkedIn'>
              <img src='{{iconLinkedinSrc}}' width='18' height='18' alt='LinkedIn' style='vertical-align:middle; display:inline-block; border:0;' />
            </a>
          </div>
          <p class='footer-brand'>Spiriment</p>
          <p class='support-text'>Connect, Mentor, Grow</p>
          <p class='copyright'>© {{currentYear}} Spiriment. All rights reserved.</p>
          <hr class='divider' />
          <p class='support-text'>
            Need help? <a href='mailto:support@spiriment.com' class='support-link' style='color:#D7E4D2;'>support@spiriment.com</a>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>