@extends('layouts.app')
@section('page_title', __('services.title'))
@section('page_description', __('services.description'))
@section('page_keywords', __('services.keywords'))
@section('og_title', __('services.title'))
@section('og_description', __('services.description'))
@section('twitter_title', __('services.title'))
@section('twitter_description', __('services.description'))
@section('page_content')
    <div class="page-content bg-white">
        <div class="dlab-bnr-inr bg-pt" style="background-image:url({{ asset('assets/images/about/banner.jpg') }});">
            <div class="container">
                <div class="dlab-bnr-inr-entry">
                    <h1 class="text-white">@lang('services.title')</h1>
                    <div class="breadcrumb-row">
                        <ul class="list-inline">
                            <li><a href="{{ route('static.home') }}">@lang('home.title')</a></li>
                            <li>@lang('services.title')</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-block">
            <div class="section-full content-inner bg-gray">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="section-head text-black">
                                <h2 class="title">@lang('services.heading')</h2>
                                <p>@lang('services.description2')</p>
                            </div>
                            <div class="section-content row">
                                @if(isset($sectors))
                                    @foreach($sectors as $sector)
                                        <div class="col-lg-6 col-md-6 service-box style3">
                                            <div class="icon-bx-wraper" style="background-image:url({{ asset( $sector->inner_image_url ) }}); background-repeat: no-repeat; background-position: bottom right;">
                                            <div class="icon-lg">
                                                <a href="javascript:void(0)" class="icon-cell">
                                                    <img src="{{ $sector->icon_url }}" alt="">
                                                </a>
                                            </div>
                                            <div class="icon-content">
                                                <a href="javascript:void(0)"><h2 class="dlab-tilte">{{ $sector->name }}</h2></a>
                                                <p>{!! $sector->description !!}</p>
                                            </div>
                                            <div class="subservices">
                                                @foreach($sector->first_level_services as $service)
                                                    <a href="{{ route('static.service', $service->slug )}}" class="site-button button-sm"> <span>{{ $service->name }}</span> </a>
                                                @endforeach
                                            </div>
                                        </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-full bg-primary wow fadeIn" style="background-image:url({{ asset('assets/images/footer-produkte.png') }});">
                <div class="choses-info text-white">
                    <div class="container-fluid">
                        <div class="row choses-info-content">
                            <div class="col-lg-3 col-md-6 col-sm-6 col-6 p-a30 wow zoomIn" data-wow-delay="0.2s">
                                <h2 class="m-t0 m-b10 font-weight-400 font-45"><i class="flaticon-alarm-clock m-r10"></i><span class="counter">13</span>+</h2>
                                <h4 class="font-weight-300 m-t0">@lang('services.number1')</h4>
                            </div>
                            <div class="col-lg-3 col-md-6 col-sm-6 col-6 p-a30 wow zoomIn" data-wow-delay="0.4s">
                                <h2 class="m-t0 m-b10 font-weight-400 font-45"><i class="flaticon-presentation m-r10"></i><span class="counter">568</span>+</h2>
                                <h4 class="font-weight-300 m-t0">@lang('services.number2')</h4>
                            </div>
                            <div class="col-lg-3 col-md-6 col-sm-6 col-6 p-a30 wow zoomIn" data-wow-delay="0.6s">
                                <h2 class="m-t0 m-b10 font-weight-400 font-45"><i class="flaticon-worker m-r10"></i><span class="counter">50</span>+</h2>
                                <h4 class="font-weight-300 m-t0">@lang('services.number3')</h4>
                            </div>
                            <div class="col-lg-3 col-md-6 col-sm-6 col-6 p-a30 wow zoomIn" data-wow-delay="0.8s">
                                <h2 class="m-t0 m-b10 font-weight-400 font-45"><i class="flaticon-settings m-r10"></i><span class="counter">1000000</span>+</h2>
                                <h4 class="font-weight-300 m-t0">@lang('services.number4')</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection