@extends('cortexclean.layouts.main')
@extends('cortexclean.layouts.header')
@extends('cortexclean.layouts.footer')

@section('content')
<!--Start Page Header-->
<section class="page-header">
    <div class="page-header__bg" style="background-image: url(/images/backgrounds/about-bg.png);">
    </div>
    <div class="container">
        <div class="page-header__inner">
            <h1>{{ __('about.page_header.title') }}</h1>
            <ul class="thm-breadcrumb">
                <li><a href="{{ lroute('home') }}">{{ __('about.page_header.breadcrumb_home') }}</a></li>
                <li><span class="icon-caret"></span></li>
                <li>{{ __('about.page_header.breadcrumb_current') }}</li>
            </ul>
        </div>
    </div>
</section>
<!--End Page Header-->

<!--Start About One -->
<section class="about-one about-one--about">
    <div class="shape4 float-bob-y"><img src="{{ asset('/images/shapes/about-v1-shape1.png') }}" alt="" width="375" height="600" loading="lazy"></div>
    <div class="container">
        <div class="row">
            <!--Start About One Img-->
            <div class="col-xl-6">
                <div class="about-one__img">
                    <div class="inner">
                        <div class="shape2">
                            <div class="shape3"><img src="{{ asset('/images/logo/svg/icone-cc.svg') }}" alt="" width="1359" height="750" loading="lazy">
                            </div>
                        </div>
                        <img src="{{ asset('/images/about/cleaning.png') }}" alt="{{ __('about.intro.img_alt') }}" width="2000" height="2000" loading="lazy">
                    </div>
                </div>
            </div>
            <!--End About One Img-->

            <!--Start About One Content-->
            <div class="col-xl-6">
                <div class="about-one__content">
                    <div class="sec-title-two text-center">
                        <div class="sub-title">
                            <div class="round-one"></div>
                            <h3>{{ __('about.intro.sub_title') }}</h3>
                            <div class="round-two"></div>
                        </div>
                        <h2>{!! __('about.intro.heading') !!}</h2>
                    </div>

                    <div class="about-one__content-text2">
                        <div class="row">
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="about-one__content-text2-single">
                                    <div class="text">
                                        <p>{{ __('about.intro.text1') }}</p>
                                    </div>
                                    <ul>
                                        <li>
                                            <div class="icon-box">
                                                <span class="icon-checkmark"></span>
                                            </div>
                                            <div class="text-box">
                                                <p>{!! __('about.intro.point1') !!}</p>
                                            </div>
                                        </li>
                                    </ul>

                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="about-one__content-text2-single">
                                    <div class="text">
                                        <p>{{ __('about.intro.text2') }}</p>
                                    </div>
                                    <ul>
                                        <li>
                                            <div class="icon-box">
                                                <span class="icon-checkmark"></span>
                                            </div>
                                            <div class="text-box">
                                                <p>{!! __('about.intro.point2') !!}</p>
                                            </div>
                                        </li>
                                    </ul>

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

                    <div class="about-one__content-bottom">
                        <div class="btn-box">
                            <a class="thm-btn"
                                href="https://outlook.office.com/book/CORTEXCLEAN@cortexfacility.com/">
                                <span class="txt">{{ __('about.intro.cta_button') }}</span>
                                <i class="icon-double-chevron"></i>
                            </a>
                        </div>
                        <div class="contact-info">
                            <div class="icon-box">
                                <a href="tel:+32470954203">
                                    <span class="icon-telephone"></span>
                                </a>
                            </div>
                            <div class="text-box">
                                <h4><a href="tel:+32470954203">+32 470 95 42 03</a></h4>
                                <p>{{ __('about.intro.call_label') }}</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--End About One Content-->
        </div>
    </div>
</section>
<!--End About One -->

<section class="feature-three">
    <div class="feature-three__bg" style="background-image: url(/images/backgrounds/5.png);">
    </div>
    <div class="container">
        <div class="feature-three__inner">
            <div class="sec-title-two text-center">
                <div class="sub-title">
                    <div class="round-one"></div>
                    <h3>{{ __('about.expertise.sub_title') }}</h3>
                    <div class="round-two"></div>
                </div>
                <h2>{{ __('about.expertise.title') }}</h2>
            </div>
            <div class="row px-2">
                @foreach(__('about.expertise.items') as $i => $item)
                <!--Start Feature Four Single-->
                <div class="col-xl-3 col-lg-6 col-md-6 wow animated fadeInUp" data-wow-delay="{{ [0.1, 0.3, 0.5, 0.1, 0.3, 0.5, 0.1, 0.3][$i] }}s">
                    <div class="feature-four__single">
                        <h2>{{ $item['title'] }}</h2>
                        <p>{{ $item['text'] }}</p>
                    </div>
                </div>
                <!--End Feature Four Single-->
                @endforeach
            </div>
        </div>
    </div>
</section>

<section class="feature-four">
    <div class="auto-container">
        <div class="feature-four__inner">
            <div class="feature-four__bg"></div>
            <div class="container">
                <div class="row">
                    <div class="col-xl-9 col-lg-9 col-md-12">
                        <div class="sec-title-two text-center">
                            <div class="sub-title">
                                <div class="round-one"></div>
                                <h3>{{ __('about.commitments.sub_title') }}</h3>
                                <div class="round-two"></div>
                            </div>
                            <h2>{{ __('about.commitments.title') }}</h2>
                        </div>
                        <div class="row">
                            @php $commitmentIcons = ['shield', 'plant', 'telephone', 'balance', 'human-resources']; @endphp
                            @foreach(__('about.commitments.items') as $i => $item)
                            <div class="col-xl-3 col-lg-6 col-md-6 feature-three__single text-center">
                                <div class="icon-box">
                                    <img src="{{ asset('/images/icon/' . ($commitmentIcons[$i] ?? 'shield') . '.png') }}" alt="{{ strip_tags(str_replace('<br>', ' ', $item)) }}" width="512" height="512" loading="lazy">
                                </div>
                                <div class="title-box">
                                    <h2>{!! $item !!}</h2>
                                </div>

                            </div>
                            @endforeach
                        </div>

                    </div>

                    <!--Start Feature Four Right Content-->
                    <div class="col-xl-3 col-lg-3 col-md-12">
                        <div class="feature-four__right-content">
                            <h2>+<span class="odometer" data-count="45">4</span><span class="plus"></span></h2>
                            <br>
                            <h2>{{ __('about.commitments.years_suffix') }}</h2>
                            <br>
                            <h2>{{ __('about.commitments.experience') }}</h2>
                        </div>
                    </div>
                    <!--End Feature Four Right Content-->
                </div>
            </div>
        </div>
    </div>
</section>

<section class="jobs-one">
    <div class="jobs-one__bg" style="background-image: url(/images/backgrounds/jobs-v1-bg.png);"></div>
    <div class="container">

        <div class="row">
            <!--Start Jobs One Content-->
            <div class="col-xl-6">
                <div class="sec-title-two text-center">
                    <div class="sub-title">
                        <div class="round-one"></div>
                        <h3>{{ __('about.team.sub_title') }}</h3>
                        <div class="round-two"></div>
                    </div>
                    <h2>{!! __('about.team.title') !!}</h2>
                </div>
                <div class="jobs-one__content">
                    <div class="jobs-one__content-text1">
                        <p>{{ __('about.team.text') }}</p>
                    </div>
                    <div class="services-details__accordion">
                        <ul class="accordion-box">
                            @foreach(__('about.team.accordion') as $i => $item)
                            <li class="accordion block {{ $i === 0 ? 'active-block' : ($i === 2 ? 'mb0' : '') }}">
                                <div class="acc-btn {{ $i === 1 ? 'active' : '' }}">
                                    <div class="icon-outer">
                                        <i class="icon-plus"></i>
                                    </div>
                                    <h3>{!! $item['title'] !!}</h3>
                                </div>
                                <div class="acc-content {{ $i === 0 ? 'current' : '' }}">
                                    <p>{{ $item['text'] }}</p>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>

                </div>
            </div>
            <!--End Jobs One Content-->
        </div>
    </div>
</section>

@endsection