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

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['sliders' => collect(), 'heroCards' => collect(), 'stats' => []]));

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((['sliders' => collect(), 'heroCards' => collect(), 'stats' => []]), '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); ?>



<?php
    $hasSliders  = $sliders->isNotEmpty();
    $sliderCount = $sliders->count();

    // Fallback info cards — used when no active HeroCard records exist in DB
    $fallbackCards = [
        [
            'title'            => 'SSHIA Membership',
            'content'          => 'Join a growing network of digital health professionals across South Sudan.',
            'background_color' => 'bg-red-600',
        ],
        [
            'title'            => 'Training Programmes',
            'content'          => 'Build capacity through expert-led health informatics training and workshops.',
            'background_color' => 'bg-green-600',
        ],
        [
            'title'            => 'Knowledge Base',
            'content'          => 'Access curated resources, guides, and research for health informatics.',
            'background_color' => 'bg-yellow-500',
        ],
    ];

    // Use DB cards if available, otherwise fall back to hardcoded defaults
    $cards = $heroCards->isNotEmpty()
        ? $heroCards->map(fn ($c) => [
            'title'            => $c->title,
            'content'          => $c->content,
            'background_color' => $c->background_color,
          ])->toArray()
        : $fallbackCards;
?>

<div>

    

    <?php if($hasSliders): ?>

        
        <div
            class="relative w-full overflow-hidden"
            style="height: 400px;"
            x-data="{
                current: 0,
                total: <?php echo e($sliderCount); ?>,
                timer: null,
                init() {
                    this.timer = setInterval(() => {
                        this.current = (this.current + 1) % this.total;
                    }, 4000);
                },
                destroy() {
                    clearInterval(this.timer);
                }
            }"
        >
            <?php $__currentLoopData = $sliders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $slider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                
                <div
                    class="absolute inset-0 w-full h-full"
                    x-show="current === <?php echo e($index); ?>"
                    x-transition:enter="transition-opacity ease-in-out duration-700"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="transition-opacity ease-in-out duration-700"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    <?php if($index !== 0): ?> x-cloak <?php endif; ?>
                >
                    
                    <div
                        class="absolute inset-0 bg-cover bg-center bg-no-repeat"
                        style="background-image: url('<?php echo e(e($slider->image_url)); ?>');"
                        role="img"
                        aria-label="<?php echo e(e($slider->title)); ?>"
                    ></div>

                    
                    <div
                        class="absolute inset-0"
                        style="background:
                            radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.58) 100%),
                            linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.52) 100%);"
                        aria-hidden="true"
                    ></div>

                    
                    
                    <div class="absolute inset-0 flex items-center justify-center px-6 z-10">
                        <h2 class="text-4xl md:text-5xl font-bold text-white text-center leading-tight max-w-4xl">
                            <span class="inline-block bg-green-600/65 backdrop-blur-sm rounded-xl px-6 py-2 drop-shadow-lg">
                                <?php echo e($slider->title); ?>

                            </span>
                        </h2>
                    </div>

                </div>

            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

            

        </div>

    <?php else: ?>

        
        <div
            class="relative w-full overflow-hidden flex items-center justify-center"
            style="height: 400px; background: linear-gradient(135deg, #1e3a5f 0%, #0f766e 100%);"
        >
            
            <div
                class="absolute inset-0"
                style="background: radial-gradient(ellipse at center, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);"
                aria-hidden="true"
            ></div>
            <div class="relative z-10 text-center px-6">
                <h2 class="text-4xl md:text-5xl font-bold text-white leading-tight drop-shadow-lg">
                    South Sudan Health Informatics Association
                </h2>
                <p class="mt-3 text-white/80 text-lg">Advancing Digital Health in South Sudan</p>
            </div>
        </div>

    <?php endif; ?>

    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-0 border-0 m-0 p-0" style="border:none; outline:none;">
        <?php $__currentLoopData = $cards; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $card): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="<?php echo e($card['background_color']); ?> py-8 px-8 text-white text-center flex flex-col justify-center min-h-[130px] border-0"
                 style="border:none; outline:none;">
                
                <h3 class="text-2xl font-bold mb-2 leading-tight"
                    style="text-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 -1px 0 rgba(0,0,0,0.35), 1px 0 0 rgba(0,0,0,0.15), -1px 0 0 rgba(0,0,0,0.15);">
                    <?php echo e($card['title']); ?>

                </h3>
                <p class="text-sm leading-relaxed opacity-90">
                    <?php echo e($card['content']); ?>

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

</div>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/components/home/hero.blade.php ENDPATH**/ ?>