<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>" class="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo $__env->yieldContent('title', 'Secure Vision | Login'); ?></title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700|outfit:400,500,600,700,800&display=swap" rel="stylesheet" />

    <style>
        body { font-family: 'Inter', sans-serif; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; }
    </style>

    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
</head>
<body class="antialiased bg-slate-950 text-slate-300 selection:bg-blue-500 selection:text-white min-h-screen flex items-center justify-center p-4">
    
    <!-- Background Effects -->
    <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-1/2 -right-1/2 w-full h-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent blur-3xl rounded-full"></div>
        <div class="absolute -bottom-1/2 -left-1/2 w-full h-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops))] from-indigo-900/20 via-transparent to-transparent blur-3xl rounded-full"></div>
    </div>

    <div class="w-full max-w-5xl bg-slate-900/80 backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl overflow-hidden relative z-10 flex flex-col md:flex-row">
        
        <!-- Left Side: Branding / Info -->
        <div class="hidden md:flex flex-col justify-between w-1/2 p-12 bg-linear-to-br from-slate-800/80 to-slate-900/80 border-r border-white/5 relative overflow-hidden">
            <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1557597774-9d2757053e1a?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center opacity-10 mix-blend-overlay"></div>
            
            <div class="relative z-10">
                <a href="<?php echo e(route('home')); ?>" class="inline-flex items-center gap-2 group mb-12">
                    <div class="w-10 h-10 rounded-lg bg-linear-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/40 transition-shadow">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
                    <span class="text-2xl font-bold font-heading text-white tracking-tight">Secure<span class="text-blue-500">Vision</span></span>
                </a>
                
                <h1 class="text-4xl font-bold font-heading text-white mb-4 line-clamp-3">
                    Portal Seguro de <span class="text-transparent bg-clip-text bg-linear-to-r from-blue-400 to-indigo-500">Gestão</span>
                </h1>
                <p class="text-slate-400 text-lg max-w-md">
                    Aceda ao seu sistema de videovigilância, faturas e contratos de forma centralizada e hiper segura.
                </p>
            </div>
            
            <div class="relative z-10">
                <div class="flex items-center gap-3">
                    <div class="flex -space-x-3">
                        <img class="w-10 h-10 rounded-full border-2 border-slate-900 object-cover" src="https://i.pravatar.cc/100?img=1" alt="User">
                        <img class="w-10 h-10 rounded-full border-2 border-slate-900 object-cover" src="https://i.pravatar.cc/100?img=2" alt="User">
                        <img class="w-10 h-10 rounded-full border-2 border-slate-900 object-cover" src="https://i.pravatar.cc/100?img=3" alt="User">
                    </div>
                    <div class="text-sm">
                        <p class="text-white font-medium">+1.000 clientes</p>
                        <p class="text-slate-400 text-xs">confiam na Secure Vision</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Right Side: Form Content -->
        <div class="w-full md:w-1/2 p-8 md:p-12 relative flex flex-col justify-center">
            <!-- Mobile Logo -->
            <a href="<?php echo e(route('home')); ?>" class="md:hidden flex items-center gap-2 group mb-8 justify-center">
                <div class="w-10 h-10 rounded-lg bg-linear-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-blue-500/20">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
                <span class="text-2xl font-bold font-heading text-white tracking-tight">Secure<span class="text-blue-500">Vision</span></span>
            </a>

            <!-- Form Content Injection -->
            <?php echo $__env->yieldContent('content'); ?>
            
        </div>
    </div>
</body>
</html>
<?php /**PATH C:\laragon\www\secure-vision-app\resources\views\layouts\auth.blade.php ENDPATH**/ ?>