<?php $__env->startSection('content'); ?>
<div class="min-h-screen bg-background">
    <?php echo $__env->make('partials.navbar', ['variant' => 'dark'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <main>
        
        <div class="bg-secondary pt-[140px] pb-20">
            <div class="mx-auto max-w-7xl px-6">
                <p class="mb-4 flex items-center gap-4 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary">
                    <span class="h-0.5 w-8 bg-primary"></span>
                    Why Choose Us
                </p>
                <h1 class="max-w-3xl font-display text-[40px] leading-[1.1] text-secondary-foreground sm:text-[54px] lg:text-[64px]">
                    Why HSE Horizon
                </h1>
                <p class="mt-6 max-w-2xl text-sm leading-relaxed text-white/55">
                    We're not a compliance checkbox. We're a specialist HSE consultancy built on
                    field experience, independent judgment, and a genuine belief that safety
                    performance is the product of culture — not paperwork.
                </p>

                <div class="mt-10 flex flex-wrap gap-3">
                    <?php $__currentLoopData = config('why.differentiators'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <span class="border border-white/15 px-4 py-2 font-display text-[11px] font-bold uppercase tracking-[0.12em] text-white/50">
                            <?php echo e($item['no']); ?> — <?php echo e($item['title']); ?>

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

        <div class="h-1.5 w-full bg-primary"></div>

        
        <div data-animate class="bg-primary">
            <div class="mx-auto grid max-w-7xl grid-cols-2 divide-x divide-primary-foreground/20 px-6 lg:grid-cols-4">
                <?php $__currentLoopData = config('why.stats'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $stat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="ani-up flex flex-col items-center gap-1 px-6 py-10 text-center" style="animation-delay: <?php echo e($i * 0.1); ?>s">
                        <span class="font-display text-[42px] font-extrabold leading-none text-primary-foreground lg:text-[52px]">
                            <?php echo e($stat['value']); ?>

                        </span>
                        <span class="max-w-[140px] text-[12px] font-medium leading-snug text-primary-foreground/75">
                            <?php echo e($stat['label']); ?>

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

        
        <div class="mx-auto max-w-7xl divide-y divide-border px-6">
            <?php $__currentLoopData = config('why.differentiators'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php ($flip = $i % 2 !== 0); ?>
                <article data-animate class="grid items-center gap-12 py-20 lg:grid-cols-2 lg:gap-20">
                    
                    <div class="ani-reveal relative h-[340px] overflow-hidden lg:h-[460px] <?php echo e($flip ? 'lg:order-2' : ''); ?>" style="animation-delay: 0.1s">
                        <img src="<?php echo e(asset('images/' . $item['image'])); ?>" alt="<?php echo e($item['image_alt']); ?>" class="size-full object-cover" loading="lazy">
                        <div class="absolute inset-0 bg-secondary/30"></div>
                        <div class="absolute bottom-0 left-0 top-0 w-1 bg-primary"></div>

                        <div class="absolute bottom-6 right-6 flex size-16 items-center justify-center bg-primary shadow-lg">
                            <?php echo $__env->make('partials.icon', ['name' => $item['icon'], 'class' => 'size-7 text-primary-foreground'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </div>

                        <div class="absolute right-0 top-0 bg-secondary px-4 py-2">
                            <span class="font-display text-[13px] font-bold uppercase tracking-[0.18em] text-primary">
                                <?php echo e($item['no']); ?>

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

                    
                    <div class="<?php echo e($flip ? 'lg:order-1' : ''); ?>">
                        <p class="ani-down mb-4 flex items-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.15s">
                            <span class="h-0.5 w-6 bg-primary"></span>
                            <?php echo e($item['no']); ?>

                        </p>

                        <h2 class="font-display text-[26px] leading-[1.2] text-secondary sm:text-[32px] lg:text-[36px]">
                            <?php $__currentLoopData = explode(' ', $item['title']); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $wi => $word): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <span class="mr-2 inline-flex overflow-hidden">
                                    <span class="word-up" style="animation-delay: <?php echo e(0.2 + $wi * 0.04); ?>s"><?php echo e($word); ?></span>
                                </span>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </h2>

                        <p class="ani-up mt-5 text-sm leading-relaxed text-muted-foreground" style="animation-delay: 0.35s">
                            <?php echo e($item['body']); ?>

                        </p>

                        <ul class="mt-6 flex flex-col gap-3">
                            <?php $__currentLoopData = $item['points']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pi => $point): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li class="ani-up flex items-start gap-3" style="animation-delay: <?php echo e(0.42 + $pi * 0.08); ?>s">
                                    <?php echo $__env->make('partials.icon', ['name' => 'check-circle', 'class' => 'mt-0.5 size-4 shrink-0 text-primary'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                                    <span class="text-sm text-secondary"><?php echo e($point); ?></span>
                                </li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </div>
                </article>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        
        <section data-animate class="bg-secondary py-20">
            <div class="mx-auto max-w-7xl px-6">
                <div class="mb-12 flex flex-col items-center text-center">
                    <p class="ani-down mb-4 flex items-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.1s">
                        <span class="h-0.5 w-6 bg-primary"></span>
                        Standards We Work To
                        <span class="h-0.5 w-6 bg-primary"></span>
                    </p>
                    <h2 class="ani-up max-w-xl font-display text-[28px] leading-[1.2] text-secondary-foreground sm:text-[34px]" style="animation-delay: 0.2s">
                        Built for Certification. Designed to Last.
                    </h2>
                </div>

                <div class="flex flex-wrap justify-center gap-3">
                    <?php $__currentLoopData = config('why.standards'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $std): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="ani-up border border-white/10 px-5 py-3 font-display text-[13px] font-bold uppercase tracking-[0.12em] text-white/60 transition-colors duration-300 hover:border-primary hover:text-primary" style="animation-delay: <?php echo e(0.25 + $i * 0.06); ?>s">
                            <?php echo e($std); ?>

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

        
        <section data-animate class="bg-background py-24">
            <div class="mx-auto max-w-3xl px-6 text-center">
                <p class="ani-down mb-4 flex items-center justify-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.1s">
                    <span class="h-0.5 w-6 bg-primary"></span>
                    Ready to Work With Us?
                    <span class="h-0.5 w-6 bg-primary"></span>
                </p>
                <h2 class="ani-up font-display text-[30px] leading-[1.2] text-secondary sm:text-[38px]" style="animation-delay: 0.2s">
                    Let's Talk About Your HSE Needs
                </h2>
                <p class="ani-up mt-5 text-sm leading-relaxed text-muted-foreground" style="animation-delay: 0.3s">
                    Whether you need a single audit or a complete HSE structure built from the ground
                    up, our team is ready with a tailored approach — not a generic quote.
                </p>
                <div class="ani-up mt-8 flex flex-wrap items-center justify-center gap-4" style="animation-delay: 0.4s">
                    <a href="<?php echo e(route('contact')); ?>" class="btn-slide h-14 bg-primary px-10 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="<?php echo e(route('home')); ?>#what-we-do" class="btn-slide h-14 border-2 border-secondary bg-transparent px-10 text-sm text-secondary hover:bg-secondary hover:text-secondary-foreground">
                        <span class="btn-label">
                            <span class="text-one">View Our Services</span>
                            <span class="text-two">View Our Services</span>
                        </span>
                        <?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                    </a>
                </div>
            </div>
        </section>
    </main>

    <?php echo $__env->make('partials.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH E:\projects-octa\hse-horizon\resources\views\pages\why.blade.php ENDPATH**/ ?>