<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ __('mail.send_code.subject') }}</title>
</head>

<body style="margin:0;padding:0;background:#f4f4f7;font-family:Arial,Helvetica,sans-serif;">

  <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f4f4f7">
    <tr>
      <td align="center" style="padding:30px 15px;">

        <!-- CONTAINER -->
        <table width="650" cellpadding="0" cellspacing="0" border="0"
          style="background:#ffffff;border-radius:24px;overflow:hidden;">

          <!-- HEADER -->
          <tr>
            <td
              style="background:linear-gradient(135deg,#4f1fd6,#7b2cff);padding:50px 40px;">

              <table width="100%">

                <tr>

                  <!-- LEFT -->
                  <td valign="middle">

                    <div
                      style="font-size:56px;font-weight:800;line-height:1.1;color:#ffffff;">

                      {{ __('mail.send_code.title') }}

                    </div>

                    <div
                      style="font-size:22px;line-height:1.6;color:#e8dbff;margin-top:22px;">

                      {{ __('mail.send_code.body_intro') }}

                    </div>

                  </td>

                  <!-- RIGHT -->
                  <td width="240" align="right" valign="middle">

                    <img
                      src="https://i.imgur.com/8Km9tLL.png"
                      width="220"
                      alt="Diarinho"
                      style="display:block;border:0;"
                    >

                  </td>

                </tr>

              </table>

            </td>
          </tr>

          <!-- CONTENT -->
          <tr>
            <td style="padding:35px;background:#f5f5f7;">

              <!-- CARD -->
              <table width="100%" cellpadding="0" cellspacing="0" border="0"
                style="background:#ffffff;border-radius:24px;padding:35px;">

                <!-- GREETING -->
                <tr>
                  <td>

                    @if (!empty($recipientName))

                    <div
                      style="font-size:42px;font-weight:700;color:#1f1f1f;line-height:1.3;">

                      {{ __('mail.send_code.greeting', ['name' => $recipientName]) }}

                    </div>

                    @else

                    <div
                      style="font-size:42px;font-weight:700;color:#1f1f1f;line-height:1.3;">

                      {{ __('mail.send_code.greeting_anonymous') }}

                    </div>

                    @endif

                  </td>
                </tr>

                <!-- TEXT -->
                <tr>
                  <td
                    style="padding-top:25px;font-size:22px;line-height:1.8;color:#555555;">

                    {{ __('mail.send_code.code_instruction') }}

                  </td>
                </tr>

                <!-- CODE BOX -->
                <tr>
                  <td align="center" style="padding-top:35px;">

                    <table cellpadding="0" cellspacing="0" border="0"
                      style="background:#f5efff;border-radius:24px;padding:35px 40px;width:100%;">

                      <tr>

                        <td align="center">

                          <div
                            style="font-size:82px;font-weight:800;letter-spacing:18px;color:#5a22d6;">

                            {{ $code }}

                          </div>

                        </td>

                      </tr>

                    </table>

                  </td>
                </tr>

                <!-- EXPIRATION -->
                <tr>
                  <td align="center"
                    style="padding-top:30px;font-size:18px;color:#666666;line-height:1.7;">

                    ⏰ {{ __('mail.send_code.expiry_notice') }}

                  </td>
                </tr>

                <!-- ALERT -->
                <tr>
                  <td style="padding-top:30px;">

                    <table width="100%"
                      style="background:#fff8e7;border-radius:18px;padding:22px;">

                      <tr>

                        <td
                          style="font-size:18px;color:#9c6a00;line-height:1.7;">

                          ⚠️ {{ __('mail.send_code.ignore_notice') }}

                        </td>

                      </tr>

                    </table>

                  </td>
                </tr>

              </table>

              <!-- FOOTER CARD -->
              <table width="100%" cellpadding="0" cellspacing="0" border="0"
                style="background:#f3ecff;border-radius:24px;padding:25px;margin-top:25px;">

                <tr>

                  <!-- IMAGE -->
                  <td width="140" valign="middle">

                    <img
                      src="https://i.imgur.com/7uX7N4F.png"
                      width="120"
                      alt="Diarinho"
                      style="display:block;border:0;"
                    >

                  </td>

                  <!-- TEXT -->
                  <td valign="middle">

                    <div
                      style="font-size:34px;font-weight:700;color:#5a22d6;">

                      {{ __('mail.send_code.footer_title') }}

                    </div>

                    <div
                      style="font-size:20px;line-height:1.7;color:#666666;margin-top:10px;">

                      {{ __('mail.send_code.footer_description') }}

                    </div>

                  </td>

                </tr>

              </table>

            </td>
          </tr>

          <!-- FOOTER -->
          <tr>
            <td
              style="background:linear-gradient(135deg,#4f1fd6,#7b2cff);padding:35px 30px;">

              <table width="100%">

                <tr>

                  <!-- BRAND -->
                  <td valign="top">

                    <div
                      style="font-size:34px;font-weight:800;color:#6de0ff;">

                      diariaapp

                    </div>

                  </td>

                  <!-- CONTACT -->
                  <td align="right"
                    style="font-size:18px;color:#ffffff;line-height:1.8;">

                    {{ __('mail.send_code.footer_help') }}<br>

                    {{ __('mail.send_code.footer_contact') }}<br>

                    (11) 99999-9999

                  </td>

                </tr>

              </table>

              <!-- BOTTOM -->
              <div
                style="margin-top:28px;text-align:center;font-size:14px;color:#d6c5ff;line-height:1.7;">

                © {{ date('Y') }} Diaria App<br>

                {{ __('mail.send_code.footer_note') }}

              </div>

            </td>
          </tr>

        </table>

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

</body>

</html>