@extends('emails.layouts.default-mail')

@section('content')

<table width="100%">
    <tr>
        <td class="email-px email-title-box" style="padding: 0 40px; background-color: rgba(255, 255, 255, 1)">
            @include('emails.components.subject-box', [
                'title' => "You've been invited!",
                'description' => 'Welcome to '.config('app.name').'. Your account is ready — set your password to get started.',
            ])
        </td>
    </tr>

    <tr>
        <td
            class="email-px email-text"
            align="left"
            style="padding: 28px 40px 32px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; color: #64748b;"
        >
            <p style="margin: 0 0 16px; font-size: 18px; font-weight: 600; line-height: 28px; color: #0f172a;">
                Hello [full-name]!
            </p>

            <p style="margin: 0 0 16px; font-size: 15px; line-height: 24px; color: #475569;">
                You've been invited to join <strong style="color: #0f172a;">{{ config('app.name') }}</strong>. Your account has been created
                and is ready to use. To set your password and activate your account, please click the button below.
            </p>

            <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin: 8px 0 24px;">
                <tr>
                    <td align="center">
                        @include('emails.components.button', [
                            'url'   => '[link]',
                            'label' => 'Set your password',
                        ])
                    </td>
                </tr>
            </table>

            @component('emails.components.info-box')
                @slot('title')
                    Your account details
                @endslot
                <strong style="color: #0f172a;">Email:</strong> [email]<br />
                <strong style="color: #0f172a;">Link expires in:</strong> [expiry]
            @endcomponent

            @component('emails.components.notice-box')
                <strong style="color: #78350f;">Link expired or didn't receive this email?</strong><br />
                Please contact your administrator to request a new invitation.
            @endcomponent

            <p style="margin: 24px 0 0; font-size: 15px; line-height: 24px; color: #475569;">
                If you did not expect this invitation, you can safely ignore this email.
            </p>

            <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin: 28px 0 0; border-top: 1px solid #e2e8f0;">
                <tr>
                    <td style="padding-top: 24px; font-size: 13px; line-height: 20px; color: #94a3b8; word-break: break-all;">
                        <p style="margin: 0 0 8px; font-weight: 500; color: #64748b;">
                            Button not working? Copy and paste this link into your browser:
                        </p>
                        <a href="[link]" style="color: #4f46e5; text-decoration: underline; font-weight: 500;">[link]</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
@endsection