<div
  style="
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    background: #0d1220;
    padding: 40px;
    border-radius: 16px;
    color: #ffffff;
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    overflow: hidden;
  "
>
  <!-- background -->
  <img
    src="https://seven365-storage.sgp1.cdn.digitaloceanspaces.com/seven365-public/images/email-background.png?quality=lossless"
    alt=""
    style="
      position: absolute;
      top: 0;
      right: 0;
      width: 320px;
      opacity: 0.9;
      z-index: 0;
    "
  />

  <div style="position: relative; z-index: 1">
    <!-- LOGO -->
    <div style="margin-bottom: 30px">
      <img
        src="https://seven365-storage.sgp1.cdn.digitaloceanspaces.com/seven365-public/images/seven365-logo.png"
        alt="Seven365 Logo"
        style="height: 52px"
      />
    </div>

    <!-- TITLE -->
    <div style="margin-bottom: 28px">
      <h2
        style="
          margin: 0;
          font-size: 34px;
          line-height: 1.3;
          font-weight: 600;
          color: #ffffff;
        "
      >
        You're Invited to Join Seven365
      </h2>
    </div>

    <!-- CONTENT -->
    <div
      style="
        font-size: 16px;
        line-height: 1.9;
        color: #e6e6e6;
      "
    >
      <p style="margin-top: 0">
        <strong>Hi {{email}},</strong>
      </p>

      <p>
        Good day!
      </p>

      <p>
        We're excited to invite you to join our platform and get started with
        managing your organization more efficiently.
      </p>

      <p>
        As part of this invitation, your organization has been pre-approved by
        our Super Admin. To begin, simply click the link below and complete your
        sign-up:
      </p>

      <!-- APP LIST -->
      <div style="margin: 28px 0">
        <p style="margin-bottom: 14px">
          Your organization has access to the following Seven365 Applications:
        </p>

        <ul
          style="
            padding-left: 20px;
            margin: 0;
            line-height: 2;
          "
        >
          {{#if hasPropertyManagement}}
          <li>
            Property Management (iMA365)
          </li>
          {{/if}}

          {{#if hasSecurity}}
          <li>
            Security (iSecurity365)
          </li>
          {{/if}}

          {{#if hasCleaning}}
          <li>
            Cleaning (iHygiene365)
          </li>
          {{/if}}

          {{#if hasMechanical}}
          <li>
            Mechanical and Electrical (iM&E365)
          </li>
          {{/if}}

          {{#if hasLandscape}}
          <li>
            Landscape (iGarden365)
          </li>
          {{/if}}

          {{#if hasPestControl}}
          <li>
            Pest Control (iPest365)
          </li>
          {{/if}}

          {{#if hasPoolMaintenance}}
          <li>
            Pool Maintenance (iPool365)
          </li>
          {{/if}}
        </ul>
      </div>
    </div>

    <!-- BUTTON -->
    <div style="margin: 36px 0">
      <a
        href="{{link}}"
        target="_blank"
        style="
          background: #ef3b2d;
          color: #ffffff;
          text-decoration: none;
          padding: 14px 60px;
          border-radius: 8px;
          display: inline-block;
          font-size: 16px;
          font-weight: 600;
        "
      >
        Sign Up
      </a>
    </div>

    <!-- EXTRA -->
    <div
      style="
        font-size: 15px;
        line-height: 1.9;
        color: #e6e6e6;
      "
    >
      <p>
        Once you register using your invited email address, you will
        automatically be linked to your organization—no need to wait for
        approval.
      </p>

      <p>
        What you can do after signing up:
      </p>

      <ul
        style="
          padding-left: 20px;
          line-height: 2;
        "
      >
        <li>Set up your organization details</li>
        <li>Create and manage sites/properties</li>
        <li>Assign roles and permissions</li>
        <li>Invite your team members</li>
      </ul>

      <p>
        If you have any questions or need assistance during setup, feel free to
        reach out to us anytime.
      </p>

      <p>
        We look forward to having you onboard!
      </p>

      <p style="margin-top: 32px">
        Best regards,<br />
        Seven365 Team
      </p>
    </div>

    <!-- SOCIAL -->
    <div style="margin-top: 36px">
      <a
        href="https://www.linkedin.com/company/seven365-pte-ltd/"
        style="text-decoration: none"
      >
        <img
          src="https://seven365-storage.sgp1.cdn.digitaloceanspaces.com/seven365-public/images/linkedin-icon.png"
          alt="LinkedIn"
          style="cursor: pointer"
        />
      </a>
    </div>

    <!-- FOOTER -->
    <div
      style="
        margin-top: 40px;
        background: #2f3442;
        padding: 18px;
        border-radius: 8px;
        text-align: center;
        font-size: 13px;
        color: #f1f1f1;
      "
    >
      You're receiving this email because you are a subscriber of Seven365.
    </div>
  </div>
</div>