@props(['title' => null, 'heading' => null, 'sub' => null, 'wide' => false])

<!DOCTYPE html>
<html lang="pt-BR" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ? $title.' · ' : '' }}{{ $site->nome() }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <x-marca.head />
</head>
{{-- O Alpine vem no bundle do Livewire. A injeção automática só acontece em
     páginas que renderizam algum componente, então declaramos explicitamente. --}}
<body class="h-full bg-white">
<div class="flex min-h-full">

    {{-- Coluna do formulário --}}
    <div class="flex w-full flex-col justify-center px-6 py-10 sm:px-12 lg:w-[55%] lg:px-16 xl:px-24">
        <div class="mx-auto w-full {{ $wide ? 'max-w-2xl' : 'max-w-sm' }}">
            <a href="{{ route('home') }}" class="mb-10 inline-flex items-center gap-3">
                <x-marca.logo classe="h-9 max-w-[11rem]" />
                <span class="text-base font-semibold text-slate-900">{{ $site->nome() }}</span>
            </a>

            @if ($heading)
                <h1 class="text-2xl font-semibold tracking-tight text-slate-900">{{ $heading }}</h1>
            @endif
            @if ($sub)
                <p class="mt-2 text-sm text-slate-500">{{ $sub }}</p>
            @endif

            <div class="mt-8">
                @if (session('status'))
                    <div class="mb-5 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
                        {{ session('status') }}
                    </div>
                @endif

                {{ $slot }}
            </div>

            <x-marca.creditos classe="mt-10 text-xs text-slate-400" />
        </div>
    </div>

    {{-- Painel institucional --}}
    <div class="relative hidden overflow-hidden bg-brand-950 lg:block lg:w-[45%]">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_15%,rgba(69,140,153,0.35),transparent_55%)]"></div>
        <div class="absolute inset-0 opacity-[0.07]"
             style="background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);background-size:44px 44px"></div>

        <div class="relative flex h-full flex-col justify-between p-12 xl:p-16">
            <div>
                <p class="text-xs font-semibold tracking-[0.2em] text-brand-400 uppercase">
                    {{ $site->get('site_descricao') ?: 'NFeDistribuicaoDFe' }}
                </p>
                <h2 class="mt-5 text-3xl leading-snug font-semibold text-white xl:text-4xl">
                    {{ $site->get('login_titulo') }}
                </h2>
                @if ($site->get('login_subtitulo'))
                    <p class="mt-5 max-w-md text-brand-200">{{ $site->get('login_subtitulo') }}</p>
                @endif
            </div>

            <ul class="space-y-4 text-sm text-brand-100">
                @foreach ($site->linhas('login_destaques') as $item)
                    <li class="flex items-start gap-3">
                        <svg class="mt-0.5 size-4 shrink-0 text-brand-400" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                        </svg>
                        {{ $item }}
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>

@livewireScripts
</body>
</html>
