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

<h2 style="margin:0 0 16px 0;font-size:20px;font-weight:600;color:#ffffff;">
    🛡️ Two-factor authentication is now active
</h2>

<p style="margin:0 0 16px 0;">
    Hi {{ $name }}, two-factor authentication has just been enabled on your <strong style="color:#1cc0d6;">{{ $appName }}</strong> account.
    From now on, you'll need a code from your authenticator app to log in.
</p>

<div style="background:#0a1a14;border:1px solid #1f4d35;border-radius:4px;padding:16px;margin:20px 0;">
    <div style="font-size:11px;font-weight:600;color:#10b981;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">
        🔑 Recovery codes — save these somewhere safe
    </div>
    <p style="margin:0 0 12px 0;color:#b8c2cf;font-size:12px;">
        If you ever lose access to your authenticator app (lost phone, etc.), you can use one of these
        codes <em>once</em> to sign in. Each code only works one time.
    </p>
    <table cellpadding="0" cellspacing="0" border="0" style="width:100%;font-family:monospace;font-size:13px;">
        @foreach (array_chunk($recoveryCodes, 2) as $row)
            <tr>
                @foreach ($row as $code)
                    <td style="padding:4px 0;color:#1cc0d6;letter-spacing:1px;">{{ $code }}</td>
                @endforeach
            </tr>
        @endforeach
    </table>
</div>

<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 enable 2FA yourself?</strong><br>
    Someone may have access to your account. Reset your password immediately and contact your administrator.
</div>

<p style="margin:24px 0 0 0;font-size:11px;color:#6b7785;line-height:1.5;">
    Tip: store recovery codes in a password manager (1Password, Bitwarden) or print them out
    and keep them somewhere physically secure. Don't email them to yourself or save them in plaintext on your computer.
</p>

@endcomponent
