@props([
    'title' => '',
    'subtitle' => null,
])

@php
    $siteName = siteUrlSettings('site_name') ?: config('app.name');
    $siteLogo = siteUrlSettings('site_logo');
    $siteIcon = siteUrlSettings('site_icon');
@endphp

<div class="auth">
    {{-- Brand rail (desktop) --}}
    <aside class="auth__brand">
        <a href="{{ url('/') }}" class="auth__logo">
            @if ($siteLogo)
                <img src="{{ site_image($siteLogo) }}" alt="{{ $siteName }}">
            @else
                @if ($siteIcon)
                    <img src="{{ site_image($siteIcon) }}" alt="">
                @endif
                <span>{{ $siteName }}</span>
            @endif
        </a>

        <div class="auth__pitch">
            <h1>{{ __('Run your network, not your spreadsheets.') }}</h1>
            <p>{{ __('Billing, customer management and MikroTik automation in one place — with M-Pesa payments that reconcile themselves.') }}</p>

            <ul class="auth__points">
                <li>
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 111.4-1.4l3.3 3.29 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>
                    {{ __('Automated PPPoE and hotspot provisioning') }}
                </li>
                <li>
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 111.4-1.4l3.3 3.29 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>
                    {{ __('Instant M-Pesa STK Push collections') }}
                </li>
                <li>
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 111.4-1.4l3.3 3.29 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>
                    {{ __('Tenant portals with their own wallets') }}
                </li>
                <li>
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 111.4-1.4l3.3 3.29 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>
                    {{ __('Live traffic, usage and revenue reporting') }}
                </li>
            </ul>
        </div>

        <p class="auth__brand-foot">&copy; {{ date('Y') }} {{ $siteName }}. {{ __('All rights reserved.') }}</p>
    </aside>

    {{-- Form side --}}
    <main class="auth__main">
        <div class="auth__panel">
            {{-- Compact brand lockup for small screens --}}
            <a href="{{ url('/') }}" class="auth__mobile-brand">
                @if ($siteLogo)
                    <img src="{{ site_image($siteLogo) }}" alt="{{ $siteName }}">
                @else
                    @if ($siteIcon)
                        <img src="{{ site_image($siteIcon) }}" alt="">
                    @endif
                    <span>{{ $siteName }}</span>
                @endif
            </a>

            <div class="auth__heading">
                <h2>{{ $title }}</h2>
                @if ($subtitle)
                    <p>{{ $subtitle }}</p>
                @endif
            </div>

            <x-auth-errors />

            {{-- Sentinel statuses are rendered by the page itself with proper wording --}}
            @if (session('status') && session('status') !== 'verification-link-sent')
                <div class="alert alert--success" style="margin-bottom: 18px;">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.7-9.3a1 1 0 00-1.4-1.4L9 10.58 7.7 9.3a1 1 0 00-1.4 1.4l2 2a1 1 0 001.4 0z" clip-rule="evenodd"/></svg>
                    <div>{{ session('status') }}</div>
                </div>
            @endif

            {{ $slot }}
        </div>
    </main>
</div>