@php $brand = app(\App\Domain\Shared\Services\BrandingService::class)->forCurrentAcademy(); @endphp
<!DOCTYPE html>
<html dir="rtl" lang="{{ app()->getLocale() }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="{{ $brand->themeColor }}">
    <title>{{ __('تفعيل الحساب') }} — {{ $brand->academyName }}</title>
    <link href="https://fonts.googleapis.com/css2?family={{ urlencode($brand->fontAr) }}:wght@400;600;700;800&display=swap" rel="stylesheet">
    @vite(['resources/css/portal.css'])
    <style>:root { {!! $brand->cssVariableBlock() !!} --portal-surface:#fff; --portal-border:#e5e7eb; --portal-ink:#111827; --portal-muted:#6b7280; }
           body { background:#f8fafc; color: var(--portal-ink); font-family: var(--brand-font-ar), sans-serif; }</style>
</head>
<body class="grid min-h-dvh place-items-center px-6 py-10">
    <main class="w-full max-w-sm">
        <div class="mb-6 text-center">
            @if($brand->logoUrl)
                <img src="{{ $brand->logoUrl }}" alt="{{ $brand->academyName }}" class="mx-auto h-14 object-contain">
            @endif
            <h1 class="mt-3 text-lg font-extrabold">{{ __('تفعيل حسابك') }}</h1>
            @if($personName)
                <p class="mt-1 text-sm" style="color: var(--portal-muted);">{{ $personName }}</p>
            @endif
        </div>

        <form method="POST" action="{{ route('portal.activate.store', $token) }}"
              class="portal-card space-y-4 px-5 py-6" style="background:#fff;">
            @csrf

            @if($errors->any())
                <div class="rounded-xl px-3 py-2 text-xs"
                     style="background: color-mix(in oklab, var(--brand-danger) 12%, #fff); color: var(--brand-danger);">
                    {{ $errors->first() }}
                </div>
            @endif

            <div>
                <label for="password" class="block text-xs font-semibold">{{ __('كلمة المرور') }}</label>
                <input id="password" name="password" type="password" required minlength="8" autocomplete="new-password"
                       class="mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                       style="border-color: var(--portal-border);">
                <p class="mt-1 text-[11px]" style="color: var(--portal-muted);">{{ __('٨ أحرف على الأقل') }}</p>
            </div>

            <div>
                <label for="password_confirmation" class="block text-xs font-semibold">{{ __('تأكيد كلمة المرور') }}</label>
                <input id="password_confirmation" name="password_confirmation" type="password" required autocomplete="new-password"
                       class="mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                       style="border-color: var(--portal-border);">
            </div>

            @if($needsEmail)
                <div>
                    <label for="email" class="block text-xs font-semibold">
                        {{ __('البريد الإلكتروني') }}
                        <span class="font-normal" style="color: var(--portal-muted);">— {{ __('اختياري') }}</span>
                    </label>
                    <input id="email" name="email" type="email" dir="ltr" autocomplete="email"
                           class="mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                           style="border-color: var(--portal-border);">
                    <p class="mt-1 text-[11px]" style="color: var(--portal-muted);">
                        {{ __('يمكنك تسجيل الدخول برقم الهاتف أيضاً') }}
                    </p>
                </div>
            @endif

            <button type="submit" class="w-full rounded-xl px-4 py-3 text-sm font-bold"
                    style="background: var(--brand-500); color: var(--brand-fg);">
                {{ __('تفعيل ودخول') }}
            </button>
        </form>
    </main>
</body>
</html>
