@php
    $livewire ??= null;
@endphp

<x-filament-panels::layout.base :livewire="$livewire">
    <style>
        /* Override body background */
        body.fi-body {
            background: transparent !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .login-container {
            min-height: 100vh;
            display: flex;
            flex-direction: row;
            width: 100%;
        }

        .login-left {
            width: 50%;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            padding: 2rem;
        }

        .dark .login-left {
            background: #111827;
        }

        .login-right {
            width: 50%;
            min-height: 100vh;
            background: linear-gradient(160deg, #4dd0e1 0%, #00bcd4 25%, #0097a7 50%, #00838f 75%, #006064 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .login-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            padding: 3rem;
            width: 100%;
            max-width: 400px;
        }

        .dark .login-card {
            background: #1f2937;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }

        .bubble {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            animation: float 6s ease-in-out infinite;
        }

        .bubble:nth-child(2) { animation-delay: 1s; }
        .bubble:nth-child(3) { animation-delay: 2s; }
        .bubble:nth-child(4) { animation-delay: 3s; }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .glass-card {
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 16px;
        }

        @media (max-width: 1024px) {
            .login-right { display: none; }
            .login-left { width: 100%; }
        }

        /* Filament form styling overrides */
        .login-card .fi-fo-field-wrp {
            margin-bottom: 1rem;
        }

        .login-card input {
            border-radius: 10px !important;
        }

        /* Dark mode text colors */
        .login-heading {
            color: #1f2937;
        }
        .dark .login-heading {
            color: #f9fafb;
        }

        .login-subheading {
            color: #6b7280;
        }
        .dark .login-subheading {
            color: #9ca3af;
        }

        .login-footer {
            color: #9ca3af;
            border-top-color: #e5e7eb;
        }
        .dark .login-footer {
            color: #6b7280;
            border-top-color: #374151;
        }

        .lang-switcher {
            background: #f3f4f6;
            color: #374151;
        }
        .lang-switcher:hover {
            background: #e5e7eb;
        }
        .dark .lang-switcher {
            background: #374151;
            color: #e5e7eb;
        }
        .dark .lang-switcher:hover {
            background: #4b5563;
        }
    </style>

    <div class="login-container">
        {{-- Left Side - Login Form --}}
        <div class="login-left">
            <div class="login-card">
                {{ $slot }}
            </div>
        </div>

        {{-- Right Side - Brand Panel --}}
        <div class="login-right">
            {{-- Decorative Bubbles --}}
            <div class="bubble" style="width: 120px; height: 120px; top: 8%; left: 8%;"></div>
            <div class="bubble" style="width: 180px; height: 180px; bottom: 12%; right: 8%;"></div>
            <div class="bubble" style="width: 80px; height: 80px; top: 35%; right: 3%;"></div>
            <div class="bubble" style="width: 50px; height: 50px; bottom: 35%; left: 15%;"></div>
            <div class="bubble" style="width: 70px; height: 70px; top: 60%; left: 5%;"></div>
            <div class="bubble" style="width: 100px; height: 100px; top: 20%; right: 20%;"></div>

            {{-- Content --}}
            <div style="position: relative; z-index: 10; text-align: center; color: white; padding: 2rem; width: 100%; max-width: 500px;">
                {{-- Logo from Settings --}}
                @php
                    $logoUrl = \App\Models\Setting::getLogoUrl();
                    $appName = \App\Models\Setting::getAppName();
                @endphp
                <div style="margin-bottom: 1.5rem;">
                    @if($logoUrl)
                        <div style="background: rgba(255,255,255,0.95); border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; border: 1px solid rgba(255,255,255,0.3); padding: 12px;">
                            <img src="{{ $logoUrl }}" alt="{{ $appName }}" style="width: auto; height: auto; max-width: 140px; max-height: 100px;">
                        </div>
                    @else
                        <div style="width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto; border: 1px solid rgba(255,255,255,0.3);">
                            <svg xmlns="http://www.w3.org/2000/svg" style="width: 48px; height: 48px;" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z"/>
                            </svg>
                        </div>
                    @endif
                </div>

                {{-- Brand Name --}}
                <h2 style="font-size: 1.75rem; font-weight: bold; margin-bottom: 0.25rem;">
                    {{ $appName }}
                </h2>
                <p style="color: rgba(255,255,255,0.7); font-size: 0.875rem; margin-bottom: 1.5rem;">
                    {{ __('auth.login.brand_slogan') }}
                </p>

                {{-- Platform Card --}}
                <div class="glass-card" style="padding: 1.25rem; margin-bottom: 1.5rem; text-align: start;">
                    <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
                        <span style="font-weight: 600;">{{ __('auth.login.platform_name') }}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" style="width: 20px; height: 20px; color: #4dd0e1;" viewBox="0 0 24 24" fill="currentColor">
                            <path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <p style="color: rgba(255,255,255,0.7); font-size: 0.875rem;">
                        {{ __('auth.login.platform_description') }}
                    </p>
                </div>

                {{-- Welcome --}}
                <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem;">
                    {{ __('auth.login.welcome_title') }}
                </h3>
                <p style="color: rgba(255,255,255,0.6); font-size: 0.875rem; margin-bottom: 2rem;">
                    {{ __('auth.login.welcome_description') }}
                </p>

                {{-- Feature Cards --}}
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="glass-card" style="padding: 1rem; text-align: center;">
                        <div style="width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" style="width: 20px; height: 20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                        </div>
                        <h4 style="font-weight: 600; font-size: 0.875rem;">{{ __('auth.login.feature_reports') }}</h4>
                        <p style="color: rgba(255,255,255,0.5); font-size: 0.75rem; margin-top: 0.25rem;">{{ __('auth.login.feature_reports_desc') }}</p>
                    </div>

                    <div class="glass-card" style="padding: 1rem; text-align: center;">
                        <div style="width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" style="width: 20px; height: 20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
                            </svg>
                        </div>
                        <h4 style="font-weight: 600; font-size: 0.875rem;">{{ __('auth.login.feature_systems') }}</h4>
                        <p style="color: rgba(255,255,255,0.5); font-size: 0.75rem; margin-top: 0.25rem;">{{ __('auth.login.feature_systems_desc') }}</p>
                    </div>

                    <div class="glass-card" style="padding: 1rem; text-align: center;">
                        <div style="width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" style="width: 20px; height: 20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </div>
                        <h4 style="font-weight: 600; font-size: 0.875rem;">{{ __('auth.login.feature_quality') }}</h4>
                        <p style="color: rgba(255,255,255,0.5); font-size: 0.75rem; margin-top: 0.25rem;">{{ __('auth.login.feature_quality_desc') }}</p>
                    </div>

                    <div class="glass-card" style="padding: 1rem; text-align: center;">
                        <div style="width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" style="width: 20px; height: 20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                            </svg>
                        </div>
                        <h4 style="font-weight: 600; font-size: 0.875rem;">{{ __('auth.login.feature_analytics') }}</h4>
                        <p style="color: rgba(255,255,255,0.5); font-size: 0.75rem; margin-top: 0.25rem;">{{ __('auth.login.feature_analytics_desc') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-filament-panels::layout.base>