<!doctype html>
<html lang="bn">
@php
  /** @var \App\Models\GeneralSetting|null $gs */
  $gs = \App\Models\GeneralSetting::first();

  // Branding (fallbacks)
  $siteName   = $gs->site_name        ?: 'EARNING MARKETPLACE - DIGITAL BUSINESS PLATFORM';
  $brandName  = isset($app) && trim($app) !== '' ? $app : $siteName;

  // Theme colors (fallbacks)
  $bgColor    = $gs->background_color ?: '#f3f6f9';  // পেজ ব্যাকগ্রাউন্ড
  $textColor  = $gs->text_color       ?: '#0f172a';  // বডি টেক্সট
  $iconColor  = $gs->icon_color       ?: '#0B5D1E';  // প্রাইমারি
  $hoverColor = $gs->hover_color      ?: '#0F7A2E';  // সেকেন্ডারি

  // Pre-computed styles for email-safe inline usage
  $headerBg   = "linear-gradient(135deg, {$iconColor} 0%, {$hoverColor} 100%)";
  $accentDot  = "#e11d48"; // ছোট গোলাকার অ্যাকসেন্ট—চাইলে settings-এও নিতে পারেন
@endphp
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ $brandName }} — Password Reset OTP</title>

    <!-- ইনবক্স প্রিভিউ/প্রিহেডার -->
    <style>
      .preheader{display:none!important;visibility:hidden;opacity:0;color:transparent;height:0;width:0;overflow:hidden;mso-hide:all}
      @media (max-width:600px){ .container{width:100%!important} .px{padding-left:16px!important;padding-right:16px!important} }
    </style>
  </head>

  <body style="margin:0;background:{{ $bgColor }};">
    <!-- inbox preview text -->
    <div class="preheader">
      আপনার ৬-সংখ্যার OTP: {{ $code }} — ১০ মিনিটের জন্য বৈধ।
    </div>

    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:{{ $bgColor }};">
      <tr>
        <td align="center" style="padding:24px 12px;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="container" style="width:600px;max-width:600px;background:#ffffff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;">

            <!-- Header -->
            <tr>
              <td style="
                background:
                  radial-gradient(circle at 85% 35%, {{ $accentDot }} 0, {{ $accentDot }} 120px, transparent 121px),
                  {{ $headerBg }};
                padding:18px 20px; color:#ffffff; font-family:Arial,Helvetica,sans-serif;">
                <table role="presentation" width="100%">
                  <tr>
                    <td style="font-weight:800;font-size:18px;letter-spacing:.3px;">
                      {{ $brandName }} — Password Reset
                    </td>
                    <td align="right" style="font-size:12px;opacity:.9;">বাংলাদেশ</td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Body -->
            <tr>
              <td class="px" style="padding:20px 24px 10px;font-family:Arial,Helvetica,sans-serif;color:{{ $textColor }};">
                <p style="margin:0 0 8px;font-size:15px;">
                  হ্যালো {{ $user->name ?? 'User' }},
                </p>
                <p style="margin:0 0 14px;font-size:14px;line-height:1.6;">
                  আপনার পাসওয়ার্ড রিসেট করার জন্য ৬-সংখ্যার OTP নিচে দেওয়া হলো। এই কোডটি
                  <strong>একবারই</strong> ব্যবহারযোগ্য এবং <strong>১০ মিনিট</strong>ের মধ্যে মেয়াদ শেষ হয়ে যাবে।
                </p>

                <!-- OTP Card -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:6px 0 16px;">
                  <tr>
                    <td align="center" style="
                      background:#f8fafc;
                      border:2px dashed {{ $iconColor }};
                      border-radius:12px;
                      padding:14px 10px;">
                      <div style="font-size:30px;font-weight:900;letter-spacing:8px;color:{{ $iconColor }};font-family:Arial,Helvetica,sans-serif;">
                        {{ $code }}
                      </div>
                      <div style="font-size:12px;color:#64748b;margin-top:6px;">
                        কপি করে ভেরিফাই পাতায় পেস্ট করুন
                      </div>
                    </td>
                  </tr>
                </table>

                <!-- Tips -->
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;">
                  <tr>
                    <td style="padding:12px 14px;">
                      <div style="font-size:13px;color:{{ $textColor }};">
                        <strong style="color:{{ $iconColor }};">সিকিউরিটি টিপস:</strong>
                        <ul style="margin:8px 0 0 18px;padding:0;">
                          <li style="margin:4px 0">কাউকে কখনো OTP শেয়ার করবেন না।</li>
                          <li style="margin:4px 0">যদি আপনি এই অনুরোধ না করে থাকেন, অনুগ্রহ করে এই ইমেইল উপেক্ষা করুন।</li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                </table>

                <p style="margin:16px 0 6px;font-size:12px;color:#64748b;">
                  আপনার যদি সাহায্য দরকার হয়, এই ইমেইলে রিপ্লাই দিন।
                </p>
              </td>
            </tr>

            <!-- Footer -->
            <tr>
              <td style="padding:14px 20px;border-top:1px solid #e5e7eb;background:#ffffff;font-family:Arial,Helvetica,sans-serif;color:#6b7280;font-size:12px;">
                &copy; {{ date('Y') }} {{ $brandName }}. সর্বস্বত্ব সংরক্ষিত।
              </td>
            </tr>
          </table>

          <!-- tiny spacer shadow -->
          <div style="height:10px"></div>
        </td>
      </tr>
    </table>
  </body>
</html>