@extends('emails.layout')

@section('content')
<tr>
  <td style="padding: 40px 30px;">
    <table width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td style="text-align: center; padding-bottom: 30px;">
          <div style="width: 80px; height: 80px; margin: 0 auto; background: linear-gradient(135deg, #E8530A 0%, #FF8C30 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
            </svg>
          </div>
        </td>
      </tr>
      <tr>
        <td style="font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 800; color: #0A1E38; text-align: center; padding-bottom: 15px;">
          Verify Your Account
        </td>
      </tr>
      <tr>
        <td style="font-family: 'DM Sans', sans-serif; font-size: 16px; color: #6A80A0; text-align: center; line-height: 1.6; padding-bottom: 30px;">
          Hi {{ $userName }},<br><br>
          We couldn't send the verification code via SMS, so we're sending it via email instead. Use the code below to verify your account:
        </td>
      </tr>
      <tr>
        <td style="text-align: center; padding: 30px 0;">
          <div style="display: inline-block; background: linear-gradient(135deg, rgba(232,83,10,0.1) 0%, rgba(255,140,48,0.1) 100%); border: 2px solid #E8530A; border-radius: 16px; padding: 20px 40px;">
            <div style="font-family: 'DM Mono', monospace; font-size: 42px; font-weight: 800; color: #E8530A; letter-spacing: 8px;">
              {{ $otpCode }}
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="font-family: 'DM Sans', sans-serif; font-size: 14px; color: #6A80A0; text-align: center; line-height: 1.6; padding-top: 20px;">
          This code will expire in <strong style="color: #E8530A;">10 minutes</strong>.
        </td>
      </tr>
      <tr>
        <td style="padding-top: 30px; border-top: 1px solid rgba(26,110,200,0.14); margin-top: 30px;">
          <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
              <td style="font-family: 'DM Sans', sans-serif; font-size: 13px; color: #7A8FA8; line-height: 1.6;">
                <strong style="color: #3A5068;">Security Tips:</strong><br>
                • Never share this code with anyone<br>
                • RMBXchange will never ask for your code via phone or email<br>
                • If you didn't request this code, please ignore this email
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
@endsection