<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ $textDirection ?? 'ltr' }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @php
        $__sn = \App\Helpers\BrandingHelper::name();
        $__fav = \App\Models\SystemSetting::get('favicon');
        $__logoL = \App\Models\SystemSetting::get('logo_light');
        $__logoD = \App\Models\SystemSetting::get('logo_dark');
    @endphp
    <title>{{ $title ?? $__sn }} — {{ $__sn }}</title>

    {{-- SEO meta — admin-controlled at /admin/cms → Global SEO Defaults.
         Login / register / forgot-password screens use this layout, so a
         search engine indexing those pages picks up the admin's chosen
         description. Title uses the page-level $title prop when set
         (e.g. "Sign in") so it stays specific to the screen. --}}
    @php
        $__seoDesc = \App\Models\SystemSetting::get('seo_default_description', '');
        $__seoOg   = \App\Models\SystemSetting::get('seo_og_image', '');
    @endphp
    @if($__seoDesc)
        <meta name="description" content="{{ $__seoDesc }}">
        <meta property="og:description" content="{{ $__seoDesc }}">
        <meta name="twitter:description" content="{{ $__seoDesc }}">
    @endif
    <meta property="og:title" content="{{ $title ?? $__sn }} — {{ $__sn }}">
    <meta name="twitter:title" content="{{ $title ?? $__sn }} — {{ $__sn }}">
    @if($__seoOg)
        <meta property="og:image" content="{{ $__seoOg }}">
        <meta name="twitter:image" content="{{ $__seoOg }}">
        <meta name="twitter:card" content="summary_large_image">
    @endif

    {{-- Favicon --}}
    @if($__fav)
    <link rel="icon" href="{{ asset('storage/' . $__fav) }}" type="image/png">
    <link rel="apple-touch-icon" href="{{ asset('storage/' . $__fav) }}">
    @else
    <link rel="icon" href="{{ asset('favicon.ico') }}" sizes="any">
    <link rel="icon" href="{{ asset('favicon.svg') }}" type="image/svg+xml">
    <link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">
    @endif

    {{-- PWA (conditional) --}}
    @php $__pwa = \App\Models\SystemSetting::get('pwa_enabled', 'false') === 'true'; @endphp
    @if($__pwa)
    <link rel="manifest" href="{{ route('pwa.manifest') }}">
    <meta name="theme-color" content="{{ \App\Models\SystemSetting::get('pwa_theme_color', '#6366f1') }}">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="{{ \App\Models\SystemSetting::get('pwa_app_name', $__sn) }}">
    @endif

    {{-- Body font (admin-configurable via Settings → General → Body Font) --}}
    {!! \App\Helpers\FontHelper::renderHead() !!}
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    <script>
        (function() {
            const savedTheme = localStorage.getItem('theme') || 'dark';
            document.documentElement.classList.toggle('dark', savedTheme === 'dark');
            document.documentElement.setAttribute('data-theme', savedTheme);
        })();
    </script>
    {{-- Theme Studio runtime CSS variables (loads on login/register too) --}}
    {!! \App\Helpers\ThemeHelper::renderCss() !!}
    {!! \App\Models\SystemSetting::get('head_code', '') !!}
</head>
<body class="h-full bg-surface text-ink antialiased font-sans">
<noscript>
    <div style="padding: 2rem; text-align: center; font-family: 'Outfit', system-ui, sans-serif; background: #F8F9FC; min-height: 100vh; display: flex; align-items: center; justify-content: center;">
        <div>
            <h1 style="font-size: 1.5rem; font-weight: 700; color: #1E293B; margin-bottom: 0.5rem;">{{ __('JavaScript Required') }}</h1>
            <p style="color: #9CA3AF; font-size: 0.875rem;">{{ __('This application requires JavaScript to function. Please enable JavaScript in your browser settings.') }}</p>
        </div>
    </div>
</noscript>
    @if($wide ?? false)
    {{-- Wide layout (onboarding wizard) --}}
    <div class="min-h-screen flex flex-col">
        {{-- Top bar --}}
        <div class="border-b border-border/50 bg-surface-2/80 backdrop-blur-md">
            <div class="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
                <a href="{{ url('/') }}" class="flex items-center">
                    @if($__logoL || $__logoD)
                        <img src="{{ asset('storage/' . $__logoL ?: $__logoD) }}" alt="{{ $__sn }}" class="h-9 w-auto object-contain dark:hidden" onerror="this.style.display='none';this.closest('a').querySelector('.brand-logo').style.display='';">
                        <img src="{{ asset('storage/' . $__logoD ?: $__logoL) }}" alt="{{ $__sn }}" class="h-9 w-auto object-contain hidden dark:block" onerror="this.style.display='none';">
                    @endif
                    <span class="brand-logo text-xl tracking-tight" @if($__logoL || $__logoD) style="display:none" @endif>{{ $__sn }}</span>
                </a>
                <div class="flex items-center gap-3">
                    <x-language-switcher />
                    @auth
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="text-sm text-muted hover:text-ink font-medium transition-colors">
                            {{ __('Sign Out') }}
                        </button>
                    </form>
                    @else
                    <a href="{{ url('/login') }}" class="text-sm text-muted hover:text-ink font-medium transition-colors">
                        {{ __('Log in') }}
                    </a>
                    @endauth
                </div>
            </div>
        </div>

        {{-- Content --}}
        <div class="flex-1 flex items-start justify-center p-6 sm:p-10">
            <div class="w-full max-w-5xl">
                {{ $slot }}
            </div>
        </div>

        {{-- Legal footer --}}
        <div class="text-center text-xs text-muted py-4 border-t border-border/40">
            <a href="{{ route('legal.terms') }}" class="hover:text-ink transition-colors">{{ __('Terms') }}</a>
            <span class="mx-1">&middot;</span>
            <a href="{{ route('legal.privacy') }}" class="hover:text-ink transition-colors">{{ __('Privacy') }}</a>
            <span class="mx-1">&middot;</span>
            <a href="{{ route('legal.refund') }}" class="hover:text-ink transition-colors">{{ __('Refund Policy') }}</a>
        </div>
    </div>
    @else
    {{-- Standard split layout (auth pages) --}}
    <div class="min-h-screen flex">
        {{-- Left: Branding Panel --}}
        <div class="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-brand via-brand-strong to-accent relative overflow-hidden">
            <div class="absolute inset-0 opacity-10">
                <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="0.5"/>
                        </pattern>
                    </defs>
                    <rect width="100%" height="100%" fill="url(#grid)" />
                </svg>
            </div>
            <div class="relative z-10 flex flex-col justify-between p-12 text-white w-full">
                <div>
                    <a href="{{ url('/') }}" class="flex items-center">
                        @if($__logoD)
                            <img src="{{ asset('storage/' . $__logoD) }}" alt="{{ $__sn }}" class="h-10 w-auto object-contain" onerror="this.style.display='none';this.closest('a').querySelector('.brand-logo').style.display='';">
                        @endif
                        <span class="brand-logo text-2xl tracking-tight [-webkit-text-fill-color:white]!" @if($__logoD) style="display:none" @endif>{{ $__sn }}</span>
                    </a>
                </div>
                <div class="space-y-6">
                    <h1 class="text-4xl font-bold leading-tight">{{ __('Your AI Communication Brain') }}</h1>
                    <p class="text-lg text-white/80 leading-relaxed">
                        {{ __('Automate email replies, manage multi-channel conversations, and scale your business communication with AI that actually knows your business.') }}
                    </p>
                </div>
                <div class="mt-8">
                    <p class="text-lg text-white/90 font-medium leading-relaxed">"{{ __('AI-powered communication automation for modern teams.') }}"</p>
                    <p class="text-white/60 text-sm mt-3">{{ __('Trusted by growing businesses worldwide') }}</p>
                </div>
            </div>
        </div>

        {{-- Right: Form Panel --}}
        <div class="relative w-full lg:w-1/2 flex items-center justify-center p-6 sm:px-12 sm:py-8 bg-surface-2 overflow-y-auto">
            {{-- Desktop language switcher — was previously only rendered
                 inside the `lg:hidden` mobile header below, so desktop
                 visitors had no way to switch language on auth pages.
                 Absolutely positioned in the top-right of the form panel
                 so it doesn't disrupt the centered form, and `hidden
                 lg:block` so it's the exact inverse of the mobile switcher
                 below — no duplicate at any viewport size. --}}
            <div class="hidden lg:block absolute top-6 right-6 z-10">
                <x-language-switcher />
            </div>

            <div class="w-full max-w-md">
                {{-- Mobile logo + language --}}
                <div class="lg:hidden mb-8 flex items-center justify-between">
                    <a href="{{ url('/') }}" class="flex items-center">
                        @if($__logoL || $__logoD)
                            <img src="{{ asset('storage/' . $__logoL ?: $__logoD) }}" alt="{{ $__sn }}" class="h-10 w-auto object-contain dark:hidden" onerror="this.style.display='none';this.closest('a').querySelector('.brand-logo').style.display='';">
                            <img src="{{ asset('storage/' . $__logoD ?: $__logoL) }}" alt="{{ $__sn }}" class="h-10 w-auto object-contain hidden dark:block" onerror="this.style.display='none';">
                        @endif
                        <span class="brand-logo text-xl tracking-tight" @if($__logoL || $__logoD) style="display:none" @endif>{{ $__sn }}</span>
                    </a>
                    <x-language-switcher />
                </div>

                {{ $slot }}

                {{-- Legal links below form --}}
                <div class="mt-8 text-center text-xs text-muted">
                    <a href="{{ route('legal.terms') }}" class="hover:text-ink transition-colors">{{ __('Terms') }}</a>
                    <span class="mx-1">&middot;</span>
                    <a href="{{ route('legal.privacy') }}" class="hover:text-ink transition-colors">{{ __('Privacy') }}</a>
                    <span class="mx-1">&middot;</span>
                    <a href="{{ route('legal.refund') }}" class="hover:text-ink transition-colors">{{ __('Refund Policy') }}</a>
                </div>
            </div>
        </div>
    </div>
    @endif

    @livewireScripts

    {{-- Cookie Consent --}}
    <x-cookie-consent />
    {!! \App\Models\SystemSetting::get('footer_code', '') !!}
</body>
</html>
