<!doctype html>
<html lang="id" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="x-apple-disable-message-reformatting">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Reset Kata Sandi</title>

    <!-- mobile tweaks -->
    <style type="text/css">
        /* Reset dasar email */
        html,
        body {
            margin: 0 !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }

        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        img {
            -ms-interpolation-mode: bicubic;
            border: 0;
            outline: none;
            text-decoration: none;
        }

        a {
            text-decoration: none;
        }

        /* Dark mode hint */
        @media (prefers-color-scheme: dark) {
            .bg {
                background: #0b0f14 !important;
            }

            .card {
                background: #141a22 !important;
            }

            .text {
                color: #e5e7eb !important;
            }

            .muted {
                color: #9ca3af !important;
            }

            .btn {
                color: #ffffff !important;
            }
        }

        /* Mobile */
        @media screen and (max-width:600px) {
            .container {
                width: 100% !important;
            }

            .px {
                padding-left: 20px !important;
                padding-right: 20px !important;
            }

            .py {
                padding-top: 20px !important;
                padding-bottom: 20px !important;
            }

            .logo img {
                max-width: 140px !important;
                height: auto !important;
            }
        }
    </style>
</head>

<body style="background: {{ $brand['bg'] }}; margin:0; padding:0;" class="bg">

    <!-- Preheader (tersembunyi) -->
    <div
        style="display:none; font-size:1px; color:#fff; line-height:1px; max-height:0; max-width:0; opacity:0; overflow:hidden;">
        Permintaan reset kata sandi untuk akun {{ $appName }}.
    </div>

    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td align="center" style="padding: 24px;">
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
                    class="container">

                    <!-- Header -->
                    <tr>
                        <td align="center" style="padding: 16px 24px;">
                            <a href="{{ config('app.url') }}" class="logo">
                                <img src="{{ $logoSrc }}" alt="SidakDesa" width="120" style="display:block;">
                            </a>
                        </td>

                    </tr>

                    <!-- Card -->
                    <tr>
                        <td style="background: {{ $brand['card'] }}; border-radius:12px; padding: 24px;"
                            class="card px py">
                            <!-- Title -->
                            <h1 style="margin:0 0 12px; font-size:22px; line-height:1.25; color: {{ $brand['text'] }};"
                                class="text">
                                Reset Kata Sandi
                            </h1>

                            <!-- Greeting -->
                            <p style="margin:0 0 12px; font-size:16px; color: {{ $brand['text'] }};" class="text">
                                Halo <strong>{{ $userName ?: 'Pengguna' }}</strong>,
                            </p>

                            <!-- Copy -->
                            <p style="margin:0 0 16px; font-size:15px; color: {{ $brand['text'] }};" class="text">
                                Kami menerima permintaan untuk mereset kata sandi akun Anda di
                                <strong>{{ $appName }}</strong>.
                                Klik tombol di bawah untuk melanjutkan.
                            </p>

                            <!-- Bulletproof Button (dengan VML utk Outlook) -->
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center"
                                style="margin: 12px auto 20px;">
                                <tr>
                                    <td align="center" bgcolor="{{ $brand['primary'] }}" style="border-radius:10px;">
                                        <!--[if mso]>
                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                      href="{{ $url }}" style="height:44px;v-text-anchor:middle;width:220px;" arcsize="14%" stroke="f" fillcolor="{{ $brand['primary'] }}">
                      <w:anchorlock/>
                      <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">
                        Reset Kata Sandi
                      </center>
                    </v:roundrect>
                    <![endif]-->
                                        <![if !mso]>
                                        <a href="{{ $url }}"
                                            style="display:inline-block; padding:12px 22px; font-size:16px; font-weight:700; color:#ffffff; background:{{ $brand['primary'] }}; border-radius:10px;">
                                            Reset Kata Sandi
                                        </a>
                                        <![endif]>
                                    </td>
                                </tr>
                            </table>

                            <!-- Info expire -->
                            <p style="margin:0 0 12px; font-size:14px; color: {{ $brand['muted'] }};" class="muted">
                                Link reset akan <strong>kedaluwarsa dalam {{ $expires }} menit</strong>.
                            </p>

                            <!-- If not requested -->
                            <p style="margin:0 0 16px; font-size:14px; color: {{ $brand['muted'] }};" class="muted">
                                Jika Anda tidak merasa melakukan permintaan ini, abaikan email ini — akun Anda tetap
                                aman.
                            </p>

                            <!-- Subcopy: raw URL -->
                            <p style="margin:0; font-size:13px; color: {{ $brand['muted'] }};" class="muted">
                                Jika tombol tidak berfungsi, salin dan tempel URL berikut ke peramban Anda:<br>
                                <a href="{{ $url }}"
                                    style="color: {{ $brand['primary'] }}; word-break: break-all;">{{ $url }}</a>
                            </p>
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td align="center" style="padding: 16px 24px;">
                            <p style="margin:0 0 4px; font-size:13px; color: {{ $brand['muted'] }};" class="muted">
                                Salam, <strong>{{ $appName }}</strong>
                            </p>
                            <p style="margin:0; font-size:12px; color: {{ $brand['muted'] }};" class="muted">
                                &copy; {{ date('Y') }} {{ $appName }}. All rights reserved.
                            </p>
                        </td>
                    </tr>

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

</html>
