@extends ('site::public.layout')
@section('content')
	<main class="discover-page">

		<section class="global-banner t2 animate">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $section_data['background'] !!}" alt="{!! $section_data['alt_background'] !!}" class="lazy bg">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ asset('styling/img/bg-faq.png') }}" class="lazy bg bg--bottom">
			<figure class="">
				<img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $section_data['image'] !!}" alt="{!! $section_data['alt_image'] !!}" class="lazy">
			</figure>
			<div class="container">
				<div class="text from-right">
					<h1 class="display">{!! $section_data['title'] !!} <br> {!! $section_data['title_secondary'] !!} <br>{!! $section_data['title_third'] !!}</h1>
					<h6>
						{!! $section_data['excerpt'] !!}
					</h6>
				</div>
			</div>
		</section>

		<section class="bg-linear">
			<div class="container c-1440">
				@if($featured)
					@php
					$bg = asset('assets/img/no-image.jpg');
					if($featured->image!=''){
						$img = json_decode($featured->image);
						$bg = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
					}
					@endphp
					<div class="dsc__wrapper grid-cols-1">
						<div class="dsc">
							<img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $bg !!}" alt="{!! $featured->outputTranslate('alt_image', session('locale')) !!}" class="lazy">
							<div class="dsc__text">
								<span>
									<h3>
										{!! $featured->outputTranslate('title', session('locale')) !!}
									</h3>
									<p>
										{!! $featured->outputTranslate('excerpt', session('locale')) !!}
									</p>
								</span>
							</div>
							<a href="" class="mask">
								<img src="{{ asset('styling/img/icon-plus.svg') }}">
							</a>
							<div class="dsc__content">
								<div class="inner">
									{!! $featured->outputTranslate('description', session('locale')) !!}
								
									@if($featured->cta_text!='' && $featured->cta_url!='')
										<div class="btn-wrapper btn--large">
											<a href="{!! $featured->outputTranslate('cta_url', session('locale')) !!}" class="btn btn--primary" target="blank">{!! $featured->outputTranslate('cta_text', session('locale')) !!}</a>
										</div>
									@endif
								</div>
							</div>
						</div>
					</div>
				@endif

					@foreach($discover as $key=>$dis)
						@php
						if($key==0){ echo '<div class="dsc__wrapper grid-cols-2">'; }
						if($key==2){ echo '</div><div class="dsc__wrapper grid-cols-3">'; }

						$bg = asset('assets/img/no-image.jpg');
						if($dis->image!=''){
							$img = json_decode($dis->image);
							$bg = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
						}
						@endphp
						<div class="dsc">
							<img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $bg !!}" class="lazy" alt="{!! $dis->outputTranslate('alt_image', session('locale')) !!}">
							<div class="dsc__text">
								<span>
									<h4>
										{!! $dis->outputTranslate('title', session('locale')) !!}
									</h4>
									<p>
										{!! $dis->outputTranslate('excerpt', session('locale')) !!}
									</p>
								</span>
							</div>
							<a href="" class="mask">
								<img src="{{ asset('styling/img/icon-plus.svg') }}">
							</a>
							<div class="dsc__content">
								<div class="inner">
									{!! $dis->outputTranslate('description', session('locale')) !!}

									@if($dis->cta_text!='' && $dis->cta_url!='')
										<div class="btn-wrapper btn--large">
											<a href="{!! $dis->outputTranslate('cta_url', session('locale')) !!}" class="btn btn--primary" target="blank">{!! $dis->outputTranslate('cta_text', session('locale')) !!}</a>
										</div>
									@endif
								</div>
							</div>
						</div>
					@endforeach
				</div>

			</div>
		</section>
	</main>
@endsection