<?php $__env->startSection('content'); ?>
<div class="hero-background-img background-img parallax-container pv-container">
    <div class="parallax-slider pv-block hero-slider-img" pv-mediapath=<?php echo e(getMediaUrl($data->heroImage->filename, '1920x1080')); ?> data-image-mobile="<?php echo e(getMediaUrl($data->heroImageMobile->filename, '640x1136')); ?>" data-image-desktop="<?php echo e(getMediaUrl($data->heroImage->filename, '1920x1080')); ?>">
    </div>
</div>
<section class="section hero-section" id="cjs-0">
    <div class="content">
        <div class="intro-box">
            <h1>
                <span class="title-top" data-aos="fade-up" data-aos-delay="400"><?php echo e($data->hero_pretitle); ?></span><br>
                <span class="title-center" data-aos="fade-up" data-aos-delay="500"><?php echo e($data->hero_title); ?></span>
            </h1>
            <div class="subtitle" data-aos="fade-up" data-aos-delay="600">
                <?php echo $data->hero_subtitle; ?>

            </div>
        </div>
        <div class="nav-bar" data-aos="fade-up" data-aos-delay="900">
            <div class="nav-bar-icons">
                <div class="journey-horizontal-path">
                    <?php echo $__env->make("frontend.templates.icons.journey-horizontal-path", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                </div>
                <?php $__currentLoopData = $data->journeyBlocks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $blockIdx => $block): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a
                        class="nav-item icon-<?php echo e($block->icon_name); ?>"
                        href="#cjs-<?php echo e($block->id); ?>"
                        data-goto="cjs-<?php echo e($block->id); ?>"
                        data-aos="fade" data-aos-delay="<?php echo e(1300 + (100 * $blockIdx)); ?>"
                    >
                        <div class="icon-box">
                            <?php echo $__env->make("frontend.templates.icons.journey-{$block->icon_name}", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                        </div>
                        <span><?php echo e($block->title); ?></span>
                    </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
        <button class="mobile-menu-button"></button>
    </div>
</section>

<?php $__currentLoopData = $data->journeyBlocks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $block): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <div class="background-img parallax-container pv-container">
        <div class="parallax-slider pv-block"
            pv-mediapath=<?php echo e(getMediaUrl($block->heroImage->filename, '1920x1080')); ?>

            data-image-desktop=<?php echo e(getMediaUrl($block->heroImage->filename, '1920x1080')); ?>

            data-image-mobile=<?php echo e(getMediaUrl($block->heroImageMobile->filename, '640x828')); ?>

        ></div>
    </div>
    <section class="section journey-block-section journey-block-<?php echo e($block->icon_name); ?>" id="cjs-<?php echo e($block->id); ?>">
        <div class="journey-block-anchor" id="<?php echo e(urlize($block->title)); ?>"></div>
        <div
            class="section-box section-box-<?php echo e($block->block_position); ?>"
            data-aos="slide-up"
            data-aos-mirror="true"
            data-aos-once="false"
            data-aos-delay="250"
            style="background-color:<?php echo e($block->color); ?>;"
        >
            <div class="section-heading">
                <h2 class="section-name"><?php echo e($block->title); ?></h2>
                <div class="section-icon">
                    <?php echo $__env->make("frontend.templates.icons.journey-{$block->icon_name}", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                </div>
            </div>
            <div class="section-content">
                <?php echo $block->short_description; ?>

            </div>
            <button class="journey-button" data-open-detail="<?php echo e($i); ?>" style="color: <?php echo e($block->color); ?>;">
                <?php echo e($block->button_label ? $block->button_label : 'Learn more'); ?>

            </button>
        </div>
        <div class="image-credits <?php echo e($block->block_position === 'bottom-left' ? 'image-credits-center' : ''); ?>">
            <div class="image-title"><?php echo e($block->image_title); ?></div>
            <?php if(!empty($block->image_cta)): ?>
                <div class="image-link">
                    <?php echo generateLink($block->image_cta); ?>

                </div>
            <?php endif; ?>
        </div>
    </section>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<div class="section end-section" id="cjs-end">
    <div class="end-content">
        <div class="end-title"><?php echo e($data->end_title); ?></div>
        <div><?php echo $data->end_content; ?></div>
        <?php if(!empty($data->end_cta)): ?>
            <?php echo generateLink($data->end_cta, 'std-button blue-button'); ?>

        <?php endif; ?>
    </div>
</div>
<div class="side-nav-shadow">
    <?php echo $__env->make("frontend.templates.icons.sdw", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</div>
<div class="side-nav">
    <?php echo $__env->make("frontend.templates.icons.journey", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
    <div class="nav-overlay">
        <a href="#" data-goto="cjs-0" class="nav-anchor nav-anchor-0">
            <div class="nav-tooltip">Beginning</div>
        </a>
        <?php $__currentLoopData = $data->journeyBlocks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $block): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <a href="#" data-goto="cjs-<?php echo e($i + 1); ?>" class="nav-anchor nav-anchor-<?php echo e($i + 1); ?>">
                <div class="nav-tooltip"><?php echo e($block->title); ?></div>
            </a>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
</div>
<div class="journey-overlay">
    <?php $__currentLoopData = $data->journeyBlocks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $block): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="more-info-box more-info-<?php echo e($i); ?>">
            <div class="more-info-box-wrapper">
                <div class="more-info-icon">
                    <?php echo $__env->make("frontend.templates.icons.journey-{$block->icon_name}", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                </div>
                <div class="swiper swiper-container">
                    <div class="slides swiper-wrapper">
                        <?php $slideCount = 0; ?>
                        <?php for($slideIdx = 1; $slideIdx < 4; $slideIdx++): ?>
                            <?php
                                $detailTitle = 'detail_title_' . $slideIdx;
                                $detailDescription = 'detail_description_' . $slideIdx;
                                $detailCta = 'detail_cta_' . $slideIdx;
                            ?>
                            <?php if(!empty($block->$detailTitle)): ?>
                                <?php $slideCount++; ?>
                                <div class="slide swiper-slide">
                                    <div class="slide-content">
                                        <h3><?php echo e($block->$detailTitle); ?></h3>
                                        <?php echo $block->$detailDescription; ?>

                                        <div class="slide-action">
                                            <?php if(!empty($block->$detailCta)): ?>
                                                <?php echo generateLink($block->$detailCta, 'std-button blue-button'); ?>

                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endif; ?>
                        <?php endfor; ?>
                    </div>
                </div>
            </div>
            <?php if($slideCount > 1): ?>
                <div class="slides-nav">
                    <a class="slide-prev slide-nav-btn" data-direction="prev"></a>
                    <div class="slide-dots">
                        <?php for($dotI = 0; $dotI < $slideCount; $dotI++): ?>
                            <a class="slide-dot"></a>
                        <?php endfor; ?>
                    </div>
                    <a class="slide-next slide-nav-btn" data-direction="next"></a>
                </div>
            <?php endif; ?>

            <button class="close-button journey-button">Close</button>
        </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>

<div class="journey-mobile-menu">
    <div class="journey-menu-title">
        <?php echo e($data->mobile_menu_title); ?>

    </div>
    <ul class="journey-menu-items">
        <?php $__currentLoopData = $data->journeyBlocks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $block): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <li>
                <a class="mobile-nav-item icon-<?php echo e($block->icon_name); ?>" href="#cjs-<?php echo e($block->id); ?>" data-goto="cjs-<?php echo e($block->id); ?>">
                    <div class="icon-box">
                        <?php echo $__env->make("frontend.templates.icons.journey-{$block->icon_name}", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                    </div>
                    <div class="menu-title">
                        <div class="menu-number"><?php echo e($idx + 1); ?>.</div>
                        <div><?php echo e($block->title); ?></div>
                    </div>
                </a>
            </li>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </ul>
    <button class="button-close-mobile"></button>
</div>

<style>
    <?php if($data->hero_text_color): ?>
        .climate-journey .hero-section h1,
        .climate-journey .hero-section .subtitle,
        .climate-journey .hero-section .subtitle a,
        .climate-journey .nav-item,
        .climate-journey .nav-item svg g {
            color: <?php echo e($data->hero_text_color); ?>;
            fill: <?php echo e($data->hero_text_color); ?>;
            stroke: <?php echo e($data->hero_text_color); ?>;
        }
        .climate-journey .journey-horizontal-path svg g {
            stroke: <?php echo e($data->hero_text_color); ?>;
        }
        .climate-journey .nav-item:after {
            background-color: <?php echo e($data->hero_text_color); ?>;
        }

    <?php endif; ?>
    <?php $__currentLoopData = $data->journeyBlocks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $block): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        .climate-journey .icon-<?php echo e($block->icon_name); ?>:hover svg g,
        .climate-journey .more-info-<?php echo e($i); ?> svg g {
            fill: <?php echo e($block->color); ?>;
            stroke: <?php echo e($block->color); ?>;
        }
        .climate-journey .nav-item.icon-<?php echo e($block->icon_name); ?>:hover span {
            color: <?php echo e($block->color); ?>;
        }
        .climate-journey .icon-<?php echo e($block->icon_name); ?>:hover:after {
            background-color: <?php echo e($block->color); ?>;
        }
        .climate-journey ._current-section-<?php echo e($i + 1); ?> .nav-anchor-<?php echo e($i + 1); ?>:before,
        .climate-journey .nav-anchor-<?php echo e($i + 1); ?>:hover:before {
            background-color: <?php echo e($block->color); ?> !important;
        }
        .climate-journey .nav-anchor-<?php echo e($i + 1); ?> .nav-tooltip {
            color: <?php echo e($block->color); ?>;
        }
        .climate-journey .more-info-<?php echo e($i); ?> h3 {
            color: <?php echo e($block->color); ?>;
        }
        .climate-journey .more-info-<?php echo e($i); ?> .std-button {
            background-color: <?php echo e($block->color); ?>;
        }
        .climate-journey .more-info-<?php echo e($i); ?> .swiper-pagination-bullet-active {
            background-color: <?php echo e($block->color); ?>;
        }
        .climate-journey #journey-path-<?php echo e($i + 1); ?> {
            stroke: <?php echo e($block->color); ?>;
        }
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</style>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('frontend.layouts.main', array('body_class' => 'no-header climate-journey' ), \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/resources/views/frontend/templates/page/climate_journey.blade.php ENDPATH**/ ?>