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

        <title><?php echo e(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&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
        
        <style>
            .hero-overlay {
                background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
            }
            @keyframes fadeInUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            @keyframes fadeInDown {
                from { opacity: 0; transform: translateY(-20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            @keyframes slowZoom {
                from { transform: scale(1); }
                to { transform: scale(1.1); }
            }
            .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
            .animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
            .animate-slow-zoom { animation: slowZoom 20s infinite alternate linear; }
            .glass-card {
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            .glass-card label {
                color: #f3f4f6; /* text-gray-100 */
            }
            .glass-card span, 
            .glass-card a {
                color: #e5e7eb !important; /* text-gray-200 */
            }
            .glass-card a:hover {
                color: #D3B45F !important; /* jfi-gold */
            }
            .glass-card input[type="checkbox"] {
                border-color: #D3B45F;
                color: #D3B45F;
            }
            /* Add text override for inputs if needed, but usually they have specific classes */
        </style>
    </head>
    <body class="font-poppins text-jfi-dark antialiased bg-black min-h-screen">
        <div class="relative min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
            <!-- Background Image -->
            <?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['bgImage' => 'https://jfi.lk/images/gallery/Malabe.JPG']));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter((['bgImage' => 'https://jfi.lk/images/gallery/Malabe.JPG']), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>
            <div class="absolute inset-0 overflow-hidden z-0">
                <div class="w-full h-full bg-cover bg-center animate-slow-zoom" style="background-image: url('<?php echo e($bgImage); ?>');"></div>
                <div class="absolute inset-0 hero-overlay"></div>
            </div>

            <!-- Home Button -->
            <a href="/public" class="absolute top-6 left-6 z-20 text-white hover:text-jfi-gold transition-colors duration-300 flex items-center gap-2 font-bold uppercase tracking-widest text-xs">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                </svg>
                Back to Home
            </a>

            <div class="relative z-10 w-full flex flex-col items-center animate-fade-in-down">
                <a href="/" class="mb-8">
                    <img src="https://jfi.lk/images/logo.png" alt="JF&I Logo" class="h-20 w-auto brightness-0 invert shadow-lg hover:opacity-80 transition-opacity duration-300">
                </a>

                <div class="w-full sm:max-w-md mt-6 px-10 py-10 glass-card shadow-2xl overflow-hidden sm:rounded-2xl transform transition-all hover:shadow-[0_0_30px_rgba(211,180,95,0.3)] duration-500 animate-fade-in-up">
                    <?php echo e($slot); ?>

                </div>
                
                <div class="mt-8 text-white text-opacity-70 text-sm">
                    &copy; <?php echo e(date('Y')); ?> JF&I Packaging (PVT) LTD.
                </div>
            </div>
            </div>
        </div>
        
        <!-- Spotlight Overlay -->
        <div class="fixed inset-0 pointer-events-none z-0 spotlight transition-opacity duration-500"></div>

        <script>
           const spotlight = document.querySelector('.spotlight');
           document.addEventListener('mousemove', (e) => {
               const x = e.clientX;
               const y = e.clientY;
               spotlight.style.background = `radial-gradient(circle 600px at ${x}px ${y}px, rgba(211, 180, 95, 0.15), transparent 40%)`;
           });
        </script>
    </body>
</html>
<?php /**PATH F:\xampp\htdocs\courier_booking\resources\views/layouts/guest.blade.php ENDPATH**/ ?>