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

<h2 style="margin:0 0 16px 0;font-size:20px;font-weight:600;color:#ffffff;">
    👋 Welcome to {{ $appName }}, {{ $name }}
</h2>

<p style="margin:0 0 16px 0;">
    <strong style="color:#1cc0d6;">{{ $invitedBy }}</strong> has added you as a
    <strong style="color:#ffffff;">{{ ucfirst($role) }}</strong> on the HostSeba NOC dashboard.
</p>

<p style="margin:0 0 24px 0;color:#b8c2cf;">
    Set your password and finish setting up your account by clicking the button below.
    This link is valid for the next 24 hours.
</p>

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

<div style="background:#0a0d12;border:1px solid #1f2733;border-radius:4px;padding:14px 16px;font-size:12px;color:#9aa5b1;margin:20px 0;">
    <div style="font-weight:600;color:#e6edf3;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px;font-size:10px;">Your account</div>
    <div style="font-family:monospace;">
        Email: <span style="color:#1cc0d6;">{{ $email }}</span><br>
        Role: <span style="color:#e6edf3;">{{ ucfirst($role) }}</span>
    </div>
</div>

<p style="margin:24px 0 0 0;font-size:11px;color:#6b7785;line-height:1.5;">
    Once you're in, head to <strong style="color:#9aa5b1;">Settings → Security</strong> to enable two-factor
    authentication. We strongly recommend it for all accounts that have admin access.
</p>

<p style="margin:16px 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;">{{ $setupUrl }}</span>
</p>

@endcomponent
