@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/slider-v2-bg.jpg);">
    </div>
    <div class="container">
        <div class="page-header__inner">
            <h1>{{ __('services.page_header.title') }}</h1>
            <ul class="thm-breadcrumb">
                <li><a href="{{ lroute('home') }}">{{ __('services.page_header.breadcrumb_home') }}</a></li>
                <li><span class="icon-caret"></span></li>
                <li>{{ __('services.page_header.breadcrumb_current') }}</li>
            </ul>
        </div>
    </div>
</section>
<!--End Page Header-->

<!--Start Portfolio One-->
<section class="portfolio-one">
    <div class="portfolio-one__bg"></div>
    <div class="container">
        <div class="sec-title-two text-center">
            <div class="sub-title">
                <div class="round-one"></div>
                <h3>{{ __('services.portfolio.sub_title') }}</h3>
                <div class="round-two"></div>
            </div>
            <h2>{!! __('services.portfolio.title') !!}</h2>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="services-details__accordion">
                    <ul class="accordion-box">
                        @foreach(__('services.portfolio.blocks') as $i => $block)
                        <li class="accordion block {{ $i === 0 ? 'active-block' : '' }}" id="{{ $block['id'] }}">
                            <div class="acc-btn {{ $i === 0 ? 'active' : '' }}">
                                <div class="icon-outer">
                                    <i class="icon-plus"></i>
                                </div>
                                <h3>{!! $block['title'] !!}</h3>
                            </div>
                            <div class="acc-content {{ $i === 0 ? 'current' : '' }}">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <ul class="list-unstyled acc-content__list">
                                            @foreach($block['items'] as $line)
                                            <li><span class="icon-box"><span class="icon-check-1"></span></span> {{ $line }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

    </div>
</section>
<!--End Portfolio One-->


<!--Start Features Two-->
<section class="features-two">
    <div class="container">
        <div class="sec-title-two text-center">
            <div class="sub-title">
                <div class="round-one"></div>
                <h3>{{ __('services.sectors.sub_title') }}</h3>
                <div class="round-two"></div>
            </div>
            <h2>{!! __('services.sectors.title') !!}</h2>
        </div>
        <div class="row">
            @foreach(__('services.sectors.items') as $i => $item)
            <!--Start Features Two Single-->
            <div class="col-xl-4 col-lg-4 col-md-6 wow animated fadeInUp" data-wow-delay="{{ [0.1, 0.3, 0.5][$i % 3] }}s">
                <div class="features-two__single">
                    <div class="features-two__single-inner">
                        <div class="features-two__single-icon">
                            <img src="{{ asset('/images/icon/' .$item['icon']. '.svg') }}" alt="{{ $item['alt'] }}" width="50" height="50" loading="lazy">
                        </div>
                        <div class="features-two__single-content">
                            <h2>{!! $item['title'] !!}</h2>
                            <p>{{ $item['text'] }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--End Features Two Single-->
            @endforeach
        </div>
    </div>
</section>
<!--End Features Two-->


<!--Start Why Choose One-->
<section class="why-choose-one">
    <div class="container">
        <div class="sec-title-two text-center">
            <div class="sub-title">
                <div class="round-one"></div>
                <h3>{{ __('services.process.sub_title') }}</h3>
                <div class="round-two"></div>
            </div>
            <h2>{{ __('services.process.title') }}</h2>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="why-choose-one__inner">
                    <div class="why-choose-one__img">
                        <img src="{{ asset('/images/resources/why-choose-v1-img1.png') }}" alt="{{ __('services.process.img_alt') }}" width="300" height="300" loading="lazy">
                    </div>
                    @php $steps = __('services.process.steps'); @endphp
                    <ul class="why-choose-one__list">

                        <li class="wow fadeInRight" data-wow-delay="100ms" data-wow-duration="1000ms">
                            <div class="icon-box">
                                <img src="{{ asset('/images/icon/1.png') }}" alt="" width="100" height="100" loading="lazy">
                            </div>
                            <div class="content-box">
                                <h2>{!! $steps[0]['title'] !!}</h2>
                                <p>{{ $steps[0]['text'] }}</p>
                            </div>
                        </li>

                        <li class="style2 wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1000ms">
                            <div class="content-box">
                                <h2>{!! $steps[1]['title'] !!}</h2>
                                <p>{{ $steps[1]['text'] }}</p>
                            </div>
                            <div class="icon-box">
                                <img src="{{ asset('/images/icon/2.png') }}" alt="" width="100" height="100" loading="lazy">
                            </div>
                        </li>

                    </ul>

                    <ul class="why-choose-one__list">

                        <li class="style2 wow fadeInLeft" data-wow-delay="100ms" data-wow-duration="1000ms">
                            <div class="icon-box">
                                <img src="{{ asset('/images/icon/3.png') }}" alt="" width="100" height="100" loading="lazy">
                            </div>
                            <div class="content-box">
                                <h2>{!! $steps[2]['title'] !!}</h2>
                                <p>{{ $steps[2]['text'] }}</p>
                            </div>
                        </li>

                        <li class="wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1000ms">
                            <div class="content-box">
                                <h2>{!! $steps[3]['title'] !!}</h2>
                                <p>{{ $steps[3]['text'] }}</p>
                            </div>
                            <div class="icon-box">
                                <img src="{{ asset('/images/icon/4.png') }}" alt="" width="100" height="100" loading="lazy">
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End Why Choose One-->

@endsection