@extends('layout.headerAndFooter')

@section('headLinks')
    <link rel="stylesheet" href="{{asset('siteStyle/sectionStyle/topSection.css')}}">
    <link rel="stylesheet" href="{{asset('siteStyle/service2.css')}}">
    <link rel="stylesheet" href="{{ asset('siteStyle/home.css') }}">
    <link rel="stylesheet" href="{{ asset('siteStyle/sectionStyle/cardsWithSwiper.css') }}">
    <link rel="stylesheet" href="{{ asset('siteStyle/sectionStyle/faq.css') }}">
    <link rel="stylesheet" href="{{ asset('siteStyle/sectionStyle/devSection.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <link rel="icon" href="{{ asset('images/favicon.ico') }}" type="image/x-icon">

    <meta name="description" content="content description">
@stop

@section('title')
    {{$pageName}}
@stop

@section('content')

    <section class="containerB">
        <div class="three_wrapper" id="three-container">
            <div id="three-scene"></div>
        </div>
        <div class="topSection">
            <div class="titleAndBtn">

                @include('sections.breadcrumbs', [
                    'parentPageLink' => route("home"),
                    'parentPage' => 'Accueil',
                    'childPageLink' => "",
                    'childPage' => 'Expertises',
                    'childPageLink2' => "",
                    'childPage2' => $pageName,
                    "fontColor" => "lightFont"
                ])
                <h1 class="titleTopSection">{!!$bigTitle!!}</h1>
                <h3 class="underTitle">{!!$subTitle!!}</h3>
                <div class="btn-box">
                <a class="atirao-button atirao-button--primary atirao-button--large" href="{{route("contact")}}">
                    <span class="txt">Prendre un RDV</span>
                    <span class="bdrl"></span>
                    <span class="bdrr"></span>
                </a>
                </div>
            </div>
            <div class="image">
                <img src="{{asset('images/services/'.$bigImage)}}" alt="">
            </div>
        </div>
    </section>


    {{-- <!--brands show-->
    @include('sections.clients')
    <!--brands show--> --}}


    <!-- section1 -->
    <section class="containerW" data-aos="fade-left">
        <div class="solutions servicesPage IL">
            <div class="SAContent top">
                <h2 class="sectionTitle">{!! $section1Title1 !!}</h2>
                <p class="context">{!! $section1Content1 !!}</p>
            </div>
            <div class="imagezone">
                <svg class="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Calque_1" x="0" y="0" viewBox="0 0 358 328" style="enable-background:new 0 0 358 328" xml:space="preserve">
                    <style>.st2{fill:#e30613}</style>
                    <linearGradient id="ellipse-1_00000183956970254960260120000007346660034355110334_" gradientUnits="userSpaceOnUse" x1="16.35" y1="181.147" x2="339.85" y2="169.656">
                        <stop offset="0" style="stop-color:#e30613"/>
                        <stop offset=".771" style="stop-color:#b80612f7"/>
                    </linearGradient>
                    <path stroke-width="0.7" id="ellipse-1" style="fill:none;stroke:url(#ellipse-1_00000183956970254960260120000007346660034355110334_);stroke-miterlimit:10" d="M326.4 181.5c-9.6-11.4-23.3-21.6-38.6-30.6-30.6-18-67.8-31-92.8-37.4-44.7-12-87.1-16-119.5-12.8-16.2 1.6-29.9 5.1-40.1 10.2-10.1 5.1-16.9 12.1-19.2 20.7-2.3 8.7.1 18.1 6.4 27.7 6.3 9.6 16.4 19.4 29.6 29 26.4 19 65.1 36.8 109.8 48.8s88.9 16.1 122.1 12.9c16.6-1.6 30.5-5 40.4-10.2s15.9-12.2 16.4-21.1c.8-13.4-4.8-25.8-14.5-37.2zM324 238.9"/>
                    <circle class="st2" r="2.5">
                        <animateMotion accumulate="none" additive="replace" calcMode="paced" dur="8s" fill="remove" repeatCount="indefinite" restart="always">
                            <mpath href="#ellipse-1"/>
                        </animateMotion>
                    </circle>
                </svg>

                <svg class="svg2" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Calque_1" x="0" y="0" viewBox="0 0 358 328" style="enable-background:new 0 0 358 328" xml:space="preserve">
                    <style>.st2{fill:#e30615bd}</style>
                    <linearGradient id="ellipse-2_00000003798006259545676890000016088795091170603668_" gradientUnits="userSpaceOnUse" x1="125.43" y1="203.378" x2="246.199" y2="124.874">
                        <stop offset="0" style="stop-color:#e30615a6"/>
                        <stop offset="1" style="stop-color:#e30613"/>
                    </linearGradient>
                    <path stroke-width="0.7" id="ellipse-2" style="fill:none;stroke:url(#ellipse-2_00000003798006259545676890000016088795091170603668_);stroke-miterlimit:10" d="M312.8 255.9c-.6-11.5-4.5-25.1-11.2-39.9-13.4-29.7-38-64.5-70.8-97.3s-67.4-57.5-97.1-70.9C119 41 105.4 37.1 94 36.5s-20.8 2-27.1 8.3C60.6 51.1 58 60.5 58.6 72s4.5 25.1 11.2 39.9c13.4 29.7 38 64.5 70.8 97.3 21.2 19.2 54.7 45.9 86.7 63.8 16 8.9 31.6 15.6 45 18s24.9.5 32.3-7.9c6.3-6.3 8.9-15.7 8.2-27.2z"/>

                    <circle class="st2" r="2.5">
                        <animateMotion accumulate="none" additive="replace" calcMode="paced" dur="7s" fill="remove" repeatCount="indefinite" restart="always">
                            <mpath href="#ellipse-2"/>
                        </animateMotion>
                    </circle>
                </svg>

                <img class="bigImgTop" src="{{ asset('images/services/' . $section1Image) }}" alt="Top part of the image">
                <img class="bigImgBottom" src="{{ asset('images/services/' . $section1Image) }}" alt="Bottom part of the image">

            </div>
        </div>
    </section>
    <!-- section1 -->

    <!-- new cards --->
    @include('sections.CardsWithSwiper' , ['offersDetaild'=>$offersDetaild,'offersDetaildTitle'=>$offersDetaildTitle])
    <!-- end new cards -->

    <!-- new hover with image section --->
    @if(isset($devSection) && !empty($devSection))
       @include('sections.DevSection')
   @endif
   <!-- hover with image section --->


    <!-- new hover with image section --->
    @if(isset($expertises) && !empty($expertises))
        @include('sections.OuExpertizeSection')
    @endif
    <!-- hover with image section --->



    @if ($introCards)
        <!-- Intro Cards -->
        @include('sections.services.IntroCards',$cards = $introCards)
    @endif


    <!-- méthodologie Section -->
    <section class="containerB methodologie">
        <h2 class="explanationTopTitle">Notre méthodologie</h2>
        <div class="explanationZone">
            @php
                $nuberstep = 1;
            @endphp
            @foreach ($methodologie as $item)
                @if ($item['line'] == 'left')
                    <div class="{{'line ' . $item['line']}}" data-aos="{{'fade-'. $item['line']}}">
                        <div class="explanation">
                            <p class="step">ÉTAPE {{$nuberstep ++}} </p>
                            <h3>{{$item['title']}}</h3>
                            <p>{{$item['content']}}</p>
                        </div>
                        <div class="{{'icon '. $item['icon']}}">

                        </div>
                    </div>
                @else
                    <div class="{{'line ' . $item['line']}}" data-aos="{{'fade-'. $item['line']}}">
                        <div class="{{'icon '. $item['icon']}}">

                        </div>
                        <div class="explanation">
                            <p class="step">ÉTAPE {{$nuberstep ++}}</p>
                            <h3>{{$item['title']}}</h3>
                            <p>{{$item['content']}}</p>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </section>
    <!-- méthodologie Section end -->

    @if ($sertifTitle)
        <!-- service Solution -->
        <section class="containerW">
            <div class="solutions servicesPage">
                <div class="SAContent">
                    <h2 class="sectionTitle">{!!$sertifTitle!!}</h2>
                    <p class="context">{{$sertifContent}}</p>
                </div>
                <div class="imagezone certif">
                    <img src="{{asset('images/services/'. $sertifImage)}}">
                </div>
            </div>
        </section>
    @endif



    <!-- faq section -->

    @if ($faq_data)
        @include('sections.faq' , ['faq_data'=>$faq_data])
    @endif
    <!-- end section -->

@stop

@section('footerScripts')
    <script src="{{ asset('siteScripts/servicesSwiper.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="{{ asset('siteScripts/cards.js') }}"></script>
    <script src="{{ asset('siteScripts/ourExpertize.js') }}"></script>
    <script src="{{ asset('siteScripts/faq.js') }}"></script>
    <script src="{{ asset('siteScripts/devSection.js') }}"></script>
    <script src="{{ asset('siteScripts/hero-animation.js') }}"></script>
@stop