<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames(([
    'title' => 'Home',
    'description' => 'South Sudan Health Informatics Association - Advancing health informatics in South Sudan',
    'keywords' => 'health informatics, South Sudan, SSHIA, healthcare, digital health',
    'breadcrumbs' => null,
]));

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(([
    'title' => 'Home',
    'description' => 'South Sudan Health Informatics Association - Advancing health informatics in South Sudan',
    'keywords' => 'health informatics, South Sudan, SSHIA, healthcare, digital health',
    'breadcrumbs' => null,
]), '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); ?>

<!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($title); ?> — <?php echo e(config('app.name')); ?></title>
    <meta name="description" content="<?php echo e($description); ?>">
    <meta name="keywords" content="<?php echo e($keywords); ?>">
    <meta name="author" content="<?php echo e(config('app.name')); ?>">

    
    <meta property="og:title" content="<?php echo e($title); ?> — <?php echo e(config('app.name')); ?>">
    <meta property="og:description" content="<?php echo e($description); ?>">
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo e(url()->current()); ?>">
    <meta property="og:image" content="<?php echo e(asset('storage/organization/logo.png')); ?>">
    <meta property="og:site_name" content="<?php echo e(config('app.name')); ?>">

    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?php echo e($title); ?> — <?php echo e(config('app.name')); ?>">
    <meta name="twitter:description" content="<?php echo e($description); ?>">
    <meta name="twitter:image" content="<?php echo e(asset('storage/organization/logo.png')); ?>">

    
    <link rel="icon" type="image/x-icon" href="<?php echo e(asset('favicon.ico')); ?>">

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

    
    <link rel="preload" as="style" href="<?php echo e(asset('build/assets/app.css')); ?>" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="<?php echo e(asset('build/assets/app.css')); ?>"></noscript>

    
    <?php if(isset($themeCssVariables) && is_array($themeCssVariables)): ?>
    <style>
        :root {
            <?php $__currentLoopData = $themeCssVariables; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $property => $value): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php echo e($property); ?>: <?php echo e($value); ?>;
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        }
    </style>
    <?php endif; ?>

    
    <style>[x-cloak] { display: none !important; }</style>

    
    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>

    
    <?php echo e($styles ?? ''); ?>

</head>
<body class="antialiased bg-white font-sans">
    
    
    <?php
        try {
            $org = \App\Models\Organization::first();
        } catch (\Exception $e) {
            \Log::error('Failed to fetch organization data: ' . $e->getMessage());
            $org = null;
        }
        
        try {
            $topbarNotifications = app(\App\Services\TopbarNotificationService::class)->getActive();
        } catch (\Exception $e) {
            \Log::error('Failed to fetch topbar notifications: ' . $e->getMessage());
            $topbarNotifications = collect([]);
        }
    ?>
    
    <?php if (isset($component)) { $__componentOriginalfdc8967a87956c0a7185abbef03fae20 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalfdc8967a87956c0a7185abbef03fae20 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.site-header','data' => ['organization' => $org,'notifications' => $topbarNotifications]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('site-header'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['organization' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($org),'notifications' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($topbarNotifications)]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalfdc8967a87956c0a7185abbef03fae20)): ?>
<?php $attributes = $__attributesOriginalfdc8967a87956c0a7185abbef03fae20; ?>
<?php unset($__attributesOriginalfdc8967a87956c0a7185abbef03fae20); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalfdc8967a87956c0a7185abbef03fae20)): ?>
<?php $component = $__componentOriginalfdc8967a87956c0a7185abbef03fae20; ?>
<?php unset($__componentOriginalfdc8967a87956c0a7185abbef03fae20); ?>
<?php endif; ?>

    
    <?php if($breadcrumbs && !empty($breadcrumbs)): ?>
        <?php if (isset($component)) { $__componentOriginal360d002b1b676b6f84d43220f22129e2 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal360d002b1b676b6f84d43220f22129e2 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.breadcrumbs','data' => ['items' => $breadcrumbs]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('breadcrumbs'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['items' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($breadcrumbs)]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal360d002b1b676b6f84d43220f22129e2)): ?>
<?php $attributes = $__attributesOriginal360d002b1b676b6f84d43220f22129e2; ?>
<?php unset($__attributesOriginal360d002b1b676b6f84d43220f22129e2); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal360d002b1b676b6f84d43220f22129e2)): ?>
<?php $component = $__componentOriginal360d002b1b676b6f84d43220f22129e2; ?>
<?php unset($__componentOriginal360d002b1b676b6f84d43220f22129e2); ?>
<?php endif; ?>
    <?php endif; ?>

    
    <?php if(session('success') || session('error') || session('warning') || session('info')): ?>
        <div class="w-full px-4 sm:px-6 lg:px-8 pt-4">
            <?php if(session('success')): ?>
                <div x-data="{ show: true }" x-show="show" x-transition
                     class="flex items-center gap-3 bg-green-50 border border-green-200 text-green-800 rounded-lg px-4 py-3 mb-2">
                    <i class="fas fa-check-circle text-green-500"></i>
                    <span class="text-sm flex-1"><?php echo e(session('success')); ?></span>
                    <button @click="show = false" class="text-green-400 hover:text-green-600"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>
            <?php if(session('error')): ?>
                <div x-data="{ show: true }" x-show="show" x-transition
                     class="flex items-center gap-3 bg-red-50 border border-red-200 text-red-800 rounded-lg px-4 py-3 mb-2">
                    <i class="fas fa-exclamation-circle text-red-500"></i>
                    <span class="text-sm flex-1"><?php echo e(session('error')); ?></span>
                    <button @click="show = false" class="text-red-400 hover:text-red-600"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>
            <?php if(session('warning')): ?>
                <div x-data="{ show: true }" x-show="show" x-transition
                     class="flex items-center gap-3 bg-amber-50 border border-amber-200 text-amber-800 rounded-lg px-4 py-3 mb-2">
                    <i class="fas fa-exclamation-triangle text-amber-500"></i>
                    <span class="text-sm flex-1"><?php echo e(session('warning')); ?></span>
                    <button @click="show = false" class="text-amber-400 hover:text-amber-600"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>
            <?php if(session('info')): ?>
                <div x-data="{ show: true }" x-show="show" x-transition
                     class="flex items-center gap-3 bg-blue-50 border border-blue-200 text-blue-800 rounded-lg px-4 py-3 mb-2">
                    <i class="fas fa-info-circle text-blue-500"></i>
                    <span class="text-sm flex-1"><?php echo e(session('info')); ?></span>
                    <button @click="show = false" class="text-blue-400 hover:text-blue-600"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>
        </div>
    <?php endif; ?>

    
    <main class="min-h-screen">
        <?php echo e($slot); ?>

    </main>

    
    <?php if (isset($component)) { $__componentOriginal222c87a019257fb1d70ae0ff46ab02e1 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal222c87a019257fb1d70ae0ff46ab02e1 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.site-footer','data' => ['organization' => $org]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('site-footer'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['organization' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($org)]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal222c87a019257fb1d70ae0ff46ab02e1)): ?>
<?php $attributes = $__attributesOriginal222c87a019257fb1d70ae0ff46ab02e1; ?>
<?php unset($__attributesOriginal222c87a019257fb1d70ae0ff46ab02e1); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal222c87a019257fb1d70ae0ff46ab02e1)): ?>
<?php $component = $__componentOriginal222c87a019257fb1d70ae0ff46ab02e1; ?>
<?php unset($__componentOriginal222c87a019257fb1d70ae0ff46ab02e1); ?>
<?php endif; ?>

    
    
    <div x-data="chatWidget()" class="fixed bottom-6 right-6 z-40" x-cloak>

        
        <button @click="toggle()"
                class="relative w-14 h-14 bg-[#1a4731] hover:bg-[#0f2819] text-white rounded-full shadow-2xl flex items-center justify-center transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-green-500/50"
                :aria-label="open ? 'Close chat' : 'Open chat support'"
                :aria-expanded="open.toString()">
            <i class="fas fa-comments text-xl transition-all" x-show="!open" aria-hidden="true"></i>
            <i class="fas fa-times  text-xl transition-all" x-show="open"  aria-hidden="true" x-cloak></i>
        </button>

        
        <div x-show="open"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-y-4 scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 scale-95"
             class="absolute bottom-16 right-0 w-80 bg-white rounded-2xl shadow-2xl overflow-hidden border border-gray-100"
             x-cloak
             role="dialog"
             aria-modal="true"
             aria-label="Chat support">

            
            <div class="bg-[#1a4731] text-white px-4 py-3 flex items-center gap-3">
                <div class="w-9 h-9 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-headset text-sm" aria-hidden="true"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-semibold text-sm leading-tight">SSHIA Support</h3>
                    <p class="text-xs text-green-200 leading-tight">We typically reply within minutes</p>
                </div>
                <button @click="close()"
                        class="w-7 h-7 rounded-full hover:bg-white/20 flex items-center justify-center transition flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-white"
                        aria-label="Close chat">
                    <i class="fas fa-times text-sm" aria-hidden="true"></i>
                </button>
            </div>

            
            <div class="p-4 space-y-3">
                <div>
                    <label for="cw-name" class="block text-xs font-medium text-gray-600 mb-1">Name <span class="text-gray-400">(optional)</span></label>
                    <input type="text"
                           id="cw-name"
                           x-model="visitorName"
                           placeholder="Your name"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
                </div>

                <div>
                    <label for="cw-email" class="block text-xs font-medium text-gray-600 mb-1">Email <span class="text-gray-400">(optional)</span></label>
                    <input type="email"
                           id="cw-email"
                           x-model="visitorEmail"
                           placeholder="your@email.com"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
                </div>

                <div>
                    <label for="cw-message" class="block text-xs font-medium text-gray-600 mb-1">
                        Message <span class="text-red-500">*</span>
                    </label>
                    <textarea id="cw-message"
                              x-model="initialMessage"
                              placeholder="How can we help you?"
                              rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 resize-none transition"></textarea>
                </div>

                <button @click="startChat()"
                        class="w-full px-4 py-2.5 bg-[#1a4731] hover:bg-[#0f2819] text-white rounded-lg text-sm font-semibold transition flex items-center justify-center gap-2 focus:outline-none focus:ring-2 focus:ring-green-500">
                    <i class="fas fa-paper-plane text-xs" aria-hidden="true"></i>
                    Start Chat
                </button>

                <p class="text-center text-xs text-gray-400">
                    Or <a href="<?php echo e(route('chat.public.start')); ?>" class="text-green-600 hover:underline">open full chat page</a>
                </p>
            </div>
        </div>
    </div>

    
    <script>
        

        // FontAwesome CDN fallback (safe — only injects a stylesheet link)
        if (!document.querySelector('link[href*="fontawesome"]') && !document.querySelector('link[href*="font-awesome"]')) {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
            link.crossOrigin = 'anonymous';
            link.referrerPolicy = 'no-referrer';
            document.head.appendChild(link);
        }
    </script>

    
    <?php echo e($scripts ?? ''); ?>

</body>
</html>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/components/layout/site.blade.php ENDPATH**/ ?>