<!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 $__env->yieldContent('title', 'Self-Paced Learning Portal'); ?> — <?php echo e($organization->name ?? config('app.name')); ?></title>

    <!-- SEO -->
    <meta name="description" content="<?php echo $__env->yieldContent('meta-description', 'Browse and enroll in self-paced online courses. Learn at your own pace and earn certificates.'); ?>">

    <!-- 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" />

    <!-- FontAwesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

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

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

    <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body class="antialiased bg-white font-sans" x-data="{ mobileMenuOpen: false }">

    
    <header class="bg-white border-b border-gray-100 sticky top-0 z-50 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">

                
                <a href="<?php echo e(route('self-paced.public.index')); ?>"
                   class="flex items-center gap-3 flex-shrink-0 group">
                    <?php if(!empty($organization->logo) && file_exists(public_path('storage/' . $organization->logo))): ?>
                        <img src="<?php echo e(asset('storage/' . $organization->logo)); ?>"
                             alt="<?php echo e($organization->name ?? config('app.name')); ?>"
                             class="h-9 w-auto object-contain">
                    <?php else: ?>
                        <span class="w-9 h-9 bg-indigo-600 rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-graduation-cap text-white text-base"></i>
                        </span>
                    <?php endif; ?>
                    <div class="hidden sm:block">
                        <p class="text-sm font-bold text-gray-900 leading-tight group-hover:text-indigo-700 transition">
                            <?php echo e($organization->short_name ?? $organization->name ?? config('app.name')); ?>

                        </p>
                        <p class="text-xs text-indigo-600 font-medium leading-tight">Self-Paced Learning Portal</p>
                    </div>
                </a>

                
                <nav class="hidden md:flex items-center gap-1">
                    <a href="<?php echo e(route('self-paced.public.index')); ?>"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition
                              <?php echo e(request()->routeIs('self-paced.public.index') ? 'bg-indigo-50 text-indigo-700' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'); ?>">
                        <i class="fas fa-home mr-1.5 text-xs"></i>Home
                    </a>
                    <a href="<?php echo e(route('self-paced.public.index')); ?>#courses"
                       class="px-4 py-2 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 transition">
                        <i class="fas fa-book-open mr-1.5 text-xs"></i>Courses
                    </a>
                    <a href="<?php echo e(route('self-paced.public.verify')); ?>"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition
                              <?php echo e(request()->routeIs('self-paced.public.verify') ? 'bg-indigo-50 text-indigo-700' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'); ?>">
                        <i class="fas fa-shield-check mr-1.5 text-xs"></i>Verify Certificate
                    </a>
                </nav>

                
                <div class="flex items-center gap-2">
                    <?php if(auth()->guard()->check()): ?>
                        <a href="<?php echo e(route('dashboard')); ?>"
                           class="hidden sm:flex items-center gap-1.5 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition">
                            <i class="fas fa-th-large text-xs"></i>
                            <span>My Dashboard</span>
                        </a>
                        <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('access self-paced learner portal')): ?>
                        <a href="<?php echo e(route('self-paced.public.index')); ?>"
                           class="hidden sm:flex items-center gap-1.5 px-3 py-2 border border-indigo-200 text-indigo-700 text-sm font-medium rounded-lg hover:bg-indigo-50 transition">
                            <i class="fas fa-book-reader text-xs"></i>
                            <span>My Courses</span>
                        </a>
                        <?php endif; ?>
                    <?php endif; ?>
                    <?php if(auth()->guard()->guest()): ?>
                        <a href="<?php echo e(route('login')); ?>"
                           class="hidden sm:inline-flex items-center gap-1.5 px-4 py-2 border border-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition">
                            <i class="fas fa-sign-in-alt text-xs"></i>Login
                        </a>
                        <a href="<?php echo e(route('register')); ?>"
                           class="hidden sm:inline-flex items-center gap-1.5 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition">
                            Get Started
                        </a>
                    <?php endif; ?>

                    
                    <button @click="mobileMenuOpen = !mobileMenuOpen"
                            class="md:hidden p-2 rounded-md text-gray-500 hover:bg-gray-100 transition"
                            aria-label="Toggle menu">
                        <i class="fas fa-bars" x-show="!mobileMenuOpen"></i>
                        <i class="fas fa-times" x-show="mobileMenuOpen" x-cloak></i>
                    </button>
                </div>
            </div>
        </div>

        
        <div x-show="mobileMenuOpen" x-cloak x-transition
             class="md:hidden border-t border-gray-100 bg-white shadow-lg">
            <div class="px-4 py-3 space-y-1">
                <a href="<?php echo e(route('self-paced.public.index')); ?>"
                   class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition">
                    <i class="fas fa-home w-4 text-gray-400"></i>Home
                </a>
                <a href="<?php echo e(route('self-paced.public.index')); ?>#courses"
                   class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition">
                    <i class="fas fa-book-open w-4 text-gray-400"></i>Courses
                </a>
                <a href="<?php echo e(route('self-paced.public.verify')); ?>"
                   class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition">
                    <i class="fas fa-shield-check w-4 text-gray-400"></i>Verify Certificate
                </a>
                <div class="pt-2 border-t border-gray-100 space-y-1">
                    <?php if(auth()->guard()->check()): ?>
                        <a href="<?php echo e(route('dashboard')); ?>"
                           class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium text-indigo-700 bg-indigo-50 hover:bg-indigo-100 transition">
                            <i class="fas fa-th-large w-4"></i>My Dashboard
                        </a>
                    <?php endif; ?>
                    <?php if(auth()->guard()->guest()): ?>
                        <a href="<?php echo e(route('login')); ?>"
                           class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition">
                            <i class="fas fa-sign-in-alt w-4 text-gray-400"></i>Login
                        </a>
                        <a href="<?php echo e(route('register')); ?>"
                           class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition">
                            <i class="fas fa-user-plus w-4"></i>Get Started
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </header>

    
    <?php if(session('success') || session('error') || session('warning') || session('info')): ?>
        <div class="max-w-7xl mx-auto 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>
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    
    <footer class="bg-gray-900 text-gray-300 mt-16">

        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">

                
                <div class="lg:col-span-1">
                    <div class="flex items-center gap-2 mb-4">
                        <?php if(!empty($organization->logo) && file_exists(public_path('storage/' . $organization->logo))): ?>
                            <img src="<?php echo e(asset('storage/' . $organization->logo)); ?>"
                                 alt="<?php echo e($organization->name ?? config('app.name')); ?>"
                                 class="h-8 w-auto object-contain brightness-0 invert opacity-80">
                        <?php else: ?>
                            <span class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
                                <i class="fas fa-graduation-cap text-white text-sm"></i>
                            </span>
                        <?php endif; ?>
                        <span class="font-bold text-white text-sm">
                            <?php echo e($organization->short_name ?? $organization->name ?? config('app.name')); ?>

                        </span>
                    </div>
                    <p class="text-xs text-gray-400 leading-relaxed mb-4">
                        Self-Paced Online Learning Portal — learn at your own pace, earn certificates, and advance your career.
                    </p>

                    
                    <?php if(!empty($organization->social_media_links)): ?>
                    <div class="flex items-center gap-2 flex-wrap">
                        <?php $__currentLoopData = $organization->social_media_links; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $platform => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php if($url): ?>
                            <a href="<?php echo e($url); ?>" target="_blank" rel="noopener noreferrer"
                               class="w-8 h-8 bg-gray-800 hover:bg-indigo-600 rounded-lg flex items-center justify-center transition"
                               aria-label="<?php echo e(ucfirst($platform)); ?>">
                                <?php switch(strtolower($platform)):
                                    case ('facebook'): ?>
                                        <i class="fab fa-facebook-f text-xs"></i>
                                        <?php break; ?>
                                    <?php case ('twitter'): ?>
                                    <?php case ('x'): ?>
                                        <i class="fab fa-x-twitter text-xs"></i>
                                        <?php break; ?>
                                    <?php case ('linkedin'): ?>
                                        <i class="fab fa-linkedin-in text-xs"></i>
                                        <?php break; ?>
                                    <?php case ('instagram'): ?>
                                        <i class="fab fa-instagram text-xs"></i>
                                        <?php break; ?>
                                    <?php case ('youtube'): ?>
                                        <i class="fab fa-youtube text-xs"></i>
                                        <?php break; ?>
                                    <?php case ('whatsapp'): ?>
                                        <i class="fab fa-whatsapp text-xs"></i>
                                        <?php break; ?>
                                    <?php default: ?>
                                        <i class="fas fa-link text-xs"></i>
                                <?php endswitch; ?>
                            </a>
                            <?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    <?php endif; ?>
                </div>

                
                <div>
                    <h3 class="text-white font-semibold text-sm mb-4 uppercase tracking-wider">Contact Us</h3>
                    <ul class="space-y-2.5 text-xs text-gray-400">
                        <?php if(!empty($organization->physical_address)): ?>
                        <li class="flex items-start gap-2">
                            <i class="fas fa-map-marker-alt mt-0.5 text-indigo-400 w-3.5 flex-shrink-0"></i>
                            <span><?php echo e($organization->physical_address); ?><?php echo e(!empty($organization->city) ? ', ' . $organization->city : ''); ?><?php echo e(!empty($organization->country) ? ', ' . $organization->country : ''); ?></span>
                        </li>
                        <?php endif; ?>
                        <?php if(!empty($organization->email)): ?>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-envelope text-indigo-400 w-3.5 flex-shrink-0"></i>
                            <a href="mailto:<?php echo e($organization->email); ?>" class="hover:text-white transition"><?php echo e($organization->email); ?></a>
                        </li>
                        <?php endif; ?>
                        <?php if(!empty($organization->hotline)): ?>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-phone text-indigo-400 w-3.5 flex-shrink-0"></i>
                            <a href="tel:<?php echo e($organization->hotline); ?>" class="hover:text-white transition"><?php echo e($organization->hotline); ?></a>
                        </li>
                        <?php endif; ?>
                        <?php if(!empty($organization->postal_address)): ?>
                        <li class="flex items-start gap-2">
                            <i class="fas fa-mailbox text-indigo-400 w-3.5 flex-shrink-0 mt-0.5"></i>
                            <span>P.O. Box <?php echo e($organization->postal_address); ?><?php echo e(!empty($organization->postal_code) ? ', ' . $organization->postal_code : ''); ?></span>
                        </li>
                        <?php endif; ?>
                    </ul>
                </div>

                
                <div>
                    <h3 class="text-white font-semibold text-sm mb-4 uppercase tracking-wider">Quick Links</h3>
                    <ul class="space-y-2 text-xs">
                        <li>
                            <a href="<?php echo e(route('self-paced.public.index')); ?>"
                               class="text-gray-400 hover:text-white transition flex items-center gap-1.5">
                                <i class="fas fa-chevron-right text-[10px] text-indigo-500"></i>Home
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('self-paced.public.index')); ?>#courses"
                               class="text-gray-400 hover:text-white transition flex items-center gap-1.5">
                                <i class="fas fa-chevron-right text-[10px] text-indigo-500"></i>Browse Courses
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('self-paced.public.verify')); ?>"
                               class="text-gray-400 hover:text-white transition flex items-center gap-1.5">
                                <i class="fas fa-chevron-right text-[10px] text-indigo-500"></i>Verify Certificate
                            </a>
                        </li>
                        <?php if(auth()->guard()->check()): ?>
                        <li>
                            <a href="<?php echo e(route('dashboard')); ?>"
                               class="text-gray-400 hover:text-white transition flex items-center gap-1.5">
                                <i class="fas fa-chevron-right text-[10px] text-indigo-500"></i>My Dashboard
                            </a>
                        </li>
                        <?php endif; ?>
                        <?php if(auth()->guard()->guest()): ?>
                        <li>
                            <a href="<?php echo e(route('login')); ?>"
                               class="text-gray-400 hover:text-white transition flex items-center gap-1.5">
                                <i class="fas fa-chevron-right text-[10px] text-indigo-500"></i>Login
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('register')); ?>"
                               class="text-gray-400 hover:text-white transition flex items-center gap-1.5">
                                <i class="fas fa-chevron-right text-[10px] text-indigo-500"></i>Register
                            </a>
                        </li>
                        <?php endif; ?>
                    </ul>
                </div>

                
                <div>
                    <h3 class="text-white font-semibold text-sm mb-4 uppercase tracking-wider">Legal</h3>
                    <ul class="space-y-2 text-xs">
                        <li>
                            <a href="<?php echo e(route('pages.privacy')); ?>"
                               class="text-gray-400 hover:text-white transition flex items-center gap-1.5">
                                <i class="fas fa-chevron-right text-[10px] text-indigo-500"></i>Privacy Policy
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('pages.terms')); ?>"
                               class="text-gray-400 hover:text-white transition flex items-center gap-1.5">
                                <i class="fas fa-chevron-right text-[10px] text-indigo-500"></i>Terms of Service
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('pages.support')); ?>"
                               class="text-gray-400 hover:text-white transition flex items-center gap-1.5">
                                <i class="fas fa-chevron-right text-[10px] text-indigo-500"></i>Support
                            </a>
                        </li>
                    </ul>

                    
                    <div class="mt-6 p-3 bg-gray-800 rounded-xl border border-gray-700">
                        <p class="text-xs text-gray-400 mb-2">
                            <i class="fas fa-shield-check text-indigo-400 mr-1"></i>
                            Verify a certificate's authenticity
                        </p>
                        <a href="<?php echo e(route('self-paced.public.verify')); ?>"
                           class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-medium rounded-lg transition w-full justify-center">
                            <i class="fas fa-search text-[10px]"></i>Verify Now
                        </a>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="border-t border-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex flex-col sm:flex-row items-center justify-between gap-2">
                <p class="text-xs text-gray-500">
                    &copy; <?php echo e(date('Y')); ?> <?php echo e($organization->name ?? config('app.name')); ?>. All rights reserved.
                    <?php if(!empty($organization->year_of_formation)): ?>
                        Est. <?php echo e($organization->year_of_formation); ?>.
                    <?php endif; ?>
                </p>
                <p class="text-xs text-gray-600">
                    Self-Paced Learning Portal — Powered by <?php echo e(config('app.name')); ?>

                </p>
            </div>
        </div>
    </footer>

    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/layouts/self-paced-landing.blade.php ENDPATH**/ ?>