@component('emails.layout', ['appName' => $appName])

<h2 style="margin:0 0 16px 0;font-size:20px;font-weight:600;color:#ffffff;">
    🔐 Password reset request
</h2>

<p style="margin:0 0 16px 0;">
    Hi {{ $name }}, we got a request to reset the password for your <strong style="color:#1cc0d6;">{{ $appName }}</strong> account.
</p>

<p style="margin:0 0 24px 0;color:#b8c2cf;">
    Click the button below to choose a new one. This link expires in
    <strong style="color:#ffffff;">{{ $expiresIn }} minutes</strong>.
</p>

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:24px auto;">
    <tr>
        <td>
            <a href="{{ $resetUrl }}" style="display:inline-block;background:#1cc0d6;color:#0a0d12;text-decoration:none;padding:12px 28px;border-radius:4px;font-weight:600;font-size:14px;">
                Reset password →
            </a>
        </td>
    </tr>
</table>

<div style="background:#1a1212;border:1px solid #4d1f1f;border-radius:4px;padding:14px 16px;font-size:12px;color:#e57373;margin:20px 0;">
    <strong style="color:#ff6b6b;">⚠️ Didn't request this?</strong><br>
    If you didn't ask for a password reset, ignore this email. Your password stays unchanged.
    Consider enabling two-factor authentication for extra security.
</div>

<p style="margin:24px 0 0 0;font-size:11px;color:#6b7785;">
    Trouble with the button? Copy this URL into your browser:<br>
    <span style="font-family:monospace;color:#9aa5b1;word-break:break-all;">{{ $resetUrl }}</span>
</p>

@endcomponent
