@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="AboutPage InnerPage">

        <section id="InnerBanner">
            <picture>
                <source media="(min-width: 468px)" srcset="{{ $pageBanner['image'] }}" />
                <img src="{{ $pageBanner['mobileImage'] }}" width="1920" height="480" alt="{{ $pageBanner['name'] }}"
                    loading="lazy" />
            </picture>
        </section>

        <!-- AboutSec -->
        <section id="AboutSec">
            <div class="container">
                <div class="dFlx">
                    <div class="lftSd wow animate__fadeInLeft" data-wow-duration="1s">
                        <div class="tleWrap">
                            <div class="sTle">About Us</div>
                            <h2 class="mTle">{{ $cms->title }}</h2>
                        </div>
                        <div class="cntWrap">
                            {!! $cms->description !!}
                        </div>
                    </div>
                    <div class="ritSd wow animate__fadeInRight" data-wow-duration="1s">
                        <div class="backImg">
                            <img src="{{ $cms->image_value }}" loading="lazy" width="540" height="620" alt="about">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- VisionSec -->
        <section id="VisionSec">
            <div class="container">
                <div class="visionList wow animate__fadeIn" data-wow-duration="1s">
                    <div class="item">
                        <div class="visionBx">
                            <div class="iconBx">
                                <img src="{{ $cms->mission_icon_value }}" width="50" height="50" alt="mission" loading="lazy">
                            </div>
                            <div class="cntWrap">
                                <div class="cnTtl">{{ $cms->mission_title }}</div>
                                <div class="txt">{{ $cms->mission }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="visionBx">
                            <div class="iconBx">
                                <img src="{{ $cms->vision_icon_value }}" width="50" height="50" alt="vision">
                            </div>
                            <div class="cntWrap">
                                <div class="cnTtl">{{ $cms->vision_title }}</div>
                                <div class="txt">{{ $cms->vision }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="visionBx">
                            <div class="iconBx">
                                <img src="{{ $cms->values_icon_value }}" width="50" height="50" alt="values">
                            </div>
                            <div class="cntWrap">
                                <div class="cnTtl">{{ $cms->values_title }}</div>
                                <div class="txt">{{ $cms->values }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @if ($leaderships->isNotEmpty())
            <!-- leaderSec-Slider -->
            <section id="leaderSec">
                <div class="container">
                    <div class="tleWrap center wow animate__fadeInUp" data-wow-duration="1s">
                        <h2 class="mTle">{{ $cms->leadership_title }}</h2>
                    </div>
                    <div class="SLiderWrp">
                        <div id="ThumbSlide" class="ritSd splide ThumbSlide">
                            <div class="imgWrap">
                                <img src="{{ asset('frontend/images/aboutsec-Logo.png') }}" loading="lazy" width="610"
                                    height="600" alt="leadership">
                            </div>
                            <div class="splide__track logoImgslide">
                                <ul class="splide__list">
                                    @foreach ($leaderships as $leadership)
                                        <li class="splide__slide">
                                            <a href="javascript:void(0);" class="link"
                                                aria-label="Learn more about {{ $leadership->name }}, {{ $leadership->position }}">
                                                <div class="bgImg">
                                                    <img src="{{ $leadership->image_value }}" loading="lazy" width="60"
                                                        height="60" alt="{{ $leadership->name }}">
                                                </div>
                                                <div class="hidnTxt">
                                                    <div class="name">{{ $leadership->name }}</div>
                                                    <div class="occo">{{ $leadership->position }}</div>
                                                </div>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="backdrp">
                            <div id="LeadSlide" class="splide MainSlide">
                                <div class="splide__track">
                                    <ul class="splide__list">
                                        @foreach ($leaderships as $leadership)
                                            <li class="splide__slide">
                                                <div class="cntWrap">
                                                    <div class="dFlx">
                                                        <div class="lFt">
                                                            <div class="prfImg">
                                                                <img src="{{ $leadership->image_value }}" loading="lazy"
                                                                    width="610" height="600"
                                                                    alt="{{ $leadership->name }}">
                                                            </div>
                                                        </div>
                                                        <div class="rit">
                                                            <div class="headSec">
                                                                <div class="name">{{ $leadership->name }}</div>
                                                                <div class="occupt">{{ $leadership->position }}</div>
                                                                @if ($leadership->linkedin_link)
                                                                    <div class="sociaLinks">
                                                                        <a href="{{ $leadership->linkedin_link }}"
                                                                            class="icon"
                                                                            aria-label="Connect with {{ $leadership->name }} on LinkedIn"
                                                                            target="_blank">
                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                version="1.1"
                                                                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                                                                width="512" height="512" x="0" y="0"
                                                                                viewBox="0 0 512 512"
                                                                                style="enable-background:new 0 0 512 512"
                                                                                xml:space="preserve" class="">
                                                                                <g>
                                                                                    <path
                                                                                        d="M69.12 4.267c-18.773 0-35.84 6.827-48.64 19.627C6.827 37.547 0 54.613 0 72.533c0 18.773 7.68 35.84 20.48 48.64 12.8 12.8 30.72 20.48 47.787 19.627h1.707c17.067 0 33.28-6.827 46.08-19.627 12.8-12.8 20.48-29.867 20.48-48.64.853-17.92-6.827-34.987-19.627-47.787C104.107 11.093 87.04 4.267 69.12 4.267zm34.987 104.96c-9.387 9.387-22.187 15.36-35.84 14.507-12.8 0-26.453-5.12-35.84-14.507-10.24-9.387-15.36-23.04-15.36-36.693s5.12-26.453 15.36-36.693c9.387-9.387 22.187-14.507 36.693-14.507 12.8 0 25.6 5.12 34.987 14.507 10.24 10.24 15.36 23.04 15.36 36.693s-5.12 27.306-15.36 36.693zM102.4 157.867H33.28c-13.653 0-24.747 11.093-24.747 25.6v298.667c0 13.653 11.947 25.6 25.6 25.6H102.4c13.653 0 25.6-11.947 25.6-24.747v-299.52c0-13.654-11.947-25.6-25.6-25.6zm8.533 325.12c0 4.267-4.267 7.68-8.533 7.68H34.133c-4.267 0-8.533-4.267-8.533-8.533V183.467c0-4.267 3.413-8.533 7.68-8.533h69.12c4.267 0 8.533 4.267 8.533 8.533v299.52zM392.533 149.333h-17.92c-33.28 0-64.853 14.507-85.333 37.547v-11.947c0-8.533-8.533-17.067-17.067-17.067H186.88c-7.68 0-17.067 6.827-17.067 16.213v318.293c0 9.387 9.387 15.36 17.067 15.36h93.867c7.68 0 17.067-5.973 17.067-15.36v-184.32c0-28.16 20.48-50.347 46.933-50.347 13.653 0 26.453 5.12 35.84 14.507 8.533 7.68 11.947 19.627 11.947 34.987v183.467c0 8.533 8.533 17.067 17.067 17.067h85.333c8.533 0 17.067-8.533 17.067-17.067v-220.16C512 202.24 459.947 149.333 392.533 149.333zm102.4 340.48-.853.853h-83.627L409.6 307.2c0-20.48-5.12-35.84-16.213-46.933-12.8-12.8-29.867-19.627-47.787-19.627-35.84.853-64 29.867-64 67.413v182.613h-93.867V174.933h84.48l.853.853v53.76l23.04-23.04.853-.853c17.067-23.893 46.933-39.253 78.507-39.253h17.92c57.173 0 101.547 46.08 101.547 104.107v219.306z"
                                                                                        fill="#fff" opacity="1"
                                                                                        data-original="#000000"
                                                                                        class=""></path>
                                                                                </g>
                                                                            </svg>
                                                                        </a>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="txt">
                                                        {!! $leadership->description !!}
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if ($cms->furniture_journey_video_value)
            <section id="Journey">
                <div class="container">
                    <div class="tleWrap wow animate__fadeInUp" data-wow-duration="1s">
                        <div class="sTle">{{ $cms->furniture_journey_bg_title }}</div>
                        <h2 class="mTle">{{ $cms->furniture_journey_title }}</h2>
                    </div>
                    <div id="atlanticlight" class="wow animate__fadeIn" data-wow-duration="1s">
                        <div class="vidBanner">
                            <img src="{{ $cms->furniture_journey_thumb }}" loading="lazy" width="1330" height="378" alt="Journey">
                        </div>
                        <video controls>
                            <source src="{{ $cms->furniture_journey_video_value }}">
                        </video>
                        <button id="playpause" aria-label="Play/Pause">
                            <div class="play">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"
                                    xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <title>Play</title>
                                    <polygon points="12,0 25,11.5 25,39 12,50" id="leftbar" />
                                    <polygon points="25,11.5 39.7,24.5 41.5,26 39.7,27.4 25,39" id="rightbar" />
                                    <animate to="7,3 19,3 19,47 7,47" id="lefttopause" xlink:href="#leftbar"
                                        attributeName="points" dur=".3s" begin="indefinite" fill="freeze" />
                                    <animate to="12,0 25,11.5 25,39 12,50" id="lefttoplay" xlink:href="#leftbar"
                                        attributeName="points" dur=".3s" begin="indefinite" fill="freeze" />
                                    <animate to="31,3 43,3 43,26 43,47 31,47" id="righttopause" xlink:href="#rightbar"
                                        attributeName="points" dur=".3s" begin="indefinite" fill="freeze" />
                                    <animate to="25,11.5 39.7,24.5 41.5,26 39.7,27.4 25,39" id="righttoplay"
                                        xlink:href="#rightbar" attributeName="points" dur=".3s" begin="indefinite"
                                        fill="freeze" />
                                </svg>
                            </div>
                        </button>
                    </div>
                </div>
            </section>
        @endif

        <!-- SpiritSec -->
        <section id="SpiritSec">
            <div class="container">
                <div class="tleWrap mblView">
                    <h2 class="mTle">{{ $spirit->title }}</h2>
                </div>
                <div class="DFlx">
                    <div class="ritSd">
                        <div class="dFlx">
                            <div class="lftImg wow animate__fadeInUp" data-wow-duration="1s">
                                <div class="backImg">
                                    <img src="{{ $spirit->image_one_value }}" loading="lazy" width="610"
                                        height="600" alt="{{ $spirit->title }}">
                                </div>
                                <div class="backImg">
                                    <img src="{{ $spirit->image_two_value }}" loading="lazy" width="610"
                                        height="600" alt="{{ $spirit->title }}">
                                </div>
                            </div>
                            <div class="ritSd wow animate__fadeInRight" data-wow-duration="1.2s">
                                <div class="backImg">
                                    <img src="{{ $spirit->image_three_value }}" loading="lazy" width="610"
                                        height="600" alt="{{ $spirit->title }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lftSd wow animate__fadeInLeft" data-wow-duration="1s">
                        <div class="backDrop">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="721.982" height="627" viewBox="0 0 721.982 627">
                                <defs>
                                    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5"
                                        gradientUnits="objectBoundingBox">
                                        <stop offset="0" stop-color="#fff" />
                                        <stop offset="1" stop-color="#351a55" />
                                    </linearGradient>
                                </defs>
                                <path id="Path_101729" data-name="Path 101729"
                                    d="M17.663,627H704.319c9.755,0,17.663-6.9,17.663-15.41L583.62,15.41C583.62,6.9,575.712,0,565.957,0H141.993c-9.755,0-17.663,6.9-17.663,15.41L0,611.59C0,620.1,7.908,627,17.663,627Z"
                                    opacity="0.09" fill="url(#linear-gradient)" />
                            </svg>
                        </div>
                        <div class="tleWrap deskview">
                            <h2 class="mTle">{{ $spirit->title }}</h2>
                        </div>
                        <div class="cntWrap">
                            {!! $spirit->description !!}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Foundation -->
        <section id="FoundationSec">
            <div class="container">
                <div class="tleWrap mblView">
                    <h2 class="mTle">{{ $activity->title }}</h2>
                </div>
                <div class="dFlx">
                    <div class="lftSd wow animate__fadeInUp" data-wow-duration="1s">
                        <div class="tleWrap desktop">
                            <h2 class="mTle">{{ $activity->title }}</h2>
                        </div>
                        <div class="cntWrap">
                            {!! $activity->description !!}
                        </div>
                    </div>
                    <div class="ritSd wow animate__fadeInRight" data-wow-duration="1s">
                        <div class="backImg">
                            <img src="{{ $activity->image_value }}" loading="lazy" width="694" height="545"
                                alt="about">
                        </div>
                        <div class="imgBx">
                            <div class="ttl">{{ $activity->image_title }}</div>
                            <div class="txt">{{ $activity->image_subtitle }}</div>
                        </div>
                        @if ($activity->url)
                            <a class="lnkBTn" href="{{ $activity->url }}" target="_blank"
                                aria-label="External link for activity">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="37.031"
                                    viewBox="0 0 18 37.031">
                                    <g id="Group_20867" data-name="Group 20867" transform="translate(0)">
                                        <path id="Path_101737" data-name="Path 101737"
                                            d="M148.444,215.175l-1.191,1.085-.847.768-1.032.926a7.714,7.714,0,0,0-2.3,3.918,1.626,1.626,0,0,1-1.668,1.271,1.575,1.575,0,0,1-1.562-1.4,5.224,5.224,0,0,1,1.324-4.421l8.471-9.238a6.663,6.663,0,0,0,.5-8.338l-5.771-8.1a6.669,6.669,0,0,1-1.218-3.918,1.622,1.622,0,0,1,1.4-1.588,1.59,1.59,0,0,1,1.8,1.085,11.694,11.694,0,0,0,2.726,4.447l6.776,7.015a7.112,7.112,0,0,1,1.747,3.071.562.562,0,1,1-1.085.291,6.067,6.067,0,0,0-1.456-2.568l-6.8-6.988a12.992,12.992,0,0,1-2.965-4.871.478.478,0,0,0-.582-.344.529.529,0,0,0-.45.5,5.511,5.511,0,0,0,1.006,3.256l5.771,8.1a7.768,7.768,0,0,1-.582,9.741l-8.47,9.238a4.071,4.071,0,0,0-1.032,3.468.5.5,0,0,0,.5.45.507.507,0,0,0,.529-.4,8.821,8.821,0,0,1,2.647-4.474l1.509-1.35.026-.026,8.629-7.941a5.887,5.887,0,0,0,1.853-3.521.562.562,0,1,1,1.112.159,6.461,6.461,0,0,1-.529,1.853l-.529.979a5.933,5.933,0,0,1-.715.9,3.026,3.026,0,0,1-.291.291m-.9.847-5.506,5.03Z"
                                            transform="translate(-139.769 -186.113)" />
                                    </g>
                                </svg>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('js')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
        integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide.min.css"
        integrity="sha512-KhFXpe+VJEu5HYbJyKQs9VvwGB+jQepqb4ZnlhUF/jQGxYJcjdxOTf6cr445hOc791FFLs18DKVpfrQnONOB1g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.min.js"
        integrity="sha512-4TcjHXQMLM7Y6eqfiasrsnRCc8D/unDeY1UGKGgfwyLUCTsHYMxF7/UHayjItKQKIoP6TTQ6AMamb9w2GMAvNg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"
        integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        new WOW().init();
    </script>
    <script>
        // leaderShip-Slider
        document.addEventListener('DOMContentLoaded', function() {
            var main = new Splide('#leaderSec #LeadSlide', {
                type: 'fade',
                rewind: true,
                pagination: false,
                arrows: false,
                autoplay: true,
                pauseOnHover: false,
                direction: 'ltr',
                breakpoints: {
                    992: {
                        focus: 'left',
                    }
                }
            });
            var thumbnails = new Splide('#leaderSec #ThumbSlide', {
                direction: "ttb",
                // direction: "ltr",
                width: "100%",
                height: "100%",
                rewind: true,
                pagination: false,
                cover: true,
                arrows: false,
                isNavigation: true,
                perPage: 8,
                perMove: 1,
            });
            main.sync(thumbnails);
            main.mount();
            thumbnails.mount();
        });

        var furniture_journey_video_value = "{{ $cms->furniture_journey_video_value }}";
        if (furniture_journey_video_value) {
            // Journey Video
            var atlanticlight = document.querySelector("#atlanticlight video"),
                playpause = document.getElementById("playpause");
            lefttoplay = document.getElementById("lefttoplay"),
                righttoplay = document.getElementById("righttoplay"),
                lefttopause = document.getElementById("lefttopause"),
                righttopause = document.getElementById("righttopause");
            atlanticlight.removeAttribute("controls");
            playpause.style.display = "block";
            playpause.addEventListener('click', function() {
                if (atlanticlight.paused) {
                    atlanticlight.play();
                    playpause.classList.add("playing");
                    lefttopause.beginElement();
                    righttopause.beginElement();
                    $('#atlanticlight').addClass('active');
                } else {
                    atlanticlight.pause();
                    lefttoplay.beginElement();
                    righttoplay.beginElement();
                    playpause.classList.remove("playing");
                    $('#atlanticlight').removeClass('active');
                }
            }, false);
        }
    </script>
@endpush