{{-- Centered card for customer sign-in and registration screens, inside the public site chrome. --}}
@props(['title', 'heading', 'intro' => null, 'wide' => false])
<x-layouts.cms :title="$title" :noindex="true">
    <section class="relative overflow-hidden bg-gradient-to-b from-brand-50/70 via-slate-50 to-slate-50 px-4 py-10 sm:py-16">
        <div class="pointer-events-none absolute -top-24 left-1/2 h-72 w-[40rem] -translate-x-1/2 rounded-full bg-brand-200/40 blur-3xl" aria-hidden="true"></div>
        <div @class(['relative mx-auto rounded-2xl border border-slate-200/80 bg-white p-6 shadow-xl shadow-slate-900/5 sm:p-8', 'max-w-xl' => $wide, 'max-w-md' => ! $wide])>
            <h1 class="text-2xl font-bold tracking-tight text-slate-900">{{ $heading }}</h1>
            @if ($intro)
                <p class="mt-2 text-sm leading-relaxed text-slate-600">{{ $intro }}</p>
            @endif
            @if (session('status'))
                <div class="mt-5 flex items-start gap-2.5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900" role="status">
                    <x-ui.icon name="check" class="mt-0.5 h-4 w-4 text-emerald-600" /> <span>{{ session('status') }}</span>
                </div>
            @endif
            <div class="mt-6">{{ $slot }}</div>
        </div>
        @isset($footer)
            <div class="relative mx-auto mt-5 max-w-md text-center text-sm text-slate-600">{{ $footer }}</div>
        @endisset
    </section>
</x-layouts.cms>