<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Mi Restaurante VIP') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="antialiased">
    <div class="grid min-h-screen lg:grid-cols-2">
        {{-- ===== Panel izquierdo: marca (dramático oscuro) ===== --}}
        <div class="relative hidden flex-col justify-center overflow-hidden bg-gradient-to-br from-brand-950 via-brand-900 to-[#3b0d52] p-12 text-white lg:flex">
            {{-- Foto de restaurante muy sutil de fondo --}}
            <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=80" alt="" class="absolute inset-0 h-full w-full object-cover opacity-10">
            <div class="absolute -top-24 -right-24 h-80 w-80 rounded-full bg-accent-500/25 blur-3xl"></div>
            <div class="absolute -bottom-32 -left-16 h-96 w-96 rounded-full bg-brand-500/30 blur-3xl"></div>

            <div class="relative mx-auto w-full max-w-md">
                {{-- Logo + nombre --}}
                <div class="text-center">
                    <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-3xl bg-gradient-to-br from-brand-500 to-accent-500 text-4xl shadow-xl shadow-brand-900/50">🍽️</div>
                    <h1 class="mt-5 text-3xl font-extrabold tracking-tight">Mi Restaurante VIP</h1>
                    <p class="mt-1 text-xs font-semibold uppercase tracking-[0.25em] text-indigo-200/60">Sistema de gestión premium</p>
                </div>

                {{-- Lista de funciones --}}
                <div class="mt-10 space-y-5">
                    @php
                        $items = [
                            ['🛒','Punto de Venta','Pedidos, IGV y cobros en segundos'],
                            ['🪑','Mesas y Reservas','Controla salones y reservas en tiempo real'],
                            ['📊','Reportes Avanzados','Métricas y estadísticas en tiempo real'],
                            ['📱','Acceso Multiplataforma','Disponible en cualquier dispositivo'],
                        ];
                    @endphp
                    @foreach ($items as [$icon, $title, $desc])
                        <div class="flex items-center gap-4">
                            <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-white/10 text-xl backdrop-blur">{{ $icon }}</div>
                            <div>
                                <p class="font-bold text-white">{{ $title }}</p>
                                <p class="text-sm text-indigo-100/65">{{ $desc }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- Stats --}}
                <div class="mt-10 grid grid-cols-3 gap-3">
                    @php $kpis = [['+500','Restaurantes'],['98%','Satisfacción'],['24/7','Soporte']]; @endphp
                    @foreach ($kpis as [$n, $l])
                        <div class="rounded-2xl bg-white/5 p-4 text-center ring-1 ring-white/10">
                            <p class="text-2xl font-extrabold text-white">{{ $n }}</p>
                            <p class="mt-0.5 text-xs text-indigo-100/60">{{ $l }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- ===== Panel derecho: formulario ===== --}}
        <div class="flex items-center justify-center bg-slate-50 p-6 sm:p-12">
            <div class="w-full max-w-md">
                <div class="mb-8 flex items-center gap-3 lg:hidden">
                    <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-accent-500 text-xl text-white">🍽️</div>
                    <p class="text-lg font-extrabold text-slate-800">Mi Restaurante VIP</p>
                </div>
                {{ $slot }}
            </div>
        </div>
    </div>
</body>
</html>
