<!DOCTYPE html>
<html lang="pt" 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">
  <title>Recuperação de Palavra-Passe — Portal do Investidor</title>
  <!--[if mso]>
  <noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript>
  <![endif]-->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { margin: 0; padding: 0; background-color: #eef2ee; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
    table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
    a { text-decoration: none; }
    .btn-hover:hover { background-color: #00803a !important; transform: translateY(-1px); }
  </style>
</head>
<body style="margin:0;padding:0;background-color:#eef2ee;">

  <!-- Preheader (hidden, shows in inbox preview) -->
  <div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
    Clique no link para redefinir a sua palavra-passe. Válido por 60 minutos. &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
  </div>

  <!-- Outer wrapper -->
  <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#eef2ee;padding:40px 16px;">
    <tr>
      <td align="center">

        <!-- Container -->
        <table width="600" cellpadding="0" cellspacing="0" role="presentation" style="max-width:600px;width:100%;">

          <!-- ══ HEADER ══════════════════════════════════════════════════════════ -->
          <tr>
            <td style="border-radius:16px 16px 0 0;overflow:hidden;background-color:#052e16;background-image:radial-gradient(ellipse at 90% 0%, rgba(0,154,68,0.40) 0%, transparent 55%), radial-gradient(ellipse at 5% 100%, rgba(0,80,40,0.35) 0%, transparent 50%);padding:36px 40px 32px;">

              <!-- Logo area -->
              <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
                <tr>
                  <td>
                    <table cellpadding="0" cellspacing="0" role="presentation">
                      <tr>
                        <td style="vertical-align:middle;padding-right:14px;line-height:0;">
                          <img src="https://dintell.co.mz/emblema.png" width="48" height="48" alt="Emblema da República de Moçambique" style="display:block;border:0;border-radius:6px;" />
                        </td>
                        <td style="vertical-align:middle;">
                          <div style="font-family:'Inter',-apple-system,sans-serif;font-size:17px;font-weight:800;color:#ffffff;letter-spacing:-0.3px;line-height:1.2;">Portal do Investidor</div>
                          <div style="font-family:'Inter',-apple-system,sans-serif;font-size:11px;font-weight:500;color:rgba(255,255,255,0.45);letter-spacing:0.6px;text-transform:uppercase;margin-top:2px;">GCRPE · República de Moçambique</div>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>

              <!-- Divider -->
              <div style="height:1px;background:linear-gradient(to right, rgba(255,255,255,0.08), rgba(255,255,255,0.18), rgba(255,255,255,0.04));margin:24px 0 20px;"></div>

              <!-- Header headline -->
              <div style="font-family:'Inter',-apple-system,sans-serif;font-size:11px;font-weight:700;color:rgba(74,222,128,0.90);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;">Segurança da Conta</div>
              <h1 style="font-family:'Inter',-apple-system,sans-serif;font-size:26px;font-weight:800;color:#ffffff;line-height:1.25;letter-spacing:-0.5px;margin:0;">Recuperar<br>Palavra-Passe</h1>

            </td>
          </tr>

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

              <!-- Greeting -->
              <p style="font-family:'Inter',-apple-system,sans-serif;font-size:15px;font-weight:400;color:#374151;line-height:1.65;margin:0 0 20px;">
                Olá, <strong style="font-weight:700;color:#111827;">{{ $user->name }}</strong>,
              </p>

              <!-- Body text -->
              <p style="font-family:'Inter',-apple-system,sans-serif;font-size:15px;font-weight:400;color:#4b5563;line-height:1.7;margin:0 0 32px;">
                Recebemos um pedido de recuperação da palavra-passe associada à sua conta no <strong style="color:#111827;font-weight:600;">Portal do Investidor</strong>. Clique no botão abaixo para definir uma nova palavra-passe.
              </p>

              <!-- CTA Button -->
              <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin-bottom:32px;">
                <tr>
                  <td align="center">
                    <!--[if mso]>
                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $resetUrl }}" style="height:52px;v-text-anchor:middle;width:280px;" arcsize="15%" fillcolor="#009A44">
                      <w:anchorlock/>
                      <center style="color:#ffffff;font-family:sans-serif;font-size:15px;font-weight:700;">Redefinir Palavra-Passe</center>
                    </v:roundrect>
                    <![endif]-->
                    <!--[if !mso]><!-->
                    <a href="{{ $resetUrl }}" class="btn-hover" style="display:inline-block;background-color:#009A44;color:#ffffff;font-family:'Inter',-apple-system,sans-serif;font-size:15px;font-weight:700;text-decoration:none;padding:15px 40px;border-radius:12px;letter-spacing:-0.1px;transition:all 0.2s ease;box-shadow:0 4px 14px rgba(0,154,68,0.35);">
                      Redefinir Palavra-Passe &rarr;
                    </a>
                    <!--<![endif]-->
                  </td>
                </tr>
              </table>

              <!-- Divider -->
              <div style="height:1px;background-color:#f0f0f0;margin-bottom:28px;"></div>

              <!-- Info notes -->
              <table width="100%" cellpadding="0" cellspacing="0" role="presentation">

                <!-- Expiry note -->
                <tr>
                  <td style="padding-bottom:14px;">
                    <table cellpadding="0" cellspacing="0" role="presentation">
                      <tr>
                        <td style="vertical-align:top;padding-top:1px;">
                          <div style="width:32px;height:32px;background-color:#fff7ed;border:1px solid #fed7aa;border-radius:8px;text-align:center;line-height:0;padding-top:8px;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <circle cx="12" cy="12" r="9" stroke="#d97706" stroke-width="1.5"/>
                              <path d="M12 7v5l3 3" stroke="#d97706" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                          </div>
                        </td>
                        <td style="padding-left:12px;vertical-align:middle;">
                          <p style="font-family:'Inter',-apple-system,sans-serif;font-size:13px;font-weight:600;color:#92400e;margin:0 0 2px;">Link válido por 60 minutos</p>
                          <p style="font-family:'Inter',-apple-system,sans-serif;font-size:12px;color:#b45309;margin:0;line-height:1.5;">Após esse período, terá de solicitar um novo link de recuperação.</p>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>

                <!-- Security note -->
                <tr>
                  <td>
                    <table cellpadding="0" cellspacing="0" role="presentation">
                      <tr>
                        <td style="vertical-align:top;padding-top:1px;">
                          <div style="width:32px;height:32px;background-color:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;text-align:center;line-height:0;padding-top:8px;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <rect x="5" y="11" width="14" height="10" rx="2" stroke="#16a34a" stroke-width="1.5"/>
                              <path d="M8 11V7a4 4 0 0 1 8 0v4" stroke="#16a34a" stroke-width="1.5" stroke-linecap="round"/>
                              <circle cx="12" cy="16" r="1.25" fill="#16a34a"/>
                            </svg>
                          </div>
                        </td>
                        <td style="padding-left:12px;vertical-align:middle;">
                          <p style="font-family:'Inter',-apple-system,sans-serif;font-size:13px;font-weight:600;color:#166534;margin:0 0 2px;">Não solicitou esta acção?</p>
                          <p style="font-family:'Inter',-apple-system,sans-serif;font-size:12px;color:#15803d;margin:0;line-height:1.5;">Ignore este email em segurança. A sua palavra-passe permanece inalterada.</p>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>

              </table>

            </td>
          </tr>

          <!-- ══ FALLBACK URL ════════════════════════════════════════════════════ -->
          <tr>
            <td style="background-color:#f8fafc;border-top:1px solid #e5e7eb;padding:20px 40px;">
              <p style="font-family:'Inter',-apple-system,sans-serif;font-size:11px;color:#9ca3af;margin:0 0 8px;text-transform:uppercase;letter-spacing:0.8px;font-weight:600;">Se o botão não funcionar, copie e cole o link abaixo:</p>
              <p style="font-family:'Courier New',Courier,monospace;font-size:11px;color:#6b7280;word-break:break-all;line-height:1.6;margin:0;background-color:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:10px 12px;">{{ $resetUrl }}</p>
            </td>
          </tr>

          <!-- ══ FOOTER ══════════════════════════════════════════════════════════ -->
          <tr>
            <td style="background-color:#f1f5f1;border-radius:0 0 16px 16px;padding:24px 40px;" align="center">
              <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
                <tr>
                  <td align="center" style="padding-bottom:12px;">
                    <img src="https://dintell.co.mz/emblema.png" width="32" height="32" alt="GCRPE" style="display:inline-block;border:0;border-radius:4px;opacity:0.7;" />
                  </td>
                </tr>
                <tr>
                  <td align="center">
                    <p style="font-family:'Inter',-apple-system,sans-serif;font-size:11.5px;color:#9ca3af;line-height:1.6;margin:0;">
                      &copy; {{ date('Y') }} Portal do Investidor &middot; GCRPE<br>
                      <span style="color:#d1d5db;">Presidência da República de Moçambique</span>
                    </p>
                    <p style="font-family:'Inter',-apple-system,sans-serif;font-size:10.5px;color:#d1d5db;margin:10px 0 0;line-height:1.5;">
                      Este é um email automático. Por favor, não responda.<br>
                      Enviado para <strong style="color:#9ca3af;">{{ $user->email }}</strong>
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Bottom spacing -->
          <tr><td style="height:32px;"></td></tr>

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

</body>
</html>
