<section data-hero-slider class="relative flex min-h-screen flex-col overflow-hidden bg-background">
    <div class="relative grid flex-1 lg:grid-cols-2 lg:items-stretch">
        <?php $__currentLoopData = config('site.hero_slides'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $slide): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div data-hero-slide class="<?php echo \Illuminate\Support\Arr::toCssClasses(['contents', 'hidden' => $i > 0]); ?>">
                <div class="flex flex-col justify-center px-6 pb-16 pt-[160px] lg:pb-24 lg:pl-[7%] lg:pr-10 lg:pt-[188px]">
                    <p class="ani-down mb-5 flex items-center gap-4 font-display text-lg font-medium text-primary" style="animation-delay: 0.15s">
                        <span class="h-0.5 w-8 bg-primary"></span>
                        <?php echo e($slide['subtitle']); ?>

                    </p>

                    <h1 class="font-display text-[38px] leading-[1.1] text-secondary sm:text-[50px] lg:text-[58px]">
                        <?php $__currentLoopData = explode(' ', $slide['title']); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $wi => $word): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <span class="mr-2.5 inline-flex overflow-hidden">
                                <span class="word-up" style="animation-delay: <?php echo e(0.15 + $wi * 0.06); ?>s"><?php echo e($word); ?></span>
                            </span>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </h1>

                    <p class="ani-up mt-7 max-w-xl text-base leading-relaxed text-muted-foreground" style="animation-delay: 0.35s">
                        <?php echo e($slide['desc']); ?>

                    </p>

                    <div class="ani-up mt-10 flex flex-wrap items-center gap-4" style="animation-delay: 0.5s">
                        <a href="#contact" class="btn-slide h-14 bg-primary px-8 text-sm text-primary-foreground hover:bg-secondary">
                            <span class="btn-label">
                                <span class="text-one">Talk to an HSE Specialist</span>
                                <span class="text-two">Talk to an HSE Specialist</span>
                            </span>
                            <?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </a>
                        <a href="#" class="btn-slide h-14 border-2 border-secondary bg-transparent px-8 text-sm text-secondary hover:bg-secondary hover:text-secondary-foreground">
                            <span class="btn-label">
                                <span class="text-one">Download Capability Statement</span>
                                <span class="text-two">Download Capability Statement</span>
                            </span>
                            <?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </a>
                    </div>
                </div>

                <div class="relative h-[420px] lg:h-full">
                    <div class="clip-hero-media ani-reveal absolute inset-0 -left-[12%] overflow-hidden">
                        <img src="<?php echo e(asset('images/' . $slide['image'])); ?>" alt="HSE professionals conducting a safety inspection on an industrial site" width="1280" height="1024" class="size-full object-cover">
                    </div>
                    <div class="clip-hero-triangle ani-down absolute -top-px left-[4%] hidden h-[40%] w-[34%] bg-primary lg:block"></div>
                    <div class="clip-hero-band absolute bottom-0 right-0 hidden h-14 w-[36%] bg-primary lg:block"></div>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

    <div class="absolute bottom-16 left-1/2 z-20 flex -translate-x-1/2 gap-1 lg:bottom-14 lg:left-[38%]">
        <button type="button" data-hero-prev aria-label="Previous slide" class="flex size-14 items-center justify-center bg-primary text-primary-foreground transition-colors duration-300 hover:bg-secondary">
            <span class="rotate-180"><?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?></span>
        </button>
        <button type="button" data-hero-next aria-label="Next slide" class="flex size-14 items-center justify-center bg-accent text-foreground transition-colors duration-300 hover:bg-primary hover:text-primary-foreground">
            <?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
        </button>
    </div>

    <div data-marquee class="overflow-hidden bg-secondary py-3.5">
        <div class="flex w-max animate-marquee items-center">
            <?php $__currentLoopData = array_merge(config('site.ticker_items'), config('site.ticker_items')); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <span class="flex items-center gap-3 px-8 text-[13px] font-medium text-white/65">
                    <span class="size-1.5 shrink-0 rounded-full bg-primary"></span>
                    <?php echo e($item); ?>

                </span>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>
<?php /**PATH E:\projects-octa\hse-horizon\resources\views\partials\home\hero.blade.php ENDPATH**/ ?>