<?php if (isset($component)) { $__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $attributes; } ?>
<?php $component = App\View\Components\SiteLayout::resolve(['title' => 'Mentorship Programme','metaDescription' => 'Join our mentorship programmes to grow your skills and connect with experienced mentors.'] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('site-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\SiteLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    
    <section class="relative bg-gradient-to-br from-green-600 via-green-700 to-green-800 text-white overflow-hidden">
        
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,<svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><g fill=\"%23ffffff\" fill-opacity=\"0.4\"><path d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/></g></g></svg>');"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
            <div class="text-center">
                <span class="inline-block px-4 py-1 bg-white/20 backdrop-blur rounded-full text-sm font-medium mb-6">
                    <i class="fas fa-graduation-cap mr-2"></i>
                    Mentorship Programme
                </span>
                <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
                    Grow With Expert<br>
                    <span class="text-yellow-300">Mentorship</span>
                </h1>
                <p class="text-xl md:text-2xl text-green-100 max-w-3xl mx-auto mb-10">
                    Connect with experienced mentors who will guide you on your professional journey. 
                    Transform your career through personalized mentorship.
                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="#programmes" class="px-8 py-4 bg-white text-green-700 rounded-xl font-semibold hover:bg-green-50 transition shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                        <i class="fas fa-search mr-2"></i>
                        Browse Programmes
                    </a>
                    <a href="<?php echo e(route('register.role.mentee')); ?>" class="px-8 py-4 bg-yellow-400 text-green-900 rounded-xl font-semibold hover:bg-yellow-300 transition shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                        <i class="fas fa-user-graduate mr-2"></i>
                        Apply Now (Become a Mentee)
                    </a>
                    <a href="<?php echo e(route('register.role.mentor')); ?>" class="px-8 py-4 bg-white/20 backdrop-blur text-white rounded-xl font-semibold hover:bg-white/30 transition shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                        <i class="fas fa-user-tie mr-2"></i>
                        Become a Mentor
                    </a>
                </div>
            </div>
        </div>

        
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="white"/>
            </svg>
        </div>
    </section>

    
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="<?php echo e(url('/')); ?>" class="hover:text-green-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Mentorship Programme</span>
            </nav>
        </div>
    </div>

    
    <?php if($featuredProgrammes->count() > 0): ?>
        <section class="py-16 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <span class="text-green-600 font-semibold text-sm uppercase tracking-wider">Featured</span>
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-2">Featured Programmes</h2>
                    <p class="text-gray-600 mt-4 max-w-5xl mx-auto">
                        Our top mentorship programmes, handpicked for exceptional learning experiences
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php $__currentLoopData = $featuredProgrammes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $programme): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100">
                            <div class="relative h-48 bg-gradient-to-br from-green-400 to-green-600">
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <i class="fas fa-chalkboard-teacher text-white/20 text-6xl"></i>
                                </div>
                                <div class="absolute top-4 right-4">
                                    <span class="px-3 py-1 bg-yellow-400 text-yellow-900 rounded-full text-xs font-semibold">
                                        <i class="fas fa-star mr-1"></i>
                                        Featured
                                    </span>
                                </div>
                            </div>
                            <div class="p-6">
                                <div class="flex items-center gap-2 mb-3">
                                    <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
                                        <?php echo e($programme->category->name ?? 'General'); ?>

                                    </span>
                                    <?php if($programme->is_free): ?>
                                        <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">
                                            Free
                                        </span>
                                    <?php endif; ?>
                                </div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-green-600 transition">
                                    <?php echo e($programme->title); ?>

                                </h3>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                                    <?php echo e(Str::limit($programme->description, 100)); ?>

                                </p>
                                <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                                    <span><i class="fas fa-clock mr-1"></i> <?php echo e($programme->duration_text); ?></span>
                                    <span><i class="fas fa-users mr-1"></i> <?php echo e($programme->applications_count ?? 0); ?> applied</span>
                                </div>
                                <div class="flex gap-2">
                                    <a href="<?php echo e(route('mentorship.public.programme', $programme)); ?>" 
                                       class="flex-1 text-center px-4 py-2 border border-green-600 text-green-600 rounded-lg hover:bg-green-50 transition font-medium text-sm">
                                        View Details
                                    </a>
                                    <a href="<?php echo e(route('mentorship.public.apply', ['programme_id' => $programme->id])); ?>" 
                                       class="flex-1 text-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium text-sm">
                                        Apply Now
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </section>
    <?php endif; ?>

    
    <?php if($categories->count() > 0): ?>
        <section class="py-16 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <span class="text-green-600 font-semibold text-sm uppercase tracking-wider">Categories</span>
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-2">Browse by Category</h2>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a href="<?php echo e(route('mentorship.public.category', $category)); ?>" 
                           class="group p-6 bg-white rounded-xl shadow hover:shadow-lg transition border border-gray-100 text-center">
                            <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center group-hover:bg-green-200 transition">
                                <i class="<?php echo e($category->icon ?? 'fas fa-folder'); ?> text-2xl text-green-600"></i>
                            </div>
                            <h3 class="font-semibold text-gray-900 group-hover:text-green-600 transition">
                                <?php echo e($category->name); ?>

                            </h3>
                            <p class="text-sm text-gray-500 mt-1">
                                <?php echo e($category->active_programmes_count ?? 0); ?> programmes
                            </p>
                        </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </section>
    <?php endif; ?>

    
    <section id="programmes" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-12">
                <div>
                    <h2 class="text-3xl font-bold text-gray-900">All Programmes</h2>
                    <p class="text-gray-600 mt-2">Find the perfect mentorship programme for your goals</p>
                </div>
                
                
                <div class="mt-4 md:mt-0 flex flex-wrap gap-2">
                    <form method="GET" class="flex flex-wrap gap-2">
                        <select name="category" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                            <option value="">All Categories</option>
                            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($cat->id); ?>" <?php echo e($filters['category_id'] == $cat->id ? 'selected' : ''); ?>>
                                    <?php echo e($cat->name); ?>

                                </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                        <select name="is_free" class="px-4 py-2 border border-gray-300 rounded-lg">
                            <option value="">All Types</option>
                            <option value="1" <?php echo e($filters['is_free'] === '1' ? 'selected' : ''); ?>>Free Only</option>
                            <option value="0" <?php echo e($filters['is_free'] === '0' ? 'selected' : ''); ?>>Paid Only</option>
                        </select>
                        <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                            Filter
                        </button>
                    </form>
                </div>
            </div>

            <?php if($programmes->count() > 0): ?>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php $__currentLoopData = $programmes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $programme): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100">
                            <div class="p-6">
                                <div class="flex items-center gap-2 mb-3">
                                    <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
                                        <?php echo e($programme->category->name ?? 'General'); ?>

                                    </span>
                                    <?php if($programme->is_free): ?>
                                        <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">Free</span>
                                    <?php else: ?>
                                        <span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium">
                                            <?php echo e(number_format($programme->fee_amount, 0)); ?> <?php echo e($programme->currency); ?>

                                        </span>
                                    <?php endif; ?>
                                </div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2">
                                    <?php echo e($programme->title); ?>

                                </h3>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                                    <?php echo e(Str::limit($programme->description, 150)); ?>

                                </p>
                                <div class="flex items-center gap-4 text-sm text-gray-500 mb-4">
                                    <span><i class="fas fa-clock mr-1"></i> <?php echo e($programme->duration_text); ?></span>
                                    <span><i class="fas fa-video mr-1"></i> <?php echo e(ucfirst($programme->session_type)); ?></span>
                                </div>
                                <div class="flex gap-2">
                                    <a href="<?php echo e(route('mentorship.public.programme', $programme)); ?>" 
                                       class="flex-1 text-center px-4 py-2 border border-green-600 text-green-600 rounded-lg hover:bg-green-50 transition font-medium text-sm">
                                        Details
                                    </a>
                                    <a href="<?php echo e(route('mentorship.public.apply', ['programme_id' => $programme->id])); ?>" 
                                       class="flex-1 text-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium text-sm">
                                        Apply
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                
                <div class="mt-12">
                    <?php echo e($programmes->appends($filters)->links()); ?>

                </div>
            <?php else: ?>
                <div class="text-center py-16">
                    <i class="fas fa-search text-gray-300 text-6xl mb-4"></i>
                    <h3 class="text-xl font-medium text-gray-900 mb-2">No Programmes Found</h3>
                    <p class="text-gray-500">Try adjusting your filters or check back later.</p>
                </div>
            <?php endif; ?>
        </div>
    </section>

    
    <section class="py-20 bg-gradient-to-br from-green-600 to-green-800 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold">Why Join Our Mentorship Programme?</h2>
                <p class="text-green-100 mt-4 max-w-5xl mx-auto">
                    Our mentorship programme connects you with industry experts who can guide your professional growth
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center p-6">
                    <div class="w-16 h-16 mx-auto mb-6 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-user-tie text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Expert Mentors</h3>
                    <p class="text-green-100">
                        Learn from experienced professionals who have excelled in their fields
                    </p>
                </div>
                <div class="text-center p-6">
                    <div class="w-16 h-16 mx-auto mb-6 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-comments text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Personalized Guidance</h3>
                    <p class="text-green-100">
                        One-on-one sessions tailored to your specific goals and challenges
                    </p>
                </div>
                <div class="text-center p-6">
                    <div class="w-16 h-16 mx-auto mb-6 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-certificate text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Recognized Certificates</h3>
                    <p class="text-green-100">
                        Earn certificates upon completion to showcase your achievement
                    </p>
                </div>
            </div>

            <div class="text-center mt-12 flex flex-wrap justify-center gap-4">
                <a href="<?php echo e(route('register.role.mentee')); ?>" 
                   class="px-8 py-4 bg-yellow-400 text-green-900 rounded-xl font-semibold hover:bg-yellow-300 transition shadow-lg">
                    <i class="fas fa-user-graduate mr-2"></i>
                    Start Your Journey as a Mentee
                </a>
                <a href="<?php echo e(route('register.role.mentor')); ?>" 
                   class="px-8 py-4 bg-white/20 backdrop-blur text-white rounded-xl font-semibold hover:bg-white/30 transition shadow-lg">
                    <i class="fas fa-user-tie mr-2"></i>
                    Become a Mentor
                </a>
            </div>
        </div>
    </section>

    
    <div id="applyModal" class="fixed inset-0 bg-black/50 z-50 hidden overflow-y-auto">
        <div class="min-h-screen flex items-center justify-center p-4">
            <div class="bg-white rounded-2xl w-full max-w-md p-6 relative">
                <button onclick="closeApplyModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Quick Apply</h3>
                <p class="text-gray-600 mb-6">Select a programme to begin your application</p>
                
                <div class="space-y-3 max-h-96 overflow-y-auto">
                    <?php $__currentLoopData = $programmes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $prog): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a href="<?php echo e(route('mentorship.public.apply', ['programme_id' => $prog->id])); ?>" 
                           class="block p-4 border border-gray-200 rounded-xl hover:border-green-500 hover:bg-green-50 transition">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h4 class="font-semibold text-gray-900"><?php echo e($prog->title); ?></h4>
                                    <p class="text-sm text-gray-500"><?php echo e($prog->duration_text); ?></p>
                                </div>
                                <div class="text-right">
                                    <?php if($prog->is_free): ?>
                                        <span class="text-green-600 font-semibold">Free</span>
                                    <?php else: ?>
                                        <span class="text-purple-600 font-semibold">
                                            <?php echo e(number_format($prog->fee_amount, 0)); ?> <?php echo e($prog->currency); ?>

                                        </span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
    <script>
        function openApplyModal() {
            document.getElementById('applyModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closeApplyModal() {
            document.getElementById('applyModal').classList.add('hidden');
            document.body.style.overflow = '';
        }

        // Close modal on outside click
        document.getElementById('applyModal')?.addEventListener('click', function(e) {
            if (e.target === this) {
                closeApplyModal();
            }
        });
    </script>
    <?php $__env->stopPush(); ?>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5)): ?>
<?php $attributes = $__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5; ?>
<?php unset($__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5)): ?>
<?php $component = $__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5; ?>
<?php unset($__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5); ?>
<?php endif; ?>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/mentorship/public/index.blade.php ENDPATH**/ ?>