<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="UTF-8">
<title>{{ __('portal.invitation.title_accept') }} — {{ $company }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #f5f7fa; color: #1a202c; margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.card { background: white; padding: 32px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); max-width: 420px; width: 100%; }
h1 { font-size: 22px; margin: 0 0 8px; }
.sub { color: #4a5568; font-size: 14px; margin-bottom: 24px; }
label { display: block; font-size: 12px; font-weight: 600; color: #718096; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
input { width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 15px; box-sizing: border-box; outline: none; }
input:focus { border-color: #3b82f6; }
.field { margin-bottom: 16px; }
.field.readonly input { background: #f7fafc; color: #718096; }
.btn { width: 100%; padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.btn:hover { background: #2563eb; }
.errors { background: #fee2e2; color: #991b1b; padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
</style>
</head>
<body>
<div class="card">
    <div style="display:flex;justify-content:flex-end;margin-bottom:12px;">
        @include('partials.lang-switcher', ['style' => 'light'])
    </div>
    <h1>{{ __('portal.invitation.welcome_name', ['name' => $name]) }}</h1>
    <p class="sub">{!! __('portal.invitation.welcome_body', ['company' => '<strong>' . e($company) . '</strong>']) !!}</p>

    @if ($errors->any())
        <div class="errors">
            @foreach ($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
    @endif

    <form method="POST" action="{{ url('/invitations/' . $token) }}">
        @csrf
        <div class="field readonly">
            <label>{{ __('portal.common.email') }}</label>
            <input type="email" value="{{ $email }}" readonly>
        </div>
        <div class="field">
            <label>{{ __('portal.invitation.new_password') }}</label>
            <input type="password" name="password" required minlength="8" autofocus>
        </div>
        <div class="field">
            <label>{{ __('portal.invitation.confirm_password') }}</label>
            <input type="password" name="password_confirmation" required minlength="8">
        </div>
        <button class="btn" type="submit">{{ __('portal.invitation.activate_account') }}</button>
    </form>
</div>
</body>
</html>
