@props([
    'headline' => '',
    'sub' => '',
    /** @var array<int, string> shown as a specification plate, not as a feature list */
    'facts' => [],
])

{{--
    The sign-in brand panel, shared by every guest page so they cannot drift
    apart. An ink plate rather than a colour gradient: the public site presents
    the product as a controlled document, and this is the same voice.

    Hidden below `lg` — on a phone the form is the page, and a decorative half
    would only push it under the fold.
--}}
<aside class="relative hidden w-[44%] shrink-0 overflow-hidden bg-plate lg:flex lg:flex-col lg:justify-between lg:p-12 xl:p-14">
    {{-- One warm glow, the same one the public site's dark bands carry. --}}
    <div aria-hidden="true" class="pointer-events-none absolute inset-0"
         style="background:radial-gradient(ellipse 52% 46% at 24% 18%,rgba(249,115,22,.20),transparent 68%);"></div>

    <div class="relative"><x-ui.brand size="lg" tone="white" /></div>

    <div class="relative">
        <p class="mb-7 inline-flex items-center gap-2 rounded-pill px-3.5 py-1.5 text-xs font-semibold"
           style="background:rgba(249,115,22,.16);color:#ffb27a">{{ __('auth.brand_eyebrow') }}</p>

        <h2 class="max-w-md text-4xl font-bold leading-[1.08] tracking-tight text-white xl:text-[2.9rem]">{{ $headline }}</h2>
        <p class="mt-5 max-w-sm leading-relaxed text-plate-text">{{ $sub }}</p>

        @if ($facts !== [])
            <dl class="mt-10 max-w-sm border-t border-plate-rule">
                @foreach ($facts as $term => $value)
                    <div class="flex items-baseline justify-between gap-6 border-b border-plate-rule py-3">
                        <dt class="text-sm text-plate-muted">{{ $term }}</dt>
                        <dd class="text-right text-sm font-medium text-white">{{ $value }}</dd>
                    </div>
                @endforeach
            </dl>
        @endif
    </div>

    <p class="relative text-xs text-plate-muted">{{ __('auth.brand_footer') }}</p>
</aside>