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

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <style>
            .login-grid {
                display: grid;
                grid-template-columns: 1fr;
                min-height: 100vh;
            }
            @media (min-width: 768px) {
                .login-grid {
                    grid-template-columns: 1fr 1fr;
                }
            }
            @media (min-width: 1024px) {
                .login-grid {
                    grid-template-columns: 45% 55%;
                }
            }

            .brand-panel {
                background: linear-gradient(145deg, #4338ca, #6366f1, #7c3aed);
                position: relative;
                overflow: hidden;
            }

            .brand-panel::before {
                content: '';
                position: absolute;
                inset: 0;
                background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
                background-size: 20px 20px;
            }

            .brand-panel::after {
                content: '';
                position: absolute;
                bottom: -30%;
                right: -20%;
                width: 500px;
                height: 500px;
                background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
                border-radius: 50%;
            }

            .brand-glow {
                position: absolute;
                top: -15%;
                left: -15%;
                width: 400px;
                height: 400px;
                background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
                border-radius: 50%;
            }

            .feature-item {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                padding: 0.6rem 0;
            }

            .feature-icon {
                width: 32px;
                height: 32px;
                background: rgba(255,255,255,0.12);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .form-panel {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 2rem;
                background: #f9fafb;
            }

            @keyframes fadeInUp {
                from { opacity: 0; transform: translateY(16px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .animate-fade-in-up {
                animation: fadeInUp 0.5s ease-out both;
            }
            .animate-delay-1 { animation-delay: 0.1s; }
            .animate-delay-2 { animation-delay: 0.2s; }
            .animate-delay-3 { animation-delay: 0.3s; }
        </style>
    </head>
    <body class="font-sans text-gray-900 antialiased">

        @php
            $appLogo = \App\Models\Setting::where('key', 'app_logo')->value('value');
            $appName = \App\Models\Setting::where('key', 'app_name')->value('value') ?? 'DigiShop';
            $appDesc = \App\Models\Setting::where('key', 'app_description')->value('value') ?? 'Premium Digital Products Marketplace';
        @endphp

        <div class="login-grid">

            {{-- ========== LEFT: Brand Panel ========== --}}
            <div class="brand-panel hidden md:flex flex-col justify-center items-start px-10 lg:px-16 py-12 text-white">
                <div class="brand-glow"></div>

                <div class="relative z-10 w-full max-w-md">
                    {{-- Logo + Brand --}}
                    <div class="flex items-center gap-4 mb-8 animate-fade-in-up">
                        <a href="/" class="flex-shrink-0">
                            @if($appLogo && \Illuminate\Support\Facades\Storage::disk('public')->exists($appLogo))
                                <div class="w-14 h-14 rounded-2xl overflow-hidden bg-white/10 backdrop-blur-sm flex items-center justify-center p-1.5 ring-1 ring-white/20">
                                    <img src="{{ \Illuminate\Support\Facades\Storage::url($appLogo) }}" alt="{{ $appName }}" class="w-full h-full object-contain">
                                </div>
                            @else
                                <div class="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-sm flex items-center justify-center ring-1 ring-white/20">
                                    <x-heroicon-o-book-open class="w-7 h-7 text-white" stroke-width="1.5" />
                                </div>
                            @endif
                        </a>
                        <div>
                            <h1 class="text-2xl lg:text-3xl font-extrabold tracking-tight leading-none">{{ $appName }}</h1>
                            <p class="text-sm text-rose-200 mt-0.5 font-medium">{{ $appDesc }}</p>
                        </div>
                    </div>

                    {{-- Tagline --}}
                    <div class="animate-fade-in-up animate-delay-1">
                        <p class="text-lg lg:text-xl font-bold text-white/95 leading-relaxed mb-2">
                            Akses ribuan produk digital premium dalam satu platform.
                        </p>
                        <p class="text-sm text-rose-200/80 leading-relaxed">
                            Mulai dari template, source code, e-book, hingga aset desain — siap pakai untuk proyek Anda.
                        </p>
                    </div>

                    {{-- Divider --}}
                    <div class="w-12 h-0.5 bg-white/20 rounded-full my-8 animate-fade-in-up animate-delay-2"></div>

                    {{-- Trust Features --}}
                    <div class="space-y-1 animate-fade-in-up animate-delay-3">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <x-heroicon-s-shield-check class="w-4 h-4 text-emerald-300" />
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-white/90">Transaksi Aman & Terenkripsi</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <x-heroicon-s-bolt class="w-4 h-4 text-amber-300" />
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-white/90">Akses Instan Setelah Disetujui</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <x-heroicon-s-arrow-down-tray class="w-4 h-4 text-sky-300" />
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-white/90">Unduh Tanpa Batas</p>
                            </div>
                        </div>
                    </div>

                    {{-- Footer --}}
                    <p class="text-xs text-rose-300/50 mt-12">&copy; {{ date('Y') }} {{ $appName }}. All rights reserved.</p>
                </div>
            </div>

            {{-- ========== RIGHT: Form Panel ========== --}}
            <div class="form-panel">
                <div class="w-full max-w-md">

                    {{-- Mobile-only branding --}}
                    <div class="md:hidden text-center mb-8">
                        <a href="/" class="inline-block mb-3">
                            @if($appLogo && \Illuminate\Support\Facades\Storage::disk('public')->exists($appLogo))
                                <img src="{{ \Illuminate\Support\Facades\Storage::url($appLogo) }}" alt="{{ $appName }}" class="w-auto h-16 object-contain mx-auto">
                            @else
                                <div class="bg-slate-800 p-3 rounded-2xl flex items-center justify-center w-14 h-14 shadow-md mx-auto">
                                    <x-heroicon-o-book-open class="w-7 h-7 text-white" stroke-width="2" />
                                </div>
                            @endif
                        </a>
                        <h2 class="text-xl font-bold text-gray-900">{{ $appName }}</h2>
                        <p class="text-xs text-gray-500 mt-0.5">{{ $appDesc }}</p>
                    </div>

                    {{-- Form Header --}}
                    <div class="mb-8 animate-fade-in-up">
                        <h2 class="text-2xl font-extrabold text-slate-900 tracking-tight">Masuk ke Akun Anda</h2>
                        <p class="text-sm text-slate-500 mt-1.5">Silakan masukkan kredensial untuk melanjutkan.</p>
                    </div>

                    {{-- Form Card --}}
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 px-7 py-8 animate-fade-in-up animate-delay-1">
                        {{ $slot }}
                    </div>

                    {{-- Bottom link --}}
                    <p class="text-center text-xs text-slate-400 mt-6 animate-fade-in-up animate-delay-2">
                        <a href="/" class="text-rose-600 hover:text-rose-700 font-semibold hover:underline transition-colors">
                            &larr; Kembali ke Beranda
                        </a>
                    </p>
                </div>
            </div>

        </div>
    </body>
</html>


