@php
    $brand = app(\App\Domain\Shared\Services\BrandingService::class)->forCurrentAcademy();
    $locale = app()->getLocale();
    $dir = in_array($locale, ['ar', 'he', 'fa', 'ur'], true) ? 'rtl' : 'ltr';
@endphp
<!DOCTYPE html>
<html dir="{{ $dir }}" lang="{{ $locale }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="theme-color" content="{{ $brand->themeColor }}">
    {{-- A public signup page has no business in a search index: it names the
         academy and invites strangers who did not come from the academy. --}}
    <meta name="robots" content="noindex, nofollow">
    <title>{{ $title ?? __('إنشاء حساب') }} — {{ $brand->academyName }}</title>
    @if($brand->faviconUrl)<link rel="icon" href="{{ $brand->faviconUrl }}">@endif
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family={{ urlencode($brand->fontAr) }}:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    @vite(['resources/css/portal.css', 'resources/js/portal.js'])
    @livewireStyles
    <style>
        :root {
{!! $brand->cssVariableBlock() !!}
            --portal-bg: oklch(0.985 0.002 265);
            --portal-surface: #ffffff;
            --portal-border: oklch(0.92 0.004 265);
            --portal-ink: oklch(0.22 0.02 265);
            --portal-muted: oklch(0.55 0.015 265);
            --portal-link: var(--brand-link);
            --portal-success-ink: var(--brand-success-ink);
            --portal-warning-ink: var(--brand-warning-ink);
            --portal-danger-ink: var(--brand-danger-ink);
        }
        html, body { background: var(--portal-bg); color: var(--portal-ink); }
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="min-h-full antialiased">
<div class="mx-auto flex min-h-dvh max-w-lg flex-col px-4 py-8">
    <header class="mb-6 text-center">
        @if($brand->logoUrl)
            <img src="{{ $brand->logoUrl }}" alt="{{ $brand->academyName }}" class="portal-logo mx-auto !h-16 !max-w-[13rem]">
        @endif
        <h1 class="mt-3 text-lg font-extrabold">{{ $brand->academyName }}</h1>
    </header>

    <main class="flex-1">
        @if(session('error'))
            <div class="portal-card mb-4 p-3 text-sm"
                 style="background: color-mix(in oklab, var(--brand-danger) 12%, var(--portal-surface));
                        border-color: color-mix(in oklab, var(--brand-danger) 35%, var(--portal-surface));">
                {{ session('error') }}
            </div>
        @endif
        {{ $slot }}
    </main>

    <footer class="mt-6 text-center">
        <a href="{{ route('login') }}" class="text-xs font-semibold" style="color: var(--portal-link);">
            {{ __('لديك حساب بالفعل؟ سجّل الدخول') }}
        </a>
    </footer>
</div>
@livewireScripts
</body>
</html>
