@extends('frontend.layouts.main', array('body_class' => 'no-header climate-journey' ))
@section('content')
<div class="hero-background-img background-img parallax-container pv-container">
    <div class="parallax-slider pv-block hero-slider-img" pv-mediapath={{ getMediaUrl($data->heroImage->filename, '1920x1080') }} data-image-mobile="{{ getMediaUrl($data->heroImageMobile->filename, '640x1136') }}" data-image-desktop="{{ 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">{{ $data->hero_pretitle }}</span><br>
                <span class="title-center" data-aos="fade-up" data-aos-delay="500">{{ $data->hero_title }}</span>
            </h1>
            <div class="subtitle" data-aos="fade-up" data-aos-delay="600">
                {!! $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">
                    @include("frontend.templates.icons.journey-horizontal-path")
                </div>
                @foreach($data->journeyBlocks as $blockIdx => $block)
                    <a
                        class="nav-item icon-{{ $block->icon_name }}"
                        href="#cjs-{{ $block->id }}"
                        data-goto="cjs-{{ $block->id }}"
                        data-aos="fade" data-aos-delay="{{ 1300 + (100 * $blockIdx) }}"
                    >
                        <div class="icon-box">
                            @include("frontend.templates.icons.journey-{$block->icon_name}")
                        </div>
                        <span>{{ $block->title }}</span>
                    </a>
                @endforeach
            </div>
        </div>
        <button class="mobile-menu-button"></button>
    </div>
</section>

@foreach($data->journeyBlocks as $i => $block)
    <div class="background-img parallax-container pv-container">
        <div class="parallax-slider pv-block"
            pv-mediapath={{ getMediaUrl($block->heroImage->filename, '1920x1080') }}
            data-image-desktop={{ getMediaUrl($block->heroImage->filename, '1920x1080') }}
            data-image-mobile={{ getMediaUrl($block->heroImageMobile->filename, '640x828') }}
        ></div>
    </div>
    <section class="section journey-block-section journey-block-{{ $block->icon_name }}" id="cjs-{{ $block->id }}">
        <div class="journey-block-anchor" id="{{ urlize($block->title) }}"></div>
        <div
            class="section-box section-box-{{ $block->block_position }}"
            data-aos="slide-up"
            data-aos-mirror="true"
            data-aos-once="false"
            data-aos-delay="250"
            style="background-color:{{ $block->color }};"
        >
            <div class="section-heading">
                <h2 class="section-name">{{ $block->title }}</h2>
                <div class="section-icon">
                    @include("frontend.templates.icons.journey-{$block->icon_name}")
                </div>
            </div>
            <div class="section-content">
                {!! $block->short_description !!}
            </div>
            <button class="journey-button" data-open-detail="{{ $i }}" style="color: {{ $block->color }};">
                {{ $block->button_label ? $block->button_label : 'Learn more' }}
            </button>
        </div>
        <div class="image-credits {{ $block->block_position === 'bottom-left' ? 'image-credits-center' : '' }}">
            <div class="image-title">{{ $block->image_title  }}</div>
            @if(!empty($block->image_cta))
                <div class="image-link">
                    {!! generateLink($block->image_cta) !!}
                </div>
            @endif
        </div>
    </section>
@endforeach
<div class="section end-section" id="cjs-end">
    <div class="end-content">
        <div class="end-title">{{ $data->end_title }}</div>
        <div>{!! $data->end_content !!}</div>
        @if(!empty($data->end_cta))
            {!! generateLink($data->end_cta, 'std-button blue-button') !!}
        @endif
    </div>
</div>
<div class="side-nav-shadow">
    @include("frontend.templates.icons.sdw")
</div>
<div class="side-nav">
    @include("frontend.templates.icons.journey")
    <div class="nav-overlay">
        <a href="#" data-goto="cjs-0" class="nav-anchor nav-anchor-0">
            <div class="nav-tooltip">Beginning</div>
        </a>
        @foreach($data->journeyBlocks as $i => $block)
            <a href="#" data-goto="cjs-{{ $i + 1 }}" class="nav-anchor nav-anchor-{{ $i + 1 }}">
                <div class="nav-tooltip">{{ $block->title }}</div>
            </a>
        @endforeach
    </div>
</div>
<div class="journey-overlay">
    @foreach($data->journeyBlocks as $i => $block)
        <div class="more-info-box more-info-{{ $i }}">
            <div class="more-info-box-wrapper">
                <div class="more-info-icon">
                    @include("frontend.templates.icons.journey-{$block->icon_name}")
                </div>
                <div class="swiper-container">
                    <div class="slides swiper-wrapper">
                                                @for($slideIdx = 1; $slideIdx < 4; $slideIdx++)
                                                        @if(!empty($block->$detailTitle))
                                                                <div class="slide swiper-slide">
                                    <div class="slide-content">
                                        <h3>{{ $block->$detailTitle }}</h3>
                                        {!! $block->$detailDescription !!}
                                        <div class="slide-action">
                                            @if(!empty($block->$detailCta))
                                                {!! generateLink($block->$detailCta, 'std-button blue-button') !!}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endfor
                    </div>
                </div>
            </div>
            @if($slideCount > 1)
                <div class="slides-nav">
                    <a class="slide-prev slide-nav-btn" data-direction="prev"></a>
                    <div class="slide-dots">
                        @for($dotI = 0; $dotI < $slideCount; $dotI++)
                            <a class="slide-dot"></a>
                        @endfor
                    </div>
                    <a class="slide-next slide-nav-btn" data-direction="next"></a>
                </div>
            @endif

            <button class="close-button journey-button">Close</button>
        </div>
    @endforeach
</div>

<div class="journey-mobile-menu">
    <div class="journey-menu-title">
        {{ $data->mobile_menu_title }}
    </div>
    <ul class="journey-menu-items">
        @foreach($data->journeyBlocks as $idx => $block)
            <li>
                <a class="mobile-nav-item icon-{{ $block->icon_name }}" href="#cjs-{{ $block->id }}" data-goto="cjs-{{ $block->id }}">
                    <div class="icon-box">
                        @include("frontend.templates.icons.journey-{$block->icon_name}")
                    </div>
                    <div class="menu-title">
                        <div class="menu-number">{{ $idx + 1 }}.</div>
                        <div>{{ $block->title }}</div>
                    </div>
                </a>
            </li>
        @endforeach
    </ul>
    <button class="button-close-mobile"></button>
</div>

<style>
    @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: {{ $data->hero_text_color }};
            fill: {{ $data->hero_text_color }};
            stroke: {{ $data->hero_text_color }};
        }
        .climate-journey .journey-horizontal-path svg g {
            stroke: {{ $data->hero_text_color }};
        }
        .climate-journey .nav-item:after {
            background-color: {{ $data->hero_text_color }};
        }

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