<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Secure Password Reset | Email template</title>
    <meta
      name="description"
      content="Modern and secure password reset email with enhanced visual design and clear call-to-action."
    />
    <!--[if mso]>
      <style type="text/css">
        body,
        table,
        td {
          font-family: "Segoe UI", Arial, sans-serif !important;
        }
      </style>
    <![endif]-->
  </head>
  <body
    style="
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      background-color: #667eea;
    "
  >
<center>
    <!-- Preheader (hidden) -->
    <div
      style="
        display: none;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        mso-hide: all;
      "
    >
      🔐 Secure password reset requested. Click to set your new password safely.
      Expires in 60 minutes.
    </div>

    <table
      role="presentation"
      cellpadding="0"
      cellspacing="0"
      border="0"
      width="100%"
      style="
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-color: #667eea;
        min-height: 100vh;
      "
      bgcolor="#667eea"
    >
      <tr>
        <td align="center" style="padding: 40px 16px">
          <!-- Container -->
          <table
            role="presentation"
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="600"
            style="
              width: 100%;
              max-width: 600px;
              background: #ffffff;
              border-radius: 20px;
              overflow: hidden;
              box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            "
          >
            <!-- Header with gradient -->
            <tr>
              <td
                style="
                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                  background-color: #667eea;
                  padding: 40px 40px 60px 40px;
                  text-align: center;
                "
                bgcolor="#667eea"
              >
                <img
                  src="https://nirajrajgor.github.io/email-templates/acme_white.png"
                  alt="Company Logo"
                  width="120"
                  height="45"
                  style="
                    display: block;
                    height: auto;
                    border: 0;
                    outline: none;
                    text-decoration: none;
                    margin: 0 auto 30px auto;
                  "
                />
                <!-- Security Badge -->
                <div
                  style="
                    display: inline-block;
                    background: rgba(255, 255, 255, 0.15);
                    border-radius: 50px;
                    padding: 20px;
                    margin-bottom: 20px;
                  "
                >
                  <div
                    style="
                      width: 60px;
                      height: 60px;
                      background: rgba(255, 255, 255, 0.2);
                      border-radius: 50%;
                      display: inline-block;
                      line-height: 60px;
                      text-align: center;
                      font-size: 30px;
                    "
                  >
                    🔐
                  </div>
                </div>
                <h1
                  style="
                    margin: 0 0 16px 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 36px;
                    line-height: 1.2;
                    color: #ffffff;
                    font-weight: 700;
                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                  "
                >
                  Secure Password Reset
                </h1>
                <p
                  style="
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 18px;
                    color: rgba(255, 255, 255, 0.9);
                    line-height: 1.5;
                  "
                >
                  Your account security is our priority
                </p>
              </td>
            </tr>

            <!-- Main Content -->
            <tr>
              <td style="padding: 40px 40px 0 40px; text-align: center">
                <p
                  style="
                    margin: 0 0 20px 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 20px;
                    color: #1f2937;
                    font-weight: 600;
                  "
                >
                  Hi [Name],
                </p>
                <p
                  style="
                    margin: 0 0 32px 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 16px;
                    color: #4b5563;
                    line-height: 1.6;
                  "
                >
                  We received a request to reset your password. Click the button
                  below to create a new password.<br />
                  <span style="color: #9ca3af; font-size: 14px"
                    >This link expires in 60 minutes.</span
                  >
                </p>
              </td>
            </tr>

            <!-- CTA Button -->
            <tr>
              <td style="padding: 0 40px; text-align: center">
                <!-- Modern gradient button with shadow -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  style="margin: 0 auto"
                >
                  <tr>
                    <td
                      align="center"
                      style="
                        background: linear-gradient(
                          135deg,
                          #667eea 0%,
                          #764ba2 100%
                        );
                        background-color: #667eea;
                        border-radius: 50px;
                        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
                      "
                      bgcolor="#667eea"
                    >
                      <!--[if mso]>
                        <v:roundrect
                          xmlns:v="urn:schemas-microsoft-com:vml"
                          xmlns:w="urn:schemas-microsoft-com:office:word"
                          href="#"
                          style="
                            height: 56px;
                            v-text-anchor: middle;
                            width: 340px;
                          "
                          arcsize="50%"
                          strokecolor="#667eea"
                          fillcolor="#667eea"
                        >
                          <w:anchorlock />
                          <center
                            style="
                              color: #ffffff;
                              font-family: Segoe UI, Arial, sans-serif;
                              font-size: 18px;
                              font-weight: 600;
                              letter-spacing: 0.5px;
                              text-transform: uppercase;
                            "
                          >
                            🔐 Reset My Password
                          </center>
                        </v:roundrect>
                      <![endif]-->
                      <!--[if !mso]> -->
                      <a
                        href="#"
                        target="_blank"
                        style="
                          display: inline-block;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 18px;
                          color: #ffffff;
                          text-decoration: none;
                          padding: 20px 50px;
                          border-radius: 50px;
                          font-weight: 600;
                          letter-spacing: 0.5px;
                          text-transform: uppercase;
                        "
                        >🔐 Reset My Password</a
                      >
                      <!--<![endif]-->
                    </td>
                  </tr>
                </table>

                <!-- Fallback link - simplified -->
                <p
                  style="
                    margin: 24px 0 0 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 13px;
                    color: #9ca3af;
                  "
                >
                  Button not working?
                  <a
                    href="#"
                    target="_blank"
                    style="color: #667eea; text-decoration: underline"
                    >Use this direct link</a
                  >
                </p>
              </td>
            </tr>

            <!-- Simple security note -->
            <tr>
              <td style="padding: 32px 40px 0 40px; text-align: center">
                <p
                  style="
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 14px;
                    line-height: 1.5;
                    color: #6b7280;
                  "
                >
                  Didn't request this? Safely ignore this email or
                  <a
                    href="#"
                    target="_blank"
                    style="color: #667eea; text-decoration: underline"
                    >contact support</a
                  >.
                </p>
              </td>
            </tr>

            <!-- Simple Footer -->
            <tr>
              <td style="padding: 40px 40px 40px 40px; text-align: center">
                <div style="border-top: 1px solid #e5e7eb; padding-top: 24px">
                  <p
                    style="
                      margin: 0;
                      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, Arial, sans-serif;
                      font-size: 12px;
                      line-height: 1.5;
                      color: #9ca3af;
                    "
                  >
                    © 2025 Acme Inc. |
                    <a
                      href="#"
                      target="_blank"
                      style="color: #667eea; text-decoration: none"
                      >Contact Support</a
                    >
                  </p>
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
</center>
  </body>
</html>
